Introduction to CSS — HTML & CSS Course

What you'll learn

Welcome to Phase 3. You've built solid, meaningful HTML — now let's make it beautiful. CSS (Cascading Style Sheets) is the language that controls how your pages look: colours, fonts, spacing, and layout. This module covers the essentials — how to add CSS and how it works.

By the end you'll be able to:

Explain what CSS is and does
Add CSS three ways and know which to prefer
Write CSS rules with selectors, properties, and values
Understand what "cascading" means

What CSS is

CSS styles HTML. You write rules that select elements on the page and declare how they should look. HTML provides the structure and content; CSS provides the presentation layer on top. The same HTML can look wildly different depending on its CSS — that separation is a core strength of the web.

Three ways to add CSS

There are three ways to apply CSS, and one is clearly best for real projects:

Inline — a style attribute on one element: <p style="color: red">. Quick, but it clutters your HTML and can't be reused. Avoid it.
Internal — a <style> block in the <head>. Fine for a single page or a quick demo.
External — a separate .css file linked with <link>. This is the professional choice: one stylesheet can style your whole site, and the browser caches it.

index.html

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

Key idea

Prefer external stylesheets. Keeping style separate from structure means you can restyle an entire site by editing one file, your HTML stays clean and semantic, and returning visitors get the cached CSS for free.

CSS syntax

A CSS rule has a selector (what to style) and a declaration block in braces. Each declaration is a property: value; pair. Here h1 and p are selectors; each sets a colour and one more property:

styles.css

/* selector { property: value; } */
h1 {
  color: navy;
  font-size: 32px;
}

p {
  color: #333333;
  line-height: 1.6;
}

index.html + styles.css

Live preview

The HTML above, styled by the CSS.

Note

Don't forget the semicolon after every declaration and the closing brace on every rule. A single missing ; or } can silently break the rules that follow. Comments use /* ... */ (there are no single-line // comments in CSS).

The cascade

The "C" in CSS is Cascading: when multiple rules target the same element, the browser resolves conflicts using a clear order — later rules override earlier ones, and more specific selectors beat more general ones (the full details come next module). For now, the key idea is that styles combine and cascade from many sources into the final look of each element.

Recap & quick check

Key takeaways

CSS is the presentation layer — it styles the structure HTML provides.
Add CSS inline, internally (<style>), or externally (<link>); external files are best.
A rule is a selector plus a { } block of property: value; declarations.
End every declaration with a semicolon; CSS comments are /* ... */.
'Cascading' means conflicting rules are resolved by order and specificity.

Quick check

1. What is CSS responsible for?

2. Which way of adding CSS is best for a whole website?

3. What are the two main parts of a CSS rule?

4. How do you write a comment in CSS?

5. What does 'cascading' refer to?

You can style pages now. Next we get precise about which elements you target with selectors, specificity, and the cascade.