How CSS styles a page

Separate content from presentation

HTML describes meaning and structure; CSS controls appearance. Keeping them separate makes a site easier to update and more accessible.

See a simple rule

This rule changes every paragraph without changing the HTML content.

p {
  color: navy;
  line-height: 1.6;
}

Understand the cascade

A page can receive styles from browser defaults, external stylesheets, embedded rules, and inline declarations. The cascade decides which applicable value wins.

• Inheritance passes some values, such as text color, from parent to child
• Specificity helps choose between competing selectors
• Later rules win when origin, importance, and specificity are equal

Use progressive enhancement

Start with clear semantic HTML, then add CSS. If a stylesheet is slow or unavailable, the document should still remain understandable and usable.