id and class


It's useful to select individual HTML tags individually or as a group to give them special styles.

It would be hard to use a different tag for each thing you want to select (especially if you just want to use div and span), so coders made up a way for you to give your HTML tags names.

There are two kinds of HTML tag names: class and id.


class

Give HTML elements a class, like this:

<div class="joke">
  What did one wall say to the other wall? "Whoa a talking wall."
</div>

and you can select it in CSS with a . like this:

.joke {
  background-color: green;
  border: 5px dashed yellow;
  color: white;
  margin-bottom: 10px;
}
What did one wall say to the other wall? "Whoa a talking wall."

The cool thing about classes is that you can apply them to any HTML element, so this will work too:

<h1 class="joke">Funny jokes</h1>
<div class="joke">
  What did one wall say to the other wall? "Whoa a talking wall."
</div>

Funny jokes

What did one wall say to the other wall? "Whoa a talking wall.

Spaces don't work in class names. If you try to do something like <span class="super awesome">lol</span> and super awesome{color: red} it won't work, because browsers will think you're trying to do something else.


id

id works just like class, but it should only be used to identify a single HTML element. It also uses the hashtag # instead of the . in the CSS selector, like this:

<h1 id="main-title">A Website About Corn</h1>
#main-title {
  font-weight: bold;
  color: yellow;
  background-color: black;
}

A Website About Corn

Just like in classes, spaces don't work in id names.


Resources


Challenge

Style the .apples and .bananas classes:

I like to eat eat eat 
<strong class="apples">apples</strong> and
<strong class="bananas">bananas</strong>.<br>
I like to eat eat eat 
<strong class="apples">apples</strong> and
<strong class="bananas">bananas</strong>.<br>
I like to ate ate ate 
<strong class="apples">ay-ples</strong> and
<strong class="bananas">bay-nay-nays</strong>.<br>
I like to ate ate ate 
<strong class="apples">ay-ples</strong> and
<strong class="bananas">bay-nay-nays</strong>.<br>
I like to eet eet eet
<strong class="apples">ee-ples</strong> and
<strong class="bananas" id="favorite">bee-nee-nees</strong>.<br>
I like to eet eet eet
<strong class="apples">ee-ples</strong> and
<strong class="bananas">bee-nee-nees</strong>.<br>
I like to ite ite ite
<strong class="apples">i-ples</strong> and
<strong class="bananas">by-by-nys</strong>.<br>
I like to ite ite ite
<strong class="apples">i-ples</strong> and
<strong class="bananas">by-by-nys</strong>.<br>
I like to ote ote ote
<strong class="apples">oh-ples</strong> and
<strong class="bananas">bo-no-nos</strong>.<br>
I like to ote ote ote
<strong class="apples">oh-ples</strong> and
<strong class="bananas">bo-no-nos</strong>.<br>
I like to ute ute ute
<strong class="apples">uupples</strong> and
<strong class="bananas">bununus</strong>.<br>
I like to ute ute ute
<strong class="apples">uupples</strong> and
<strong class="bananas">bununus</strong>.

"bee-nee-nees" was always my favorite line, so I gave it an id of favorite. Make sure it stands out.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.