How CSS Works

Understand how the browser reads CSS rules and applies them to HTML elements.

How Does CSS Work?

CSS works by selecting HTML elements and applying styling rules to those elements.

A CSS rule tells the browser which element should be styled and what changes should be applied.

CSS Working Flow

The browser reads the HTML page, finds the matching CSS rules, and applies the styles before displaying the final page.

HTML Element

<p>Hello</p>

→

CSS Rule

color: blue;

→

Styled Element

Blue text

CSS Rule Structure

A CSS rule normally contains a selector and one or more declarations.

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

Parts of the Rule

p is the selector.
color: blue; is a declaration.
font-size: 18px; is another declaration.

What is a Selector?

A selector tells CSS which HTML element should receive the styling.

h1 {
    color: purple;
}

Here, the h1 selector targets all <h1> elements.

What is a Declaration?

A declaration contains a CSS property and its value.

color: blue;
font-size: 20px;

The property describes what should change, while the value specifies how it should change.

Multiple CSS Properties

One selector can contain multiple declarations.

.title {
    color: blue;
    font-size: 24px;
    text-align: center;
}

How the Browser Applies CSS

The browser loads the HTML document, reads the CSS rules, matches selectors with HTML elements, and applies the matching styles.

Remember:

CSS does not replace HTML. It works with HTML to control presentation and layout.

Summary

CSS works by selecting HTML elements and applying styling declarations. A CSS rule contains a selector, properties, and values. The browser reads these rules and applies the matching styles to the web page.