Lesson 1Beginner 3 min read

Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets. While HTML defines the structure of a web page, CSS controls how it looks — colors, fonts, spacing, layout, and even animations.

Without CSS, every website would look like a plain text document from the 1990s. CSS is what makes the web beautiful.

How to add CSS to your page

There are three ways:

1. Inline styles (directly on an element):

HTML

<p style="color: blue; font-size: 18px;">Hello!</p>

2. Internal stylesheet (in the <head>):

HTML

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

3. External stylesheet (separate .css file — the best practice):

HTML

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

CSS

/* styles.css */
p {
  color: blue;
  font-size: 18px;
}

Always prefer an external stylesheet for real projects. It keeps your HTML clean and your styles reusable.

Anatomy of a CSS rule

CSS

h1 {
  color: #2563eb;
  font-size: 2rem;
  margin-bottom: 1rem;
}

h1 is the selector — it targets which elements to style.
color, font-size, margin-bottom are properties.
#2563eb, 2rem, 1rem are values.
Everything inside `

 is the declaration block.
Your first stylesheet

Create a file called

styles.css`:

CSS

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  color: #1e293b;
}

a {
  color: #2563eb;
}

Link it to your HTML and refresh the browser. You'll see an immediate transformation — centered text, better spacing, and colored links.

The cascade and inheritance

Cascade means when several rules could apply, the browser picks a winner using specificity, importance (!important), and source order. Inheritance means some properties (like color and font-family) flow from parent to child unless overridden.

CSS

body {
  color: #334155;
  font-family: system-ui, sans-serif;
}

article a {
  color: #2563eb; /* overrides inherited body color for links inside articles */
}

Child elements don't inherit everything — margin, padding, and border do not inherit by default.

Units: px, rem, em, and %

px — absolute pixels; predictable but less flexible for accessibility.
rem — relative to the root font size (usually 16px); preferred for font sizes and spacing scales.
em — relative to the element's own font size; useful for components that scale with text.
% — relative to the parent (often used for widths).

CSS

html { font-size: 100%; } /* typically 16px */
h1 { font-size: 2rem; }   /* ~32px */
.card { padding: 1.5rem; }

Using rem for layout spacing helps users who increase browser default font size — your design scales with them.

DevTools: your best friend

Open Inspect on any element to see which CSS rules apply and which are crossed out (overridden). The Computed panel shows final values. When styles "don't work," DevTools usually shows whether the selector missed, specificity lost, or a typo broke the property name.

What you'll learn in this track

This CSS track covers selectors, the box model, Flexbox, Grid, responsive design, animations, custom properties, advanced techniques, and scalable architecture — from your first stylesheet to patterns used in production codebases.

Separating structure from presentation

Keeping HTML focused on meaning and CSS on appearance is a core discipline in web development. When you change a brand color, you should update one stylesheet instead of hunting through dozens of HTML files. External stylesheets also cache in the browser, so repeat visits load faster. As you write more CSS, you will notice patterns: typography on the body, spacing on sections, and component-specific rules grouped together. None of this requires frameworks — plain CSS scales surprisingly well when you name classes thoughtfully and avoid inline styles except for quick experiments. Validators and linters can catch missing closing braces early; DevTools shows live edits so you can prototype a rule, then paste the final version into your file.

Key takeaway

CSS is how you make web pages look good. Start with an external stylesheet, learn the selector + property + value pattern, and you'll be styling pages in no time.