What does CSS actually do?
CSS (Cascading Style Sheets) describes how HTML elements look: colours, fonts, spacing, sizes and where boxes sit on the screen. HTML says what each piece of content is. CSS says how it should be presented. Keeping the two apart means you can redesign a whole bakery site by editing one stylesheet, without touching a single page of menu text.
A stylesheet is a plain text file, usually ending in .css, made of rules. The browser reads every rule, works out which elements each one applies to, and uses the results to paint the page. There is no compiling step and no build tool required. Change a value, reload, and you see the effect.
CSS also works for people you never see. A reader can turn on a high contrast mode, set a bigger default font size or print the page, and a well written stylesheet adapts to all of those with no extra code.
What are the parts of a rule?
Every rule has two parts. The selector picks which elements to style. The declaration block, wrapped in curly braces, holds one or more declarations. Each declaration is a property name, a colon, a value and a semicolon.
The rule below says: find every paragraph, make its text dark brown and make it 18px. p is the selector, color and font-size are properties, and #5a3e2b and 18px are values. Writing one declaration per line with two spaces of indentation makes rules far easier to scan and to compare in version control.
The semicolon separates declarations. The last one in a block can technically skip it, but you should always write it. The moment you add another line below, a missing semicolon makes the browser read both lines as one broken value and drop them.
p {
color: #5a3e2b;
font-size: 18px;
}Where can CSS go, and which place should you use?
There are three ways to attach CSS to a page. The first is a separate file linked from the <head> with <link rel="stylesheet" href="/css/site.css">. The second is a <style> element in the page itself. The third is a style attribute on a single element.
Use a linked file for almost everything. One file serves every page, the browser caches it after the first visit, and your HTML stays readable. A <style> element suits a one-off page, an email template, or a small block of critical CSS you want to arrive with the HTML.
The style attribute applies to one element only and beats nearly every rule in your stylesheets, which makes it hard to override later. Keep it for values JavaScript sets at runtime, such as the position of a dragged item or a progress bar's width.
When reading AI-generated HTML, look for long style="..." attributes repeated on many elements. That is a sign the styling should move into a class in the stylesheet.
<head>
<link rel="stylesheet" href="/css/site.css">
<style>
.notice { color: #8a3b12; }
</style>
</head>
<p style="width: 40%">Loading…</p>How does the browser match rules to elements?
The browser parses the HTML into a tree of elements (the DOM) and parses the CSS into a list of rules. For each element, it checks which selectors match it. For efficiency it reads each selector from right to left: for .menu p it first finds paragraphs, then checks whether each one has an ancestor with the class menu.
Usually several rules match the same element, and often more than one sets the same property. The cascade decides which declaration wins, using where the rule came from, how specific its selector is and which came last. That gets its own lesson. For now, the short version is that a more specific selector beats a general one, and between equals the later rule wins.
Once every property of every element has a value, the browser lays out the boxes and paints them. You can watch the matching yourself: right-click an element, choose Inspect, and the Styles panel lists every rule that matched it, with overridden declarations crossed out.
Why do pages look styled before you write any CSS?
Every browser ships with its own stylesheet, called the user agent stylesheet. It is why headings are big and bold, links are blue and underlined, lists have bullets, and the <body> has an 8px margin. Your CSS is layered on top and replaces any default it targets.
The defaults are similar across Chrome, Firefox and Safari, though they are not identical, especially for form controls. That is why many projects start with a short reset that removes the body margin, sets a sensible box-sizing and makes images fit their container. You don't need a huge reset library. Ten lines covering the defaults that actually annoy you is enough.
In DevTools, default rules appear at the bottom of the Styles panel labelled "user agent stylesheet". When a gap or an indent appears from nowhere, that is the first place to look.
body {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}How do you write comments in CSS?
A comment starts with /* and ends with */. It can span several lines and the browser ignores everything inside it. Use comments to label sections of a stylesheet, explain a value that looks odd, or temporarily switch off a declaration while you debug.
CSS has no single-line // comment. Writing // old colour in a stylesheet does not comment anything out. The browser treats it as junk at the start of the next selector or declaration and drops that whole rule or line, which produces confusing bugs.
Forgetting the closing */ is worse: everything after the opening /* is ignored, right to the end of the file. If the bottom half of your styles stopped working at once, search for an unclosed comment.
/* ---------- Menu cards ---------- */
.menu {
padding: 16px; /* matches the photo gutter */
}What happens when CSS contains something the browser doesn't understand?
The browser skips it and carries on. An unknown property, a misspelled value or a feature it doesn't support yet is dropped, and every other declaration still applies. There is no error message on the page and nothing in the console by default.
This forgiving behaviour is deliberate, and it is what lets you use new CSS safely. Write a fallback first and the newer value second. Browsers that understand the second line use it. Older ones ignore it and keep the first.
The downside is that typos fail silently. colour: red, font-size: 18 px and padding: 16 all do nothing. DevTools helps here: an invalid declaration shows with a strike-through and a small warning icon in the Styles panel. The editor on this site flags them too.
Whole selectors fail the same way. If one selector in a comma-separated list is invalid, the entire rule is dropped, which is a common surprise when a browser doesn't support a new pseudo-class.
.hero {
height: 100vh; /* every browser */
height: 100dvh; /* browsers that know dvh */
}How do you check that your CSS is being applied?
Open DevTools, select the element and read the Styles panel from the top. Rules are listed from most specific to least, with the file name and line number beside each one. A crossed-out declaration lost to another rule. A declaration with a warning triangle is invalid. A rule that is missing entirely means the selector never matched.
The Computed tab shows the final value of every property and, when expanded, which rule supplied it. If a colour looks wrong, the Computed tab tells you exactly where it came from in one click.
Also check the Network panel that the stylesheet loaded with status 200. A wrong path in the href gives a 404, and the page falls back to browser defaults with no other warning.
Field notes
- CSS controls how things look, while HTML says what each piece of content is.
- A rule has a selector that picks elements and declarations inside curly braces.
- A linked stylesheet file is the usual place to keep your CSS.
- The browser skips any line it can't read and keeps applying the rest.
Easy to get wrong
Property names use American spelling. The browser ignores colour without telling you.
CSS has no // comments. The slashes become part of the next selector, so the whole h1 rule is thrown away.
A missing semicolon joins two lines into one invalid value, and both declarations are lost.
Questions people ask
Is CSS a programming language?
It is a declarative style language. You describe the result you want and the browser works out how to draw it. Modern CSS has variables, maths functions and conditions such as media queries, but no loops or general logic.
Does the order of my link and style elements matter?
Yes. When two rules have equal specificity, the one that appears later wins, and that includes rules in different files. Put your own stylesheet after any third-party CSS you want to override.
Can I put CSS in the body?
A <style> element inside <body> works in every browser, but it can cause a flash of unstyled content. Keep stylesheets in the <head>.
Why do my styles work locally but not on the live site?
Usually the path in the href is wrong for the server, the file name has different capitalisation, or the server caches the old file. Check the Network panel for a 404 or an old copy.