Terminology and Concepts to look out for

Cascading Style Sheets · stylesheet · rule · adjective · CSS

Relevance to Me

Yesterday you named the parts and placed them. Today those same parts get their color, their shape, their size. Nothing on the page moves; everything about how the page looks changes.

Board Question

Chromebooks open. Breakout runs on the workstation; today's classwork form is on your Chromebook. The exit ticket pops up in the last twenty minutes and opens in its own tab.

HTML — the parts of the page and where they sit. Nouns and prepositional phrases. Nothing about how the parts look, nothing about what they do.

Just the words Click me. No box, no background, no border, no color — and yet those two words are a real, working button. Click them and the button activates. HTML declares what a thing is (a clickable action), not how it looks. The gray box with the darkening hover you may have seen elsewhere is the browser’s own stylesheet filling in visual defaults so buttons don’t render as invisible text.

<button>Click me</button>

CSS — how those parts look. Adjectives layered on the HTML nouns. Color, size, spacing, edges, hover states.

The same button. Now it is colored, rounded, has a shadow, brightens when you hover, and drops down a couple of pixels when you press it — all still CSS. Every one of those is an adjective on the button. Click it — you see the press animation, and then nothing else happens. CSS makes the page beautiful, and beautiful is not the same as working.

<style>
  button {
    background: #b3541f;
    color: #fff;
    border: none;
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 8px;
    box-shadow: 0 3px 0 #7a3a15;
    cursor: pointer;
  }
  button:hover  { background: #c85f24; }
  button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #7a3a15;
  }
</style>

<button>Click me</button>

JavaScript — what the parts do. Verbs and adverbs. The behavior added on top of the noun and its adjectives.

The same button, the same styling. Now click it. Something happens. That something is JavaScript, listening for the click and running code in response. Three languages, three jobs, one working page.

<style>
  button { /* same styles as before */ }
</style>

<button id="b">Click me</button>
<p id="msg"></p>

<script>
  var count = 0;
  document.getElementById("b").addEventListener("click", function() {
    count++;
    document.getElementById("msg").textContent =
      "Clicked " + count + " time" + (count === 1 ? "" : "s") + ".";
  });
</script>

Here is a wrinkle worth knowing. We teach these three languages in the order HTML → CSS → JS because that is how the layers stack. But that is not the order they actually arrived on the web.

The real order was HTML → JavaScript → CSS. For a couple of years in the mid-1990s, this is roughly what an interactive web page looked like:

HTML shipped in 1991. JavaScript shipped in December 1995 (Brendan Eich, ten days at Netscape). CSS was not published as a spec until December 1996, and browsers did not render CSS reliably until closer to 2000. So for a couple of years, the web had interactivity before it had consistent style. Buttons looked like the browser’s built-in gray beveled default (the user-agent stylesheet from slide 1) — but they could react to clicks. The web went from just-HTML to HTML-plus-JavaScript first, and CSS layered on top only afterward.

<button id="b">Click me</button>
<p id="msg"></p>

<script>
  var count = 0;
  document.getElementById("b").addEventListener("click", function() {
    count++;
    document.getElementById("msg").textContent =
      "Clicked " + count + " time" + (count === 1 ? "" : "s") + ".";
  });
</script>

Today's language is CSS, and its job is one thing only: describing how the parts already on the page should look. It does not add parts. It does not make things happen. It layers adjectives onto the nouns HTML gave you yesterday.

What the letters stand for.

Cascading Style Sheets.

• Style — the rules describe how something should look. Color, size, spacing, edges, hover behavior, animation over time. Adjectives, in your grammar from Tuesday.
• Sheets — the rules live in their own file, a stylesheet, separate from the HTML. One stylesheet can style many pages the same way.
• Cascading — the rules cascade down through nested parts. A color set on a container reaches every part inside it, until a more specific rule overrides. Adjectives inherit the way English adjectives do — a "red box" means everything inside is inside a red box, whether the things inside are red themselves or not.

Where it came from.

