Adding CSS with the style tag and the class attribute

Project 1 builds a small set of buttons, one property group per lesson. By lesson 11 you will have a finished, accessible button style that you can drop into any page. This first lesson sets up the file and gets one rule talking to the right elements.

The practice file

Create a file called buttons.html and paste this in. It is plain HTML with an empty <style> element in the head:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Button practice</title>
  <style>
  </style>
</head>
<body>
  <p class="btn-row">
    <a class="btn" href="#">Read the guide</a>
    <a class="btn btn-light" href="#">Parts list</a>
    <button class="btn" type="button">Copy code</button>
  </p>
</body>
</html>

Open it in a browser. You get two blue underlined links and a gray system button on one line. That is the browser's default stylesheet at work. Every browser ships one, and it decides how links, buttons, headings and paragraphs look before you write a single line of CSS. Everything in this project overrides parts of it.

The mix of elements is on purpose. Real sites style links (<a>, for going somewhere) and buttons (<button>, for doing something on the page) to look alike, and the two start from very different defaults. Watching them converge is half the fun of this project.

Where the style tag goes

The <style> element belongs inside <head>. The browser reads the head before it draws the body, so the rules are ready when the buttons appear. CSS written there applies to this one page. Project 2 moves styles into a separate file that many pages can share (external stylesheets), but a single file is easier while you learn.

You may also meet the style attribute on single elements, like <a style="color: red">. It works, but it mixes styling into the markup and has to be repeated on every element. We do not use it in this course.

The class attribute

A class is a label you choose. The class attribute can hold several labels separated by spaces, so class="btn btn-light" puts the second link in two groups at once: everything that should look like a button (btn) and the light variant (btn-light). Class names are case sensitive and cannot contain spaces. Short names that say what a thing is tend to age better than names that describe one color, because colors change.

The paragraph carries a class too, btn-row. Nothing uses it yet, and that is fine: a class does nothing until a rule targets it. Lesson 2 gives the row some margin, and lesson 5 colors btn-light.

Your first rule

Add this between the <style> tags:

.btn {
  outline: 2px dashed red;
}

Save and reload. All three elements get a red dashed line around them, and the paragraph does not. The dot in .btn means "elements whose class list contains btn". Without the dot, btn would look for a <btn> element, which does not exist, so nothing would happen.

Why a class and not the a selector? A rule for a would hit every link on the page, including links in body text that should stay plain, and it would miss the <button>. A class lets you decide exactly which elements join the group.

We used outline for the test because an outline is drawn without taking up space, so nothing on the page moves. It has done its job now. Delete the declaration and keep the empty rule, which lesson 2 starts filling:

.btn {
}

From lesson 2 on, each new group of declarations gets a comment such as /* Lesson 2: margin */. The browser ignores anything between /* and */, so comments cost nothing and make the final file easy to read.

Common questions

My rule does nothing. What should I check?

Look for the dot first. Then compare the spelling in the CSS with the HTML (.bnt will never match btn). Then look for a missing } or ;, since a missing closing brace can swallow every rule after it. Right-click a button and choose Inspect: the developer tools list every rule that reached the element, and a rule that is missing from that list never matched.

Can one element match two rules that disagree?

Yes. When two rules with equally specific selectors set the same property, the one written later in the stylesheet wins. Lesson 5 relies on that for the light button.

Is the style tag old-fashioned?

No. It is standard HTML and handy for one-page experiments, prototypes and demos like this one. Larger sites prefer external files because the browser can cache one stylesheet for every page.

Try it: paste the file into the online HTML editor, add the outline rule, then change .btn to .btn-light and watch the dashed line shrink to a single link.