Introduction to CSS

On This Page

What CSS Is

What CSS Controls

Why Style Lives in a Separate Language

A Brief History of CSS

Key Takeaways

The same three lines of HTML can look like a plain document from the early web or like a finished page. The difference is not in the HTML at all. It is in a separate set of instructions that tells the browser how each element should look.

Here is a small page for a book club, with no styling:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Book Club</title>
</head>
<body>
  <h1>Monthly Book Club</h1>
  <p>Join us on the first Friday of every month to talk about one book.</p>
  <button>Reserve a seat</button>
</body>
</html>

Even without any instructions from you, the browser does not show raw text. It applies its own default styles. In Chrome, the heading text is 32px and bold, the paragraph text is 16px, both use the default serif font (Times New Roman on Windows), and the button is a small gray box with a 2px border. The page has a white background, and the content keeps an 8px gap from the left and right edges of the window.

What CSS Is

Now add a block of style rules to the <head> of the same page. The HTML inside <body> does not change.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Book Club</title>
  <style>
    body {
      font-family: Georgia, serif;
      background-color: linen;
      margin: 40px;
    }

    h1 {
      color: darkgreen;
    }

    p {
      color: dimgray;
      font-size: 18px;
    }

    button {
      background-color: darkgreen;
      color: white;
      border: none;
      padding: 10px 20px;
    }
  </style>
</head>
<body>
  <h1>Monthly Book Club</h1>
  <p>Join us on the first Friday of every month to talk about one book.</p>
  <button>Reserve a seat</button>
</body>
</html>

The browser now draws the page on a light linen background with a 40px gap around the edges. The heading turns dark green and uses Georgia, and the paragraph is gray and 18px. The button becomes a solid dark green box with white text, 130px wide and 35px tall, because the rule removed its border and added 10px of space above and below the text and 20px on each side.

The same HTML rendered with only the browser's default styles and then with four CSS rules added.

The instructions inside <style> are written in CSS, which stands for Cascading Style Sheets. A style sheet is a set of rules, and each rule says which elements it applies to and how they should look. The word "cascading" describes what the browser does when several rules try to set the same thing on the same element: it follows a fixed order of precedence to choose one winner. The lesson on connecting CSS to HTML shows a first example of that choice.

The unit px stands for pixels, the most common size unit in CSS; chapter 14 explains it and the other units. You do not need to understand each property yet. The next lesson takes one rule apart, and later chapters cover colors, spacing, text and layout one at a time.

What CSS Controls

HTML and CSS divide the work of a page. HTML describes what the content is: this is a heading, this is a paragraph, this is a button. CSS describes how that content looks and where it sits. The book club page above shows the first few things CSS controls: colors, fonts, text size, and the space inside and around elements.

CSS also controls layout, which means where boxes sit relative to each other: in a row, in a column, in a grid, or on top of one another. It can change a layout based on the width of the screen, so the same page shows three columns on a laptop and one column on a phone. It can also animate a change, for example by fading a button's color over a short time when the user points at it.

CSS does not change what the content is, and it does not add behavior. It cannot save a form, load data, or decide what happens when a user clicks a button; those jobs belong to HTML and JavaScript.

Why Style Lives in a Separate Language

Before CSS existed, authors styled pages with HTML attributes and tags, such as a <font> tag around every colored phrase. Every page repeated the same styling, and changing a color meant editing every tag on every page.

Keeping style in CSS solves both problems. One style sheet can be shared by every page of a site, so a change to one rule, such as the heading color, updates all pages at once. The HTML stays focused on content, which also makes it easier for screen readers and search engines to understand. Moreover, the same HTML can get a different look, for example a print style or a dark theme, without any change to the content.

A Brief History of CSS

Håkon Wium Lie proposed CSS in October 1994, while working with Tim Berners-Lee at CERN. Bert Bos joined the work soon after, and the World Wide Web Consortium (W3C), the group that publishes web standards, took it on.

CSS level 1 became a W3C Recommendation, the W3C's name for a finished standard, in December 1996. It covered fonts, colors, text alignment, margins, padding and borders.
CSS level 2 became a Recommendation in May 1998. It added positioning, z-index for stacking elements, and media types, such as separate styles for screen and print.
CSS 2.1 is a revision of level 2 that removed features browsers had not implemented and fixed errors in the text. Browsers followed its drafts for years, from about 2004, but it became a Recommendation only in June 2011.

Work on CSS3 began around 1998, and the first drafts appeared in June 1999. Instead of one large document, CSS3 was split into separate modules, such as Selectors, Backgrounds and Borders (which added rounded corners), Transitions, Flexible Box Layout (Flexbox) and Grid Layout. Each module has its own level number and moves forward at its own pace. Grid Layout, for example, reached all major browsers only in 2017.

Because of this split, there is no "CSS4" release. The CSS Working Group instead publishes a regular snapshot that lists which modules are stable. When people say "modern CSS", they mean the modules that current browsers support, and that is the CSS this course teaches.

Key Takeaways

The browser styles every page with its own defaults; CSS rules replace those defaults.
A CSS rule names the elements it applies to and the properties it changes on them.
HTML describes what the content is; CSS describes how it looks and where it sits.
One style sheet can style many pages, so a design change happens in one place.
CSS is developed as separate modules, so there is no single "CSS3" or "CSS4" version to learn, only features and their browser support.

Mark as Completed

Reading Progress

Vote for new content

On This Page

What CSS Is

What CSS Controls

Why Style Lives in a Separate Language

A Brief History of CSS

Key Takeaways