Styling Pages with CSS

Making Pages Look Good

CSS stands for Cascading Style Sheets. While HTML decides what content exists, CSS decides how that content looks.

CSS Rule Structure

A CSS rule has a selector that picks elements, and a block of declarations (property and value pairs) that style them.

p {
  color: navy;
  font-size: 16px;
  line-height: 1.6;
}

This rule says: every <p> element should have navy text, a font size of 16 pixels, and comfortable line spacing.

Connecting CSS to HTML

The cleanest way is an external file linked from the <head>.

<link rel="stylesheet" href="styles.css">

Selectors: Choosing What to Style

• Element selector — h1 targets every h1.
• Class selector — .note targets elements with class="note". Classes can be reused on many elements.
• ID selector — #header targets the one element with id="header". An id must be unique on the page.

.button {
  background-color: #2563eb;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}

The Box Model

Every HTML element is a rectangular box made of four layers, from inside out:

1. Content — the text or image itself.
2. Padding — space between the content and the border.
3. Border — a line around the padding.
4. Margin — space outside the border, separating this box from others.

Understanding the box model is the key to controlling spacing and layout on a page.

Useful Properties

• color sets text colour; background-color sets the background.
• margin and padding control spacing.
• font-family and font-size control text appearance.
• display controls how an element flows on the page.

When two rules conflict, the more specific selector wins, and a later rule beats an earlier one. That ordering behaviour is the “cascading” in CSS.