HTML — The Structure CSS Styles
Imagine being asked to "make the prices green" on a café's website. Before you can write a single line of CSS, you need to know where the prices are, what they are called, and what they sit inside. CSS never invents elements. It dresses the ones HTML already built.
The rule
CSS can only style what the HTML has already named.
Every CSS rule starts by pointing at elements. It can point using three kinds of hook that live in the HTML:
- the element name, such as
h2orp - a class, such as
class="price" - an id, such as
id="menu"
It can also use position in the tree: an element's parent, its children and its siblings. So the HTML is not just content; it is the map CSS reads.
Here is the page we will style for the whole course, the home page of a small café:
<body>
<header id="top">
<h1>Harbour Café</h1>
<nav class="site-nav">
<a href="#menu">Menu</a>
<a href="#visit">Visit</a>
</nav>
</header>
<main>
<section id="menu">
<h2>Today's menu</h2>
<article class="dish">
<h3>Masala omelette</h3>
<p class="price">₹180</p>
<p>Three eggs, green chilli and coriander.</p>
</article>
<article class="dish special">
<h3>Mango lassi</h3>
<p class="price">₹120</p>
<p>Thick, cold and only in summer.</p>
</article>
</section>
<section id="visit">
<h2>Visit us</h2>
<p>Open 8 am to 6 pm, every day.</p>
</section>
</main>
<footer>
<p>Harbour Café, Marine Drive</p>
</footer>
</body>Read it as a family tree. body has three children: header, main and footer. Each article is a child of section#menu and the parent of an h3 and two paragraphs.
The shortcut
Before styling anything, find it, name its hooks, name its parent. Three questions, answered straight from the HTML, tell you every way CSS could reach an element.
Find it
The price
₹120sits in apinside the secondarticle.
The common mistake is writing CSS for something the HTML does not contain, such as styling a "price" before any element carries that class. If there is no hook, add one in the HTML first.
Drills
Answer fast — trust the rule.
Which element is the parent of <h3>Masala omelette</h3>?
How many classes does the Mango lassi article carry?
The owner wants a phone number shown under the opening hours. Where does that change start?
Which of these is not a hook CSS can use to reach an element?
Remember
- CSS only styles elements the HTML already contains.
- Find it, name its hooks (element, class, id), name its parent.
- Missing hook? Fix the HTML first; do not fight it with CSS.