How CSS Works with HTML

CSS (Cascading Style Sheets) is used to style and layout web pages. It works in conjunction with HTML (HyperText Markup Language) by defining how HTML elements should be displayed. Here's an overview of how CSS works with HTML:

1. Adding CSS to HTML

There are three primary ways to incorporate CSS into HTML:

1. Inline CSS:

Inline CSS is used to apply a unique style to a single HTML element.
You add the CSS directly within the style attribute of the HTML element.

Example:

<p style="color: red;">This is a red paragraph.</p>

2. Internal CSS:

Internal CSS is used to define styles for a single HTML document.
You include the CSS rules within a <style> tag in the <head> section of the HTML file.

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is a blue paragraph.</p>
</body>
</html>

3. External CSS:

External CSS is used to define styles for multiple HTML documents.
You create a separate CSS file and link it to the HTML file using the <link> tag.

HTML file (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>This is a styled paragraph.</p>
</body>
</html>

CSS file (styles.css):

p {
    color: green;
}

2. CSS Selectors

CSS selectors are used to select the HTML elements you want to style. There are several types of selectors:

1. Element Selector:

Selects all elements of a specified type.

Example:

p {
    color: purple;
}

2. Class Selector:

Selects elements with a specific class attribute.
Classes are prefixed with a dot (.).

Example:

.highlight {
    background-color: yellow;
}

HTML:

<p class="highlight">This paragraph is highlighted.</p>

3. ID Selector:

Selects a single element with a specific id attribute.
IDs are prefixed with a hash (#).

Example:

#unique {
    font-size: 20px;
}

HTML:

<p id="unique">This paragraph has a unique style.</p>

3. CSS Declarations

CSS declarations define the style properties to be applied to the selected elements. Each declaration consists of a property and a value, separated by a colon.

Example:

p {
    color: blue;
    font-size: 16px;
}

In this example:

color is the property, and blue is the value.
font-size is the property, and 16px is the value.

4. The Cascade and Specificity

The term "cascading" in CSS refers to the way styles are applied based on their specificity and order of appearance. When multiple styles apply to the same element, the browser determines which style to apply based on specificity and the order of the styles.

Specificity:

Inline styles have the highest specificity.
ID selectors have higher specificity than class selectors.
Class selectors have higher specificity than element selectors.

Order of Appearance:

When styles have the same specificity, the last declared style takes precedence.

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: black;
        }
        #special {
            color: green;
        }
    </style>
</head>
<body>
    <p id="special">This text will be green.</p>
</body>
</html>

In this example, even though p has a general rule to be black, the paragraph with the id of special will be green due to the higher specificity of the ID selector.

5. Linking CSS to HTML

To link an external CSS file to an HTML document, use the <link> tag in the <head> section.

Example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph styled with CSS.</p>
</body>
</html>

In the example above, styles.css contains the CSS rules that will be applied to the HTML document.

Toggle Sidebar