Module 2 · Lesson 1⏱ ~8 minCSS

What Is CSS?

CSS is what makes HTML look good — colors, fonts, spacing, and layout.

What Is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton of a webpage, CSS is the skin, clothes, and makeup. It controls everything visual — colors, fonts, spacing, and layout.

Without CSS, every website would look like a plain text document — black text on a white background, no styling at all. CSS is what makes one site feel warm and friendly, another sleek and professional, and another playful and colorful. It's the design language of the web.

HTML says what something is: "this is a heading, this is a paragraph."
CSS says how it looks: "this heading is blue, 32 pixels tall, and centered."

How CSS Works

You write rules that target HTML elements and apply styles. Every CSS rule has two parts:

A selector — what element(s) you want to style
One or more declarations — how you want to style them (a property and a value)

css

h1 {
  color: blue;
  font-size: 24px;
}

Let's break that down: h1 is the selector — it targets all <h1> elements. Inside the curly braces { } are two declarations: color: blue; makes the text blue, and font-size: 24px; makes it 24 pixels tall. Each declaration ends with a semicolon.

The anatomy of a CSS rule:

css

selector {
  property: value;
  property: value;
}

It's that simple. You pick what you want to style, then tell the browser how it should look. The browser reads your CSS and applies it to the matching HTML elements automatically.

Three Ways to Add CSS

There are three ways to add CSS to your HTML. Each has its place, but one is far better for real projects:

1. Inline CSS — styles written directly on an HTML element using the style attribute:

html

<h1 style="color: blue; font-size: 24px;">Hello</h1>

Quick but messy. If you have 50 headings, you'd have to repeat the styles 50 times. Avoid this for anything except quick experiments.

2. Internal CSS — a <style> tag inside the <head> of your HTML:

html

<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>

Better than inline — all your styles live in one place. But they only apply to that one HTML file. If your site has 10 pages, you'd have to copy the styles to every page.

3. External CSS — a separate .css file linked from your HTML:

html

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

This is the best way for real projects. Write your CSS once in a .css file, then link it from every HTML page. One change updates your entire site. All the examples from here on will assume you're using an external stylesheet.

Colors and Backgrounds

Color is one of the most immediate ways to bring a page to life. CSS gives you two main color properties:

color — changes the text color
background-color — changes the background behind an element

You can specify colors in several ways:

css

/* Named colors — easy to remember */
h1 {
  color: blue;
}

/* Hex codes — precise, the most common on the web */
p {
  color: #4F7EF7;
}

/* RGB — red, green, blue values from 0 to 255 */
body {
  background-color: rgb(245, 247, 250);
}

Named colors are the simplest — blue, red, green, white, etc. There are 140 named colors in CSS, but they're limited.

Hex codes (like #4F7EF7) are the most common on real websites. They start with # and use six characters (0–9 and A–F) to represent red, green, and blue. They give you millions of colors to choose from.

RGB values — like rgb(79, 126, 247) — let you specify how much red, green, and blue (each from 0 to 255) you want. Same idea as hex, just a different way to write it.

Here's a complete example changing both text and background:

css

body {
  background-color: #f0f4ff;
}

h1 {
  color: #2c3e50;
}

p {
  color: #555555;
}

Fonts and Text

CSS gives you fine control over how text looks. The most important text properties are:

css

h1 {
  font-family: Arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

font-family — which font to use. You can list multiple as fallbacks: if Arial isn't available, the browser uses any sans-serif font. Common choices: Arial, Georgia, Verdana, or system fonts like system-ui.
font-size — how big the text is, usually in pixels (px). Body text is typically 14–18px. Headings range from 24–48px or larger.
font-weight — how bold the text is. Common values: normal (400), bold (700), or numeric values like 300 (light), 600 (semi-bold).
text-align — horizontal alignment: left, center, right, or justify.
line-height — the space between lines of text. A value of 1.5 means the line height is 1.5× the font size, which is comfortable for reading.

These properties are the foundation of web typography. Combined with color, they let you create a complete visual identity for your text — from the fonts on a newspaper site to the big, bold headings on a marketing page.

Try It Yourself

Take the HTML page you built in Module 1 and add your first CSS. Create a styles.css file with these rules:

Change the background-color of the body to something other than white
Change the color of your headings
Set a font-family on the body (try Arial, sans-serif)
Center your main heading with text-align: center;

Remember to link your stylesheet in the <head>: <link rel="stylesheet" href="styles.css">

Key Terms

CSS

Cascading Style Sheets — the language that controls how HTML elements look. It handles colors, fonts, spacing, and layout.

Selector

The part of a CSS rule that specifies which HTML element(s) to style. For example, h1 selects all heading-1 elements.

Property

What aspect of the element you want to change — like color, font-size, or background-color. Always followed by a colon and a value.

Declaration

A property and its value together, ending with a semicolon. Example: color: blue; is one declaration.

Stylesheet

A file (ending in .css) that contains CSS rules. Linked to HTML pages to apply styling across an entire site.

Check Your Understanding

What does CSS stand for, and what does it do?

Answer: CSS stands for Cascading Style Sheets. It controls how HTML elements look — colors, fonts, spacing, and layout.

What are the two parts of a CSS rule?

Answer: A selector (what to style) and one or more declarations (how to style it, written as property: value; pairs).

Which way of adding CSS is best for a site with multiple pages and why?

Answer: External CSS (a separate .css file linked with <link>) is best. You write styles once and they apply to every page that links to the file. If you need to change the site's design, you only change one file.

Back to Course Next: Spacing and Layout