Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Notes on CSS

CSS (Cascading Style Sheets) is a language used to style HTML or XML documents, enhancing web design by separating content from presentation. It includes three types: Inline, Internal, and External CSS, each with specific use cases and syntax. CSS provides advantages such as reusability and consistency, but has limitations including complex layouts and browser compatibility issues.

Uploaded by

premdandin01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Notes on CSS

CSS (Cascading Style Sheets) is a language used to style HTML or XML documents, enhancing web design by separating content from presentation. It includes three types: Inline, Internal, and External CSS, each with specific use cases and syntax. CSS provides advantages such as reusability and consistency, but has limitations including complex layouts and browser compatibility issues.

Uploaded by

premdandin01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Introduction to CSS

• CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a
document written in HTML or XML.

• It separates the content (HTML) from its visual presentation, making web design more flexible and
maintainable.

• CSS enhances the visual appeal of web pages by defining styles for elements like layout, colors,
and fonts.

Types of CSS

• Inline CSS: Style is applied directly within the HTML tag using the style attribute.

• Internal CSS: Defined within a <style> tag in the <head> section of an HTML document.

• External CSS: Written in a separate file with the .css extension and linked to the HTML document
using the <link> tag.

CSS Syntax

• A CSS rule set consists of a selector and a declaration block.

o Selector: Identifies the HTML element(s) to style.

o Declaration block: Contains one or more declarations separated by semicolons, each


consisting of a property and a value (e.g., color: red;).

CSS Box Model

• CSS uses the box model to represent the structure of each element, consisting of:

1. Content: The actual content of the element.

2. Padding: Space between the content and the border.

3. Border: Surrounds the padding (or content if no padding is specified).

4. Margin: Space outside the border, separating the element from others.

CSS Properties

• Text Properties: Control font, size, color, alignment, and spacing (e.g., font-size, color, text-align).

• Background Properties: Set background color, image, and other effects (e.g., background-color,
background-image).

• Box Model Properties: Manage margins, padding, and borders.

1
• Positioning Properties: Define how elements are positioned (e.g., position, top, left, z-index).

• Display Properties: Control element visibility and layout behavior (e.g., display, visibility).

Advantages of CSS

• Separation of Concerns: Keeps content (HTML) and design (CSS) separate.

• Reusability: External CSS can be reused across multiple pages.

• Consistency: Ensures uniform styling across a website.

• Accessibility: Improves accessibility by providing alternate styles for different devices or users.

CSS Limitations

• Complex layouts may require additional techniques (e.g., JavaScript).

• Browser compatibility can sometimes be an issue.

• Debugging CSS rules can be challenging in large projects.

Overview of Inline CSS

Inline CSS is a method of applying CSS directly within an HTML element. It is used to style a specific
element by adding the style attribute within the opening tag of the HTML element.

Inline CSS is typically used for quick styling changes or for applying unique styles to a single element, rather
than managing styles across multiple elements or pages.

Syntax of Inline CSS

The syntax for Inline CSS involves specifying a style attribute inside an HTML element. The attribute
contains one or more CSS property-value pairs separated by semicolons.

Syntax for declaration -

<element style="property1: value1; property2: value2; ...;">

Content

</element>

<p style="color: blue; font-size: 16px; text-align: center;">

This is a paragraph styled using inline CSS.

2
</p>

Components of the Syntax:

1. HTML Element: The element to which the style is applied (e.g., <p>).

2. Style Attribute: The style attribute is used to apply inline CSS.

3. Property-Value Pair: Specifies the CSS properties and their values (e.g., color: blue).

4. Semicolon: Separates multiple CSS declarations within the style attribute.

Use Cases:

• Applying temporary styles during development.

• Styling specific elements when external or internal CSS isn't feasible.

• Overriding existing styles for a single instance.

Overview of Internal CSS

Internal CSS refers to a style sheet embedded directly within an HTML document. It is defined within the
<style> tag in the <head> section of the document. Internal CSS is used when you want to apply styles to
a single HTML page without linking an external stylesheet.

This method allows you to keep your CSS centralized for a specific page while maintaining some separation
from the HTML content.

Characteristics of Internal CSS:

1. Styles are written within a <style> tag in the <head> section.

2. Styles apply to all elements of the HTML document that match the defined selectors.

3. It is more structured and maintainable compared to inline CSS but less reusable than external CSS.

3
Syntax of Internal CSS:

<head>

<style>

selector {

property1: value1;

property2: value2;

...

</style>

</head>

Example –

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

h1 {

color: navy;

text-align: center;

p{

font-family: Arial, sans-serif;

font-size: 16px;

</style>

</head>

4
<body>

<h1>Welcome to Internal CSS Example</h1>

<p>This paragraph is styled using Internal CSS.</p>

</body>

</html>

Use Cases:

• Used for styling single-page applications or documents.

• Suitable for small projects or when external stylesheets are unnecessary.

• Useful during the initial stages of development or for prototyping.

Internal CSS provides a balance between inline and external CSS, offering maintainable styles for single
pages while keeping the HTML document self-contained.

Overview of External CSS

External CSS refers to a style sheet that is written in a separate file with a .css extension and linked to an
HTML document. It allows you to define and apply styles to multiple HTML pages, ensuring consistency
across a website.

External CSS is considered the most efficient and scalable method for styling websites, especially for
projects with multiple pages.

Characteristics of External CSS:

1. Defined in a separate file with the .css extension.

2. Linked to an HTML document using the <link> tag in the <head> section.

3. Styles can be reused across multiple HTML pages, promoting modularity and maintainability.

4. Enhances separation of concerns by keeping content (HTML) and presentation (CSS) distinct.

5
Syntax of External CSS File:

Linking CSS to an HTML Document:

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

Writing CSS in the External File (styles.css):

body {

background-color: white;

h1 {

color: navy;

text-align: center;

p{

font-family: 'Arial', sans-serif;

font-size: 14px;

6
Advantages of External CSS:

1. Reusability: A single stylesheet can be applied to multiple HTML pages.

2. Separation of Concerns: Keeps HTML content and CSS styling separate, improving readability and
maintainability.

3. Scalability: Ideal for large projects where consistent styling is required across numerous pages.

4. Easier Maintenance: Updating the external CSS file automatically reflects changes across all linked
pages.

Use Cases:

• Websites with Multiple Pages: Ensures a consistent look and feel across the entire site.

• Large Projects: Simplifies management and scaling of styles.

• Collaborative Development: Facilitates teamwork by separating content and design tasks.

You might also like