Sales Loves Marketing

What is CSS (Cascading Style Sheets)?

CSS (Cascading Style Sheets) is the language that controls how a web page looks, including colours, fonts, spacing and layout. HTML gives a page its content and structure; CSS styles it.

By Sales Loves Marketing teamOriginally written by Joran HofmanUpdated

CSS, short for Cascading Style Sheets, is the language that decides how a web page looks. It sets the colours, fonts, spacing, layout and animations of everything on the page. The W3C calls it a core language of the open web platform.

What is CSS used for?

  • Branding: applying your brand colours and typography across every page.
  • Layout: placing content in columns, grids and sections.
  • Responsive design: changing the layout for phones, tablets and desktops with media queries.
  • Interaction: hover states for buttons, transitions and simple animations.
  • Print and email: styling content for printing and for HTML email.

A short example:

h1 {
  color: #1a1a1a;
  font-size: 2.5em;
}

The selector h1 picks every main heading. The declarations set its colour and size.

How does CSS work?

MDN describes the process in three steps:

  1. The browser receives the HTML and turns it into a DOM tree, a model of the page's structure.
  2. It collects the CSS rules, whether written in the page or in separate .css files, and sorts them by the elements they apply to.
  3. It applies the rules to the DOM to build a render tree, then paints the page on screen.

The "cascading" part means that when several rules target the same element, the browser follows a fixed order to decide which one wins. It looks at where the rule comes from and whether it is marked !important, then at how specific the selector is, and finally at which rule comes last.

HTML and CSS have separate jobs. HTML holds the content and structure: headings, paragraphs, images and links. CSS holds the presentation. Because the styling sits in its own files, you can change the look of a whole website by editing one style sheet.

A common comparison: HTML is the frame and walls of a house, and CSS is the paint, furniture and lighting.

Why CSS matters for marketers

  • Page speed. web.dev explains that CSS is render-blocking by default: the browser won't show the page until it has processed the CSS. Bloated style sheets delay your landing page. web.dev advises keeping CSS lean and delivering it quickly, and marking styles that aren't needed for the first view, such as print styles, as non-blocking. See also Google's Core Web Vitals.
  • SEO. Google's robots.txt guide warns that if you block style files Google needs to understand a page, it won't analyse that page well. Don't block important CSS in robots.txt.
  • Email. Support for CSS in the head of an email is poor, and some clients strip it entirely, so email templates usually rely on inline styles.
  • Consistency. A shared style sheet in your content management system keeps every new page on brand without extra design work.

How CSS is developed

CSS is maintained by the W3C's CSS Working Group. The language is organised into modules, such as backgrounds and borders, each with its own specification and stage of maturity. Each year the W3C publishes a CSS Snapshot that lists the parts of CSS ready for browsers to implement.

Frequently asked questions

What is the difference between HTML and CSS?

HTML defines what is on the page and how it is structured, such as headings, paragraphs and links. CSS defines how those elements look, such as their colour, size and position. The browser combines both to draw the page.

Is CSS a programming language?

CSS is usually described as a style sheet language rather than a programming language. It works through rules, each made of a selector that picks elements and declarations that set their styles.

Does CSS affect SEO?

Indirectly. CSS is render-blocking by default, so large or slow-loading style sheets delay when a page appears, which hurts user experience and page speed. Google also warns that blocking style files it needs to understand a page means it can't analyse that page well.