Cascading Style Sheets

CSS (Cascading Style Sheets) is the styling language of the web: it controls layout, colours and fonts and separates design from content. This makes code leaner, changes easier and pages faster – important for users and Core Web Vitals.

Cascading Style Sheets – CSS for short – are a styling language standardised and developed further by the World Wide Web Consortium (W3C). Along with HTML and JavaScript, CSS is one of the core languages of the World Wide Web. Style sheets define what a web page looks like: layout, colours, spacing, typography and animations. The big advantage: content and design are kept separate. The markup language HTML describes the content and its structure, while CSS controls the appearance. This means both can be written and changed independently of each other.

CSS for consistent web design

As with most web standards, the goal of CSS was a uniform language that helps everyone design web pages. This makes working on a website together easier – for example when several developers at an agency work on one shop – because everyone uses the same styling language. Thanks to the W3C, CSS is a worldwide standard and is supported by all common browsers.

Components of Cascading Style Sheets

Style sheets consist of rules. Each rule specifies which elements of a page it applies to – that is the selector – and which properties these elements receive. An example: with the rule h2 { font-size: 1.5rem; color: #333; }, all level-2 subheadings appear in the same size and colour. Classes, IDs and combinations allow selectors to be defined as precisely as needed. If several rules apply to the same element, the “cascade” – hence the name – decides which rule wins, based on order and specificity.

Advantages of CSS as a styling language in an HTML document

Without CSS, styling would have to be written directly on every single HTML element. That is laborious even for a few pages and becomes more confusing with every additional page. With CSS, the design is defined once centrally and applies to all elements of the same kind. This keeps the source code lean and clear. Design changes are made in one place, and errors only need to be corrected once. For SEO and loading time: lean, well-structured CSS loads faster. Techniques such as critical CSS load the rules needed for the visible area first, which improves Core Web Vitals. Unused CSS, which themes and plugins often bring along, on the other hand slows down page rendering.