Lesson 1Beginner 1 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.

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.