Lesson

CSS Introduction

10 min reading

Free Course

CSS Introduction: Styling and Designing Web Pages

CSS (Cascading Style Sheets) controls the visual presentation, layout, typography, colors, and responsive behavior of HTML documents. While HTML structures headings, paragraphs, and links, CSS turns plain browser defaults into clean, branded interfaces across phones and desktops.

flowchart LR
    A["HTML (Document Structure)"] --> B["Browser Style Engine"]
    C["CSS (Colors, Spacing, Layout)"] --> B
    B --> D["Styled Responsive Page"]

Why CSS Separates Style from HTML

Before CSS existed, developers repeated color and font attributes on every individual HTML tag. Updating a brand color across fifty pages meant editing hundreds of lines by hand.

With CSS, one external .css file can control the layout, palette, and spacing for your entire website at once. Browsers cache that stylesheet after the first page load, making subsequent page navigations faster while keeping HTML semantic and readable.

Your First CSS Ruleset

A CSS ruleset picks which HTML elements to style and lists property: value; declarations inside curly braces:

body {
    background-color: #f8fafc;
    color: #0f172a;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

.welcome-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    padding: 20px;
    border-radius: 8px;
}

Every rule cascades downward based on selector specificity and source order, allowing broad base styles at the top and targeted overrides below.

Common Mistakes to Avoid

Mixing inline style attributes throughout HTML: Move repeated visual rules into classes inside an external stylesheet so maintenance stays simple.
Forgetting units on non-zero sizes: Writing padding: 20; fails silently; always specify px, rem, %, or em (only 0 needs no unit).
Overusing !important to fix conflicts: Reaching for !important creates specificity wars instead of cleaning up selector order.