CSS
What is CSS?
CSS (cascading style sheets) is the language that describes how a page looks: type, colour, spacing, layout and how all of it behaves at different screen sizes. HTML says what an element is; CSS says how it appears. Written well it loads once, applies across the whole site, and is the reason a layout holds together on a phone and on a monitor alike.
How it works
CSS is a set of rules that say how the elements of a page look: this heading in this typeface and size, these buttons in the brand colour, these three columns side by side on a monitor and one under another on a phone. The rules are written once and apply across the whole site, so changing the brand colour means changing one line, not every page.
Media queries let the same page adapt to the width of the screen, which is how one site serves a phone, a tablet and a monitor. The browser has to read the CSS before it can draw the page, so a heavy or badly loaded stylesheet delays everything the visitor sees.
Example
A consultancy’s site uses a popular ready-made theme. It loads 480 KB of CSS on every page, styles for sliders, shops, forums and dozens of layouts the site does not use, plus a second stylesheet from a page builder. On a phone over 4G the first text appears after 2.9 seconds.
The site is rebuilt with CSS written for its own design: 38 KB, with the rules needed for the first screen included in the page itself. The first text appears after 0.9 seconds, the Largest Contentful Paint passes on mobile, and nothing about the design changes.
Why it matters for a business
CSS decides whether the design holds together on every screen, and it has a direct cost in speed. A theme bought for its look often carries the styles of every feature it might ever need, and visitors download all of it on every page. Styles written for the actual design are smaller, faster and easier to change safely.
It also matters for accessibility. Text that can be enlarged without breaking the layout, enough contrast between text and background, and visible focus for keyboard users are all CSS decisions. See web accessibility.
What to ask
- How much CSS does our site load, and how much of it is used?
- Does the layout hold on a narrow phone and on a large monitor without sideways scrolling?
- Can text be enlarged to 200% without the page breaking?
- Is our design written for our site, or layered on top of a general-purpose theme?
In our website development the styles are written for the specific design rather than layered over a ready-made theme, so the page stays light and fast on a phone.