Introduction to CSS

What CSS does, how it connects to HTML, and your first styles.

Lesson 1 of 49Beginner12 min read

CSS stands for Cascading Style Sheets. It's the language that controls how web pages look. HTML builds the structure, such as headings, paragraphs and buttons, and CSS decides their colours, sizes, fonts, spacing and position on the screen.

The same HTML with different CSS can look like a completely different website. That's what makes CSS so powerful: you can redesign a site without touching its content, and every page that uses the stylesheet updates at once.

In this lesson you'll see what CSS code looks like, why it's kept separate from HTML, and what the word "cascading" actually means.

What CSS code looks like

CSS
h1 {
  color: purple;
  font-size: 40px;
}

In plain English: "Find every h1 and make its text purple and 40 pixels tall."

  • h1 is the selector: which elements to style.
  • color and font-size are properties: what to change.
  • purple and 40px are values: what to change it to.

Together, a selector and its block of properties form a rule. A stylesheet is simply a list of rules. You'll look at every part in detail in CSS Syntax.

Why CSS is a separate language

In the early days of the web, styling was written straight into HTML with tags like <font color="red">. Every page repeated the same styling, and changing the design meant editing hundreds of files by hand.

CSS separates content (HTML) from presentation (CSS). One stylesheet can style a thousand pages. Change the brand colour once, and the whole site updates. The separation also keeps HTML clean and meaningful, which helps screen readers and search engines.

What "cascading" means

Several rules can target the same element. The cascade is the set of rules the browser follows to decide which one wins. Usually the more specific rule wins, and when two rules are equally specific, the one written later wins. You'll learn the details in Specificity & the Cascade.

Some properties are also inherited. If you set a font on the <body>, every paragraph and heading inside it uses that font unless another rule says otherwise. That's why a few lines of CSS can change the feel of a whole page.

What you can do with CSS

CSS covers far more than colours and fonts. With it you can:

  • control spacing around and inside every element
  • build page layouts with columns, rows and grids
  • adapt a design to phones, tablets and large screens
  • add hover effects, transitions and animations
  • support dark mode and print-friendly versions of a page

This course covers each of these step by step, starting with the basics.

CSS Syntax

A CSS rule

selector {
  property: value;
}

CSS Summary

  • CSS stands for Cascading Style Sheets and controls how HTML looks.
  • A rule has a selector, followed by properties and values in curly braces.
  • Keeping CSS separate from HTML lets one stylesheet style a whole site.
  • The cascade decides which rule wins when several target the same element.
  • Some properties, like fonts and text colour, are inherited by child elements.

CSS Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Your first styles

The HTML is in the first tab, the CSS in the second. Change purple to tomato and press Run.

h1 {
  color: purple;
  font-size: 40px;
}

p {
  color: #555;
  font-family: Georgia, serif;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Select every <h1> on the page.
  2. Line 2Make its text purple.
  3. Line 3Make it 40 pixels tall.
  4. Lines 6 to 9A second rule for paragraphs: grey text in a serif font.
Example 2

Same HTML, two different looks

The HTML is the same simple card. The CSS turns it into something that looks designed. Try deleting the CSS completely and run it again. That's what HTML looks like on its own.

.card {
  max-width: 280px;
  padding: 20px;
  background: #1e1b4b;
  color: white;
  border-radius: 16px;
  font-family: system-ui, sans-serif;
}

.card a {
  color: #fde047;
  font-weight: bold;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1.card targets the element with class="card".
  2. Lines 2 to 3Limit its width and add space inside it.
  3. Lines 4 to 5A dark indigo background with white text.
  4. Line 6Rounded corners.
  5. Lines 10 to 13Style only the links inside the card.

Common CSS Mistakes

Writing CSS inside the HTML text

Don't
<p>color: red; This should be red</p>
Do
<p class="warning">This should be red</p>
<style>
  .warning { color: red; }
</style>

CSS is its own language. It goes in a <style> element, a .css file or a style attribute, never in the page text. See How to Add CSS.

Using = instead of :

Don't
h1 {
  color = blue;
}
Do
h1 {
  color: blue;
}

CSS uses a colon between property and value, and a semicolon at the end.

CSS in Real Projects

Every site's personality is CSS

Open two websites built with similar HTML, such as a bank and a game studio. The difference you see is CSS: brand colours, fonts, spacing, dark mode and animations. Browser DevTools (F12) let you edit any site's CSS live. Try changing a heading colour on your favourite site; only you will see it.

CSS Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Make every paragraph's text green.

 {
  : green;
}
Multiple choiceeasy

What does CSS stand for?

Multiple choiceeasy

In h1 { color: red; }, what is h1?

Fix the bugeasy

The heading should be orange and 32px, but the CSS has two syntax errors. Fix them.

h1 {
  color = orange;
  font-size: 32px
  font-family: sans-serif;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The heading is orange
  • The heading is 32px
  • The font is sans-serif

CSS Quiz

3 questions to check what you learned.

  1. Which language controls how a web page looks?

    • CSS
    • HTML
    • JavaScript
    • SQL

  2. Which symbol separates a property from its value?

    • =
    • ;
    • :
    • -

  3. Why is CSS kept separate from HTML?

    • Browsers can't read them together
    • CSS is faster than HTML
    • So one stylesheet can style many pages, and design changes happen in one place
    • It's required by law

CSS Challenge

Style a sticky note

Using CSS only (don't change the HTML):

  1. Give .note a yellow background (#fff1c2 or any yellow)
  2. Add padding of 16px
  3. Make the h3 inside it red
/* Write your CSS here */
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • .note has a yellow-ish background
  • .note has 16px padding
  • The h3 is red

Related CSS topics

02CSS SyntaxRules, declarations, grouping selectors and comments.03Adding CSS to HTMLInline styles, style tags and external stylesheets, and which one to use.01HTML IntroductionWhat HTML is, how browsers read it, and your very first web page.
Esc
↑↓ to navigateEnter to open