On this page

CSS Introduction & History: What Is CSS and Why It Matters

Badar KhalilUpdated September 29, 2026 4 min read

CSS Introduction: What Is CSS?

CSS (Cascading Style Sheets) is the language used to describe the presentation of a web page. HTML defines the structure and meaning of content (headings, paragraphs, links, images), while CSS defines how that content looks: colors, fonts, spacing, layout, animation and responsive behavior. This CSS introduction gives you the foundation for everything else in this course.

The three core web technologies work together like this:

HTML - the skeleton (structure and content).
CSS - the skin and clothing (design and layout).
JavaScript - the muscles (behavior and interactivity).

What Does 'Cascading Style Sheets' Mean?

Cascading - when several rules target the same element, the browser uses a defined algorithm (the cascade) to decide which rule wins. It considers importance, origin, specificity and source order.
Style - the visual rules applied to elements.
Sheets - rules are usually stored in separate .css files that can be reused across many pages.

Why Learn CSS?

Separation of concerns - content stays in HTML, design stays in CSS.
Consistency - one stylesheet can style an entire website with thousands of pages.
Maintainability - change a brand color once and it updates everywhere.
Performance - cached CSS files load once and are reused.
Responsive design - one codebase adapts to phones, tablets and desktops.
Accessibility - good CSS supports readable text, sufficient contrast, focus styles and user preferences such as dark mode and reduced motion.

A Short History of CSS

Year	Milestone
1994	Håkon Wium Lie, working at CERN, proposes Cascading HTML Style Sheets. Bert Bos joins the effort soon after.
1996	CSS Level 1 (CSS1) becomes a W3C Recommendation: fonts, colors, margins, text and basic box properties.
1998	CSS2 adds absolute/relative/fixed positioning, z-index, media types and more selectors.
2000s	Browser inconsistencies (especially old Internet Explorer) make CSS hard; CSS 2.1 later fixes and clarifies the spec.
1999 onward	CSS3 is developed as independent modules (selectors, backgrounds, borders, transitions, animations, media queries).
2010s	Responsive design, Flexbox, CSS Grid and custom properties (CSS variables) reach browsers and transform layout.
2020s	Modern features arrive: cascade layers, container queries, the :has() selector, native CSS nesting, color-mix(), subgrid and view transitions.

Note: there is no 'CSS4' officially. CSS is now developed as a living set of modules, each with its own level, maintained by the W3C CSS Working Group.

CSS Flexbox and CSS Grid for modern layouts.
CSS variables (custom properties) for themes and design tokens.
Responsive design with media queries and container queries.
Dark mode using prefers-color-scheme.
CSS nesting and the :has() selector ('parent selector').
CSS animations and transitions for micro-interactions.
Utility frameworks such as Tailwind CSS, and component libraries like Bootstrap, which are all built on core CSS.

Your First CSS Example

Below, HTML provides a heading and a paragraph, and CSS styles them. Edit the values in the live editor and watch the result change instantly.

Three Ways to Add CSS (Preview)

External stylesheet - a separate .css file linked with the link element (recommended).
Internal stylesheet - a style element inside the HTML head.
Inline styles - the style attribute on a single element (use sparingly).

You will set these up step by step in the workspace lesson.

Common Beginner Mistakes

Thinking CSS is a programming language. It is a declarative styling language: you describe the result, not the steps.
Mixing content and design by overusing inline styles.
Not testing in more than one browser or screen size.

Key Takeaways

CSS controls the visual presentation of HTML.
The cascade decides which rule wins when rules conflict.
CSS evolved from simple text styling (1996) to a full layout and design system with Flexbox, Grid, variables and container queries.
Learning core CSS first makes frameworks like Tailwind and Bootstrap much easier.

Try it Yourself HTML

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>My First CSS</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f6f8;
      margin: 0;
      padding: 40px;
    }
    h1 {
      color: #2c3e50;
      border-bottom: 3px solid #3498db;
      padding-bottom: 8px;
    }
    p {
      color: #555;
      font-size: 18px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>This paragraph is styled with CSS. Try changing the colors and sizes.</p>
</body>
</html>

Output

Press Run to execute.

Try it Yourself HTML

<h1>Same HTML, no CSS</h1>
<p>Without CSS, the browser uses its default styles: black text, white background, serif font.</p>
<ul>
  <li>Plain</li>
  <li>Unstyled</li>
  <li>Default</li>
</ul>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  :root {
    --brand: #8e44ad;
    --radius: 12px;
  }
  .card {
    background: white;
    border: 2px solid var(--brand);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 320px;
    font-family: system-ui, sans-serif;
  }
  .card h2 {
    color: var(--brand);
    margin-top: 0;
  }
</style>
<div class='card'>
  <h2>Modern CSS</h2>
  <p>This card uses CSS variables (custom properties), a modern feature you will master later.</p>
</div>

Output

Press Run to execute.

Exercise: Style Your First HeadingHTML

Using the starter code, make the h1 text color tomato, set its font-size to 40px, and center it with text-align: center. Then make the paragraph text color gray.

Try it Yourself HTML

<style>
  h1 {
    /* TODO: add color, font-size and text-align */
  }
  p {
    /* TODO: add color */
  }
</style>
<h1>Welcome to CSS</h1>
<p>I am learning CSS step by step.</p>

Output

Press Run to execute.

Show expected output

A centered, 40px tomato-colored heading and a gray paragraph.

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Introduction: What Is CSS?

What Does 'Cascading Style Sheets' Mean?

Why Learn CSS?

A Short History of CSS

Trending CSS Topics You Will Meet in This Course

Your First CSS Example

Three Ways to Add CSS (Preview)

Common Beginner Mistakes

Key Takeaways