CSS — The Presentation Layer
Two websites can share exactly the same HTML and look nothing alike: one dark and minimal, one bright and playful. The difference is entirely in the stylesheet. CSS, short for Cascading Style Sheets, is the language that decides how a page looks.
The rule
HTML says what it is; CSS says how it looks.
HTML carries meaning: this is a heading, this is a list, this is navigation. CSS carries presentation: colour, fonts, spacing, sizes, layout, and how all of that adapts to a phone or a wide monitor. It can even animate.
A piece of CSS is a set of rules. Each rule picks some elements and gives them styles:
.price {
color: green;
font-weight: bold;
}This one rule turns every café price green and bold, however many prices the menu has.
Keeping the two apart pays off in three ways:
- Reuse: one stylesheet can style every page of a site.
- Change: a redesign touches the CSS and leaves the content alone.
- Access: screen readers and search engines read the HTML's meaning, so it must stay honest whatever the design.
The word "cascading" matters too. Many rules can target the same element, and CSS has a fixed procedure for deciding which one wins. You will meet it at the end of the next section.
The shortcut
For every request, ask "Is this about meaning or about looks?" Meaning goes in the HTML. Looks go in the CSS. Some requests need both: a new meaning in the HTML, then a look for it in the CSS.
"Make the prices green"
Pure looks. CSS only: a rule for
.price.
The trap: choosing an HTML element for its default look. Using h1 for a small caption because it is bold, or h4 because it is the right size, lies about the page's structure. Pick the element for its meaning and let CSS set the size.
Drills
Answer fast — trust the rule.
What does CSS stand for?
Which of these belongs in CSS rather than HTML?
A designer wants the "Visit us" heading to look small. What is the right move?
Twenty pages link to one stylesheet. You change the brand colour there. How many pages change?
Remember
- HTML says what it is; CSS says how it looks.
- Ask "meaning or looks?" and put the change in the right layer.
- Never pick an HTML element for its default appearance.