StarterAnimals

Selector Practice

Tags, classes and ids — three ways to point at a shape.

Goal: Give each square a different color using a tag, a class and an id.

Auto run

Your goals

0 of 3 done

Use the p tag selector to change the paragraph text colornot completed yet
Use the .box class selector to fill the class squarenot completed yet
Use the #star id selector to fill the id squarenot completed yet

index.htmlhtml

<h1>My color key</h1>
<p>Style me with a tag selector.</p>
<div class="box">I have a class.</div>
<div id="star">I have an id.</div>

style.csscss

body {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

h1 { font-size: 22px; }

p {
  color: black; /* try crimson */
}

.box {
  padding: 14px;
  border-radius: 12px;
  background-color: white; /* try gold */
}

#star {
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  background-color: white; /* try mediumseagreen */
}

preview

Up next

Night Sky

Next activity →