CSS - Introduction

Print this lesson

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 15–20 minutes

CSS (Cascading Style Sheets) describes how HTML elements are displayed. In this series you will learn CSS from fundamentals to advanced layouts and effects, with plenty of runnable, in-page examples. Our goal is that by the end, you can style any UI you imagine—cleanly, accessibly, and efficiently.

Learning Objectives

Understand what CSS is and how it cascades and resolves conflicts.
Link styles to HTML using inline, internal, and external stylesheets.
Preview the roadmap: selectors, box model, layout (Flexbox/Grid), responsive design, and animations.

Prerequisites

Basic HTML (covered separately).
No JavaScript is required for core CSS.

First Look

Here is a quick sample that switches theme via a class on the <body> element.

View HTML/CSS

<style>
  body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin: 0; }
  .card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; max-width: 420px; margin: 12px; }
  .card h3 { margin: 0 0 8px 0; font-size: 18px; }
  .dark .card { background: #0b1220; color: #e5e7eb; border-color: #1f2937; }
  .dark .btn { background: #1f2937; color: #e5e7eb; }
  .btn { display: inline-block; padding: 8px 12px; border-radius: 8px; background: #f1f5f9; color: #0f172a; text-decoration: none; }
</style>
<div class="card">
  <h3>Hello, CSS!</h3>
  <p>Styles are reusable—compose them to build your design system.</p>
  <a class="btn" href="#">Action</a>
</div>

Hello, CSS!

Styles are reusable—compose them to build your design system.

Action

Vocabulary

Rule: A selector plus declarations, e.g., p { color: blue; }
Property: The thing you’re styling, e.g., color, margin.
Value: The setting for the property, e.g., blue, 16px.
Cascade: How conflicts are resolved—by origin, importance, specificity, and source order.

Checks for Understanding

What are the three ways to apply CSS to HTML?
What factors determine which rule “wins” in the cascade?

Show answers

Inline styles, internal <style>, and external .css files via <link>.
Origin/importance, specificity, and source order.

Exercises

List the three ways to include CSS in an HTML page and note one pro/con for each.
Add a .dark class to <body> and style links differently in dark mode.