HTML & CSS Practice 4/12

Classes: styling one box, not all of them

A tag selector is a blunt instrument. div { border: 1px solid #ccc; } means every div on the page, which is exactly what you want for the shared look - all four steps below get the same box for free, and a fifth step would too.

It stops working the moment one of them needs to look different. There is no tag for "the one that failed". All four are divs (a div is a plain box, no meaning attached), and the browser cannot guess which one you mean.

So you name it. class="failed" inside an opening tag hangs a label on that element. The label has no look of its own; it changes nothing until some CSS asks for it. In CSS you ask with a leading dot: .failed means "the elements carrying that label". The dot is the whole difference. Written without it, failed { } goes looking for a <failed> tag, finds none, and does nothing at all - no error, no warning, no pink.

A class name is reusable on purpose. Put class="failed" on three of these divs and all three light up. That is the point of a class, and it is the line between a class and an id, which names exactly one element on the page. Reach for a class first; nearly every rule you ever write will be one.

Your task: the Test step failed. Put class="failed" on that div, then add a rule to the <style> block giving .failed a pink background. The other three steps must look exactly as they do now.

You'll practice:

Labelling a subset of elements with the class attribute
Selecting that label in CSS with a leading dot

<style>
  div {
    border: 1px solid #ccc;
    padding: 8px;
    margin-bottom: 4px;
  }
</style>

<h1>Build #418</h1>

<div>Install</div>
<div>Test</div>
<div>Build</div>
<div>Deploy</div>