<< Home

PART 2: CSS

Chapter 10: CSS Basics and the Cascade

CSS arrived because the early web felt like a stack of cardboard signs held together with tape. Designers kept trying to decorate entire pages using only HTML, which meant inventing odd tricks with tables, spacer images and stray attributes. Pages worked, yet every attempt to adjust the look forced authors to rewrite content and presentation together as if they were welded. CSS split that weld. It let authors write clean HTML for meaning and then layer visual rules on top so structure stayed steady while style could float freely above it. This separation also raised an interesting question about what should happen when several rules try to style the same element… and that puzzle eventually shaped the cascade.

Inline styles vs stylesheets

Before stylesheets existed, the easiest way to influence an element’s look was to place a style attribute right on the tag. Inline rules work, yet they cling to the element so tightly that the HTML becomes tangled with visual details. A stylesheet, by contrast, lives in its own space and sends its rules outward like a gentle drizzle of paint. This keeps HTML calm and readable while letting you change the look of an entire site by editing one file.

<p style="color: blue">Inline styles feel glued to the element.</p>
<link rel="stylesheet" href="styles.css">
💡 Stylesheets encourage reuse because a single rule can affect many elements at once.

How CSS targets elements

Every CSS rule begins with a selector. A selector acts like a small spotlight that tells the browser which elements should receive the declarations inside the braces. These can be simple spotlights such as p or .tagline, or they can combine in layered ways such as nav ul li a. The browser reads the selector, finds all matching elements, then applies the declarations in order.

p {
  color: green;
}

.tagline {
  font-size: 1.25rem;
}

nav ul li a {
  text-decoration: none;
}
⚠️ A selector that is too broad can catch more elements than intended, which may lead to surprises when pages grow larger.

Specificity and inheritance

When multiple rules try to paint the same element, the browser settles the dispute using specificity. Each selector carries a weight based on its parts. An ID is heavier than a class, and a class is heavier than a plain element name. The browser compares these weights and chooses the strongest rule. Alongside this, inheritance lets some properties flow gently down from parent to child. Text color and font size often inherit, yet layout properties such as margin and padding do not.

#main-title {
  color: red;
}

.title {
  color: blue;
}

h1 {
  color: black;
}

In this example the ID selector wins because its weight is highest, so the element with ID main-title becomes red even though other rules also offer colors.

The box model and display types

Each element on a page behaves like a small cardboard box with content in the center, padding around that content, borders around the padding and margins around the outside. This is the box model. Once you picture elements as boxes, layout becomes easier to reason about. The browser also assigns each element a display type such as block, inline or inline-block. These types determine how boxes sit next to each other, whether they claim full rows or flow inside lines and how their dimensions behave.

⚠️ The box model only works well when you stay aware of what sits inside the box and what sits outside it, because CSS can behave differently in each of those areas. Many layout techniques rely on adjusting properties that affect only the interior region or only the exterior region, so thinking in layers helps the rules make sense. 
p {
  margin: 1rem 0;
  padding: 0.5rem;
  border: 1px solid grey;
  display: block;
}
💡 Understanding display types helps you spot why some boxes stretch across the page while others nestle quietly inside a line.

Adding the first styles to the homepage

With the basics in place you can begin shaping the homepage. A few gentle touches already lift the page. You might adjust the background, set a readable font stack or change the spacing between sections. These first steps give the site a tone, almost like tuning an instrument before a performance.

body {
  font-family: system-ui, sans-serif;
  background-color: #fdfdfd;
  color: #222;
}

header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

The history of CSS adds an interesting final thread to this chapter. HTML grew mostly from the hands of programmers who wanted a simple language for documents on a young and experimental web. Its early focus stayed close to structure and meaning, which is why the core tags read like the bones of a clean outline. CSS arrived later from a different crowd entirely.

Many of its ideas came from designers who already knew how to shape pages in print and who wanted the web to offer the same quiet control over spacing, type, rhythm and proportion. Their influence gave CSS its visual vocabulary and its careful separation from HTML. One language holds meaning and order, and the other handles the look and feel of the page. Together they form a steady partnership that still guides how pages are built today.