Introduction to CSS: What It Is and How It Styles Web Pages

CSS (Cascading Style Sheets) is the language that controls how web pages look: colours, fonts, spacing, sizes, layout, and even animation. HTML says what the content is; CSS says how it should be presented.

Before and after#

Here is a small piece of HTML with no CSS. Browsers use their own plain default styles:

<h1>Masala Chai</h1>
<p class="tagline">Spiced tea, ready in 10 minutes</p>
<p>Boil water with ginger and cardamom, add tea leaves, milk and sugar, then simmer.</p>

The same HTML with a few lines of CSS:

body {
  font-family: system-ui, sans-serif;
  max-width: 480px;
  margin: 20px auto;
  padding: 20px;
  background: #fff8ee;
  border-radius: 12px;
}
h1 {
  color: #8a3b12;
  margin-bottom: 4px;
}
.tagline {
  color: #a0663f;
  font-style: italic;
  margin-top: 0;
}

<h1>Masala Chai</h1>
<p class="tagline">Spiced tea, ready in 10 minutes</p>
<p>Boil water with ginger and cardamom, add tea leaves, milk and sugar, then simmer.</p>

The HTML did not change. Only the CSS was added. That separation is the core idea: you can completely redesign a site by changing its CSS while the content stays the same.

How to read a CSS rule#

h1 {
  color: #8a3b12;
  margin-bottom: 4px;
}

Each property: value; pair is a declaration. You will look at syntax in detail in Syntax and Comments.

What "cascading" means#

Many rules can apply to the same element: the browser's defaults, your stylesheet, and maybe a more specific rule for one class. The cascade is the set of rules the browser uses to decide which declaration wins when they conflict, based on where styles come from, how specific the selectors are, and their order. Understanding the cascade is the key to CSS that behaves predictably; it has its own lesson, Cascade, Specificity and Inheritance.

What CSS can do#

• Typography: fonts, sizes, line spacing, text alignment.
• Colour and backgrounds: colours, images, gradients.
• The box model: spacing, borders, sizes of every element.
• Layout: Flexbox and Grid for rows, columns and whole-page layouts.
• Responsive design: different layouts for phones, tablets and desktops.
• Effects and motion: shadows, transitions, transforms and animations.
• Themes: variables and dark mode.

What you will learn#

This course goes from your first rule to modern layout and architecture:

1. Fundamentals: adding CSS, selectors, the cascade, units and colours.
2. The box model: margin, padding, borders, sizing and display.
3. Text, fonts, backgrounds, gradients, lists, links and tables.
4. Layout with position, Flexbox and Grid.
5. Responsive design with media queries and container queries.
6. Shadows, transitions, transforms and animations.
7. Modern CSS: custom properties, clamp(), :has(), nesting, dark mode and how to organise CSS in real projects.

You should know basic HTML first. If not, start with the HTML course.

Key takeaway#