CSS How It Works

CSS works by selecting HTML elements and applying styles to them.

A CSS rule has three parts:

1. selector
2. property
3. value

Basic rule structure

h1 {
  color: red;
}

• h1 → selector
• color → property
• red → value

How browser reads CSS

1. Browser loads HTML
2. Browser loads CSS
3. Browser matches selectors
4. Browser paints the page

Example

Try it yourself! Edit the HTML and CSS below:

<h1>Welcome</h1>
<p>This is a website</p>

h1 {
  color: green;
}

p {
  color: gray;
}

Result:

• heading is green
• paragraph is gray

Try changing the colors in the CSS tab to see the changes instantly!

Common beginner confusion

“Why my CSS not applying?”

Usually because:

• wrong selector
• typo in class name
• CSS file not linked

Remember

• CSS does not change HTML
• CSS only changes appearance
• Browser applies rules step by step