CSS

Where HTML says what each part of a page is, CSS says how it should appear. Keeping the two apart is what makes a site maintainable: change one rule for the button colour and every button on the site updates, instead of editing hundreds of pages by hand.

CSS is also where responsive design happens. The same page content is rearranged by rules that apply at different screen widths, so a three-column layout on a laptop becomes a single column on a phone. It is not a design tool: the decisions about colour and layout are made by a designer, and CSS is how they are carried out in the browser.

How it works

A CSS rule has two parts: a selector that picks out elements, and declarations that give them properties. One rule might say that all main headings use a certain font at a certain size; another that all links are the brand colour; another that the menu is laid out in a row. Rules live in stylesheet files that the browser downloads alongside the HTML, or occasionally inside the page itself.

"Cascading" describes how conflicts are settled. When several rules apply to the same element, the browser decides which wins: rules marked as important come first, then the more specific selector, and when they tie, whichever rule came last. This is powerful but easy to tangle. A developer fixing one page with a very specific rule can accidentally make that element impossible to restyle later without an even more specific rule, and over years stylesheets fill with these patches.

Media queries are the part of CSS that checks the screen. A rule inside a media query applies only when the condition is true, such as a width below a certain size or the visitor's device being set to dark mode. Modern layout tools in CSS, called flexbox and grid, handle arranging elements in rows and columns, which once needed workarounds.

Example

A landscaping company wants its green call-to-action buttons to become orange for a spring campaign. Because the button colour is defined once in the stylesheet as a shared value, a developer changes that one value and every button on every page switches at once. Rolling it back after the campaign is equally quick.

On an older site of the same kind, built by adding a different inline style to each button over the years, the same change means finding and editing every button individually, and some are always missed. The difference between the two sites is invisible to visitors but shows up directly in how many hours small changes take.

Why it matters for your business

CSS decides whether your site looks consistent, reads well on a phone and stays stable while it loads. Bloated stylesheets slow down the first view of a page, and layouts that jump as images and fonts arrive hurt both visitors and Core Web Vitals. Disorganised CSS also makes every small change take longer, which turns into developer hours. A quick self-check is to open your site on a phone, rotate it, and zoom the text: if parts overlap, overflow the screen or become unreadable, the stylesheet needs attention.

Common mistakes

• Overriding styles again and again with ever more specific rules until nobody knows which one is in charge.
• Loading large theme or framework stylesheets of which the site uses only a small fraction.
• Choosing text and background colours that look stylish but fail colour contrast checks.
• Testing the layout on one laptop and never checking it on a real phone.

Questions people ask

Can I change my website's look without changing its content?

Usually yes. Because CSS is separate from the content, a designer can change colours, fonts and layout by editing the stylesheets alone. How easy this is depends on how the site was built; heavily customised themes can make even small style changes slow.

Does CSS affect SEO?

Indirectly. Search engines rank content, not styling, but CSS influences page speed, mobile usability and layout shifts, all of which feed into how Google judges the page experience. Hiding text with CSS to stuff in keywords is treated as spam.

What is a CSS framework?

A CSS framework is a ready-made set of styles and layout rules that developers use as a starting point, so they do not write everything from scratch. It speeds up building, but sites can end up looking generic and carrying styles they never use.