The CSS You Need for JavaScript

After this lesson you can

• Read a CSS rule and name its selector, properties and values
• Write a CSS selector that picks elements by tag name, by class with a dot, by id with a hash, or inside another element
• Explain how adding or removing a class changes the way an element looks

Key takeaways

• A CSS rule is a selector, then curly braces holding declarations, each a property and a value: h1 { color: midnightblue; }.
• Selectors pick elements: li by tag name, .sold-out by class (a dot), #tour-list by id (a hash), and #tour-list li the elements inside another (a space).
• The dot and the hash belong to CSS selectors. In the HTML, the attribute holds the name alone, as in class="sold-out".
• JavaScript changes how an element looks by adding or removing a class. The CSS says what that class looks like, so the look stays in one place.

On The Midnight Owls' fan page, there's a Show more button under last night's setlist. Click it, and three more songs appear. JavaScript didn't write those songs onto the page: they were there all along, hidden by a line of CSS, and the click took away the one word that hid them. Menus that open, tabs that switch, a dark mode, a sold-out show that turns gray: most of what moves on a web page works this way. CSS says how things look, and JavaScript switches the looks on and off.

There's a second reason you need CSS. When JavaScript looks for something on a page, it describes what it wants in CSS's language, with a selector. You'll write selectors in almost every lesson from here on.

You won't write stylesheets in this course: every page comes with its CSS ready-made. You'll read them, and you'll write selectors all the time. If you'd like to style pages of your own one day, the CSS in Depth course teaches CSS from the start.

A rule: who, and how they look

Before a show, a band hands the lighting crew a note: Drummer: red light, dim. Singer: white spotlight. Each line says who, then how. CSS works the same way. Each instruction is a rule, and it starts by saying which elements it's for:

h1 {
  color: midnightblue;
  font-size: 48px;
}

• h1 is the selector: who the rule is for. Here, every <h1> on the page.
• The curly braces, { and }, hold what to do to them. Read them aloud as "open curly brace" and "close curly brace".
• Each line inside is a declaration: a property (what to change, color), a colon, a value (what to change it to, midnightblue), and a semicolon to end it. Read color: midnightblue; as "color, colon, midnightblue, semicolon".

This rule makes the band's name dark blue and 48 pixels tall. A rule can hold as many declarations as it needs, one per line.

Where the CSS lives

Most CSS sits in its own file, a stylesheet, and the page loads it with a <link> element in its <head>. You saw the line in the whole page of The HTML You Need for JavaScript:

<link rel="stylesheet" href="styles.css">

One stylesheet can style a whole website, so every page looks like it belongs to the same band.

A look can also be written straight onto one element, with the style attribute: <p style="color: gray;">. That's called an inline style. It holds declarations only, with no selector, because it's already on the element it's for. JavaScript can set inline styles too, and Common DOM Interactions shows how. Most of the time, though, the look belongs in the stylesheet, for a reason you'll see at the end of this lesson.

Four ways to pick elements

These four selectors cover almost everything in this course:

The # is called a hash (you'll also hear "pound sign"). In the descendant selector, the space between the two parts is what means "inside". CSS's own name for that space is the descendant combinator. Here are all four as rules from the fan page's stylesheet:

li {
  margin-bottom: 8px;
}

.sold-out {
  color: gray;
}

#tour-list {
  padding: 0;
}

#tour-list li {
  background-color: white;
}

Remember from the last lesson: the dot and the hash are only in the selector. The HTML says class="sold-out" and id="tour-list".

Reading longer selectors

Selectors can chain more steps together. Read them from right to left, and they turn into plain sentences:

nav a {
  color: gold;
}

#setlist .extra-song {
  font-style: italic;
}

li.sold-out {
  color: gray;
}

• nav a: "every link inside the nav". The menu's links turn gold, and other links on the page don't.
• #setlist .extra-song: "every element with the class extra-song inside the setlist".
• li.sold-out, with no space: "every <li> that has the class sold-out". No space means both things are true of the same element. With a space, li .sold-out would mean something different: an element with the class sold-out inside an <li>.

JavaScript uses exactly these selectors to find elements. For example, document.querySelectorAll("#tour-list li") finds every show in the tour list, and Locating DOM elements teaches it.

Try it. Open your midnight-owls page from the last lesson in the browser, right-click it and choose Inspect. In the Elements panel, press Ctrl+F (Cmd+F on macOS) and type a selector into the search box: #tour-list li, then .sold-out, then li.show. DevTools highlights each match and says how many it found, such as 1 of 2. Try .tour-list: it finds nothing, because tour-list is an id, not a class.

A class that changes the look

Here's the pattern JavaScript uses more than any other. The stylesheet describes a look for a class:

.hidden {
  display: none;
}

display: none means "don't show this at all". On the fan page, the last three songs of the setlist start with that class, next to their own:

<li class="extra-song hidden">Owl Eyes</li>

When someone clicks Show more, JavaScript takes the class hidden off each of those songs. Now the element is <li class="extra-song">, the .hidden rule doesn't match it any more, and the song appears. Click again, the class goes back on, and the song disappears. The line that does it is song.classList.toggle("hidden"), and you'll write lines like it yourself in Common DOM Interactions.

The sold-out shows work the same way: JavaScript adds the class sold-out to a show, and the .sold-out rule grays it out.

Why a class, and not an inline style set from JavaScript? Because the look stays in one place, the stylesheet. JavaScript only says what state an element is in, hidden, sold out, open, and if the band decides sold-out shows should be purple instead of gray, someone changes one line of CSS and never touches the JavaScript. The fan page also writes (sold out) in words, so a person who can't tell gray from black still knows.

Try it. Add this inside the <head> of your midnight-owls page, under the <title>, and save. A <style> element holds CSS inside the page itself, which is handy for a quick test:

<style>
  .sold-out { color: gray; }
  .hidden { display: none; }
</style>

The Denver show turns gray. Now, in the Elements panel, double-click the word show in the Boise line's class="show", change it to show hidden and press Enter: the Boise show disappears. Change it back, and it returns. That's exactly what JavaScript does, one class at a time.

Check yourself

2 questions to try on the lesson page.

So what

CSS describes every look a page can have, and JavaScript decides which one each element wears, by adding and removing classes. The selectors you read here are also how your code will find every element it works with.

Key terms

• CSS rule
• Selector
• Property
• Class selector
• ID selector
• Descendant combinator

Cheat sheets

• The CSS You Need for JavaScript

Related

• The HTML You Need for JavaScript
• Locating DOM elements
• Common DOM Interactions