Cascading Style Sheets (CSS)

How CSS works

CSS rules select HTML elements and set their properties:

h1 { font-size: 2.5rem; color: #0a0c24; }
.button { background: #ffc24b; padding: 0.75rem 1.5rem; }

“Cascading” means that when several rules apply to the same element, the browser decides which one wins based on specificity and order.

What CSS makes possible

• Layouts with Flexbox and Grid
• Responsive design with media queries
• Animations and transitions
• Themes and dark mode with custom properties (variables)

CSS and SEO

CSS affects SEO through speed and usability. Keep CSS files small, remove unused styles, and avoid layout shifts caused by late-loading fonts. Never use CSS to hide text from visitors that is meant for search engines; that counts as hidden text under Google’s spam policies. And don’t block CSS files in robots.txt, because Google needs them to render your pages.

CSS example

A site has a red button style in a stylesheet: .button { background: #c0392b; color: #fff; }. Changing that single line changes every button on the site at once. Another rule, @media (max-width: 600px), stacks the columns on phones. The designer never edits individual pages, which is the point of keeping style in CSS.

CSS best practices for fast pages

1. Load one small stylesheet for the whole site rather than many large ones.
2. Remove rules that no page uses.
3. Put the CSS needed for the top of the page first, so content appears quickly.
4. Use system fonts or load web fonts carefully so text does not jump.
5. Do not hide important text with CSS tricks meant to fool search engines.

CSS mistakes

• Writing styles directly in every page, which is hard to keep consistent.
• Blocking CSS in robots.txt, so Google cannot see the page as users do.
• Ignoring contrast and font size, which hurt readability.

CSS FAQs

Does CSS affect SEO?

Indirectly, through page speed, layout shifts and mobile usability. See cumulative layout shift and responsive web design.

What is the difference between CSS and HTML?

HTML gives the page its structure and content. CSS controls how it looks.