CSS was proposed by a Norwegian scientist named Håkon Wium Lie in October 1994, and the first version (CSS1) was published as a web standard in December 1996. Before CSS existed, if you wanted red text or a blue background, you had to write those decisions INSIDE the HTML, on every element. <font color="red"> was a real HTML tag. <center> was a real HTML tag. Every page had color and font choices scattered through the markup, which made changing anything consistently across a site nearly impossible.

CSS solved that. Move all the "how it looks" decisions out of the HTML and into their own file. One rule (p { color: red; }) covers every paragraph on every page that uses the stylesheet. Change one line, the whole site changes.

Your teacher was in high school when this happened. He remembers the first CSS-heavy sites showing up in the late 1990s — a magazine called Wired built one of the earliest showcase CSS designs, and for a while everyone was trying to copy it. Before CSS, most web pages looked kind of the same. After CSS, a page could look like anything the person writing the stylesheet wanted.

A historical wrinkle.

We teach these three languages in the order HTML → CSS → JavaScript because the layers stack that way — nouns first, adjectives on the nouns, verbs on the nouns. But that is not the order they actually arrived on the web.

HTML came first, in 1991. That much fits.

JavaScript came second, not third. Brendan Eich built it in ten days at Netscape and shipped it in December 1995 — before CSS was standardized, before browsers could style pages consistently. For a few years in the mid-1990s, you could add interactivity to a page (a clock ticking, an image swapping when you hovered, a form checking whether you filled it in) before you could reliably set a paragraph's font size.

CSS came third. Proposed 1994, first spec December 1996, and even then browsers took another few years to render CSS the same way as each other. Real CSS-styled pages didn't feel common until closer to 2000.

Grammar order for teaching. History was messier — the web got its behavior layer before it got its style layer. Tomorrow you meet the language that showed up in the middle of that sequence.

What CSS added.

Before CSS: web pages looked like documents. Times New Roman, left-aligned, blue underlined links, white background. Every page kind of the same.

After CSS: web pages could look like anything. Magazines. Newspapers. Video games. Art projects. Different colors, different fonts, different layouts, different behaviors on hover, animated backgrounds, custom shapes. The web went from ugly-but-working to ugly-when-you-want-and-beautiful-when-you-want.

Every one of those adjectives — colored, rounded, tall, dark, glowing, bold, thin, wide — is CSS. Every one of them is an adjective. That is the whole shape of the language.

A wrinkle worth naming.

Some adjectives are about how a part looks right now. Green. Round. Wide. Others are about how a part looks when something is true about it — hovered, pressed, focused, first in a list, last in a list. Those are still adjectives. They just apply in specific states. A rule like "the button gets brighter when hovered" is not an event handler; it is an adjective for the hovered state. No JavaScript needed.

Even movement can be CSS, if the motion is on a loop and does not respond to anything. A paddle that slides back and forth on its own is a temporal adjective — CSS animation, describing how the paddle looks over time. What CSS cannot do is react to a specific keypress or a specific event. That is Friday.

Breakout, through HTML + CSS vision.

Look at Breakout. Yesterday you named the parts and placed them. Today, look at how each part looks.

• The paddle is a specific color, a specific width, a specific position along the bottom.
• The bricks are stacked in rows, and each row is a different color.
• The score font is different from the button font.
• The Play Again button has a rounded edge and a border.
• The background is a specific shade behind the whole game.

All of that is CSS. None of it is HTML. If you stripped every CSS rule off the Breakout page, all the parts would still be there — same nouns, same places — just in Times New Roman, black text on white, browser default.

Today's job.

Five observations. Each one names a part (noun, HTML), places it (prepositional phrase, HTML), and adds one adjective describing how it looks (CSS). "A green paddle. Below the bricks." Three ideas per sentence: what it is, where it sits, one word about how it looks.

If a sentence you write has a verb of motion — slides, bounces, moves — cross it out. That is tomorrow. If your sentence has more than one adjective, keep the one that matters most. One adjective is the assignment; more than one is the exercise pulling you off task.