CSS Introduction

3 minute read

CSS (Cascading Style Sheets) is the language that makes the web beautiful. While HTML gives a page its structure and content, CSS controls how that content looks — colors, fonts, spacing, layout, animations, and responsiveness. Without CSS, every website would look like a plain text document from the 1990s.

CSS3 Tutorial

What Does CSS Stand For?

Word Meaning
Cascading Styles flow down and can be overridden by more specific rules
Style Visual presentation — colors, fonts, spacing, layout
Sheets Separate documents (files) that contain styling rules

CSS is a style sheet language — it’s not a programming language (no logic, no loops) and it’s not a markup language (no structure). It exists purely to describe presentation.

What Problems Does CSS Solve?

Before CSS existed, developers embedded styling directly in HTML using tags like <font>, <center>, and bgcolor attributes. This was a nightmare:

<!-- ❌ The old way (before CSS) — DON'T do this -->
<font face="Arial" size="4" color="blue">
  <center>
    <b>Welcome to My Website</b>
  </center>
</font>

/* ✅ The CSS way — clean separation */
h1 {
    font-family: Arial;
    font-size: 2rem;
    color: blue;
    text-align: center;
    font-weight: bold;
}

CSS introduced separation of concerns:

Concern Language File
Structure & Content HTML .html
Presentation & Style CSS .css
Behavior & Interactivity JavaScript .js

This separation means you can change the entire visual design of a website by modifying one CSS file — without touching any HTML.

A Brief History of CSS

Year Version Key Changes
1996 CSS1 Fonts, colors, text alignment, margins, borders
1998 CSS2 Positioning, z-index, media types, overflow
2011+ CSS3 Modules: Flexbox, Grid, animations, transitions, variables, gradients
Today CSS (Living Standard) Continuously updated — container queries, cascade layers, nesting

Note: CSS3 isn’t a single specification — it’s divided into independent modules (Selectors Level 4, Flexbox, Grid, etc.) that evolve at their own pace. When we say “CSS3,” we mean modern CSS.

How CSS Works with HTML

CSS rules target HTML elements and change how they render in the browser:

┌──────────────────────────────────────────┐
│  HTML Document                            │
│  ┌────────────────────────────────────┐  │
│  │  <h1>Hello World</h1>             │  │
│  │  <p>This is a paragraph.</p>      │  │
│  └────────────────────────────────────┘  │
│                    +                      │
│  CSS Rules                                │
│  ┌────────────────────────────────────┐  │
│  │  h1 { color: navy; }              │  │
│  │  p  { font-size: 18px; }         │  │
│  └────────────────────────────────────┘  │
│                    ↓                      │
│  ┌────────────────────────────────────┐  │
│  │  Rendered Page (styled)            │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

The browser:

  1. Parses the HTML to build the DOM (Document Object Model)
  2. Parses the CSS to build the CSSOM (CSS Object Model)
  3. Combines them into a render tree
  4. Paints pixels to the screen

Your First CSS Example

Here’s a complete HTML page with CSS applied:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Styled Page</title>
    <style>
        /* This CSS makes the page look good */
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }

        h1 {
            color: #2c3e50;        /* Dark blue heading */
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
        }

        p {
            color: #555;           /* Gray text */
            line-height: 1.6;     /* Comfortable reading */
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p>This page is styled with CSS. Notice the custom font, colors, spacing, and the blue line under the heading.</p>
</body>
</html>

Without the CSS, this page would show a plain black heading and paragraph on a white background with the browser’s default Times New Roman font. CSS transforms it into something visually appealing.

Why Learn CSS?

Reason Explanation
Required for web development You can’t build modern websites without it
Control over design Pixel-perfect layouts, responsive design, animations
Career essential Every front-end role requires strong CSS skills
No compilation needed Write it, save it, refresh — instant visual feedback
Powerful and evolving Flexbox, Grid, and CSS variables make complex layouts simple

Tip: CSS has a reputation for being “easy to learn, hard to master.” The syntax is simple, but understanding the cascade, specificity, and layout algorithms takes practice. This tutorial builds your understanding step by step.

What’s Next?

Now that you know what CSS is and why it matters, let’s dive into the syntax — how CSS rules are actually written.

Next: CSS Syntax →

Updated:

You may also enjoy