Lesson 1: Understanding ID and Class in CSS

Overview

So far you have added style to various elements in your portfolio page, but the styles you've added have affected all elements of a particular type. For example, when you added style to the div element that affected all div elements equally. What if you want to stylize some div elements one way, and other div elements a different way? That's where id and class come in. In this lesson you will learn how ID and Class attributes can be used to stylize individual elements (id) or groups of elements (class).

Learner Outcomes

At the completion of this exercise:

What is id?

In HTML, every element on your web page can be assigned a unique id attribute. This can be any text you like, but it has to be unique (only one item can have this label). It's a good practice to assign labels that describe the function of the element. For example, a <ul> that's used to markup a navigation menu might have id="navigation" or id="menu"

You assign an id attribute to an HTML element when:

  1. You want to stylize that element differently than other elements of the same type.
  2. You want to be able to link to a particular element within a web page. In fact, you already added id="main" to one of the div elements on your portfolio page when you created a "skip to main content" link in the lesson on Special Types of Links.
  3. You want to be able to directly access that element using Javascript. You'll learn more about that in the module on Javascript.

In this unit, we're just interested in the first reason to add an ID. We want to be able to stylize specific elements using CSS. For example, let's say you have a paragraph that serves as an alert on a page. You don't want it to look like all the other paragraphs on the page. You want it to stand out so people are sure to notice it. You could add id="alert" to that paragraph, like this: 

  <p id="alert">Important! All classes are cancelled today.</p>

To add style to an element with an id, you preface the id with a # symbol in your CSS. For example, here's how we could make our alert paragraph appear in a big yellow box with a black border and big black text: 

  p#alert {
    color: black;
    font-weight: bold;
    background: #FFFF66; /* yellow */
    border: 2px solid black;
    padding: 1em;
  }

Note that specifying the element type in CSS is optional when the element has an id. In the above example, we use "p#alert" as the selector, which tells the browser that the following style applies to the paragraph with id "alert". However, since there's no other element - paragraph or otherwise - that has that same id, we could just as easily have used "#alert" as our selector, without the "p", like this:

  #alert {
    color: black;
    font-weight: bold;
    background: #FFFF66; /* yellow */
    border: 2px solid black;
    padding: 1em;
  }

It's generally a good practice though to include the element because it helps you to remember which elements had certain id's. Sometimes you'll want to know that just by looking at the CSS file, without having to refer back to the original HTML file.

What is class?

Sometimes there might be a group of elements that you want to stylize in a certain way. For example, let's say you're creating an entertainment web page that includes several movie reviews, in addition to other content. The entire content of each review (a heading with the movie title, plus several paragraphs) is wrapped in a <div> in order to keep it all together in one box. The first paragraph of each review is a short summary describing the movie, then all remaining paragraphs contain the content of your critique of the movie. You may want to stylize the <div> elements that contain each review differently than other <div> elements on the page, so reviews all have a distinct look, but consistent with one another. You could accomplish this by assigning class="review" to each of these reviews. Also, you might want the summary paragraph to have a distinctive look, different from all other paragraphs. You could accomplish this by assigning class="summary" to each summary paragraph. Your code might look something like this: 

  <div class="review">
    <h2>The Godfather</h2>
    <p class="summary">The Godfather (1972) is the greatest movie of all time,
      according to numerous surveys of movie critics and audiences alike.</p>
    <p>The Godfather is... (your review here)</p>
  </div>
  <div class="review">
    <h2>Avatar</h2>
    <p class="summary">Avatar (2009) is the highest grossing film of all time,
      earning approximately $2.8 billion.</p>
    <p>Avatar is... (your review here)</p>
  </div>

To add style to all elements that are part of a particular class, you preface the class name with a period (.) in your CSS. For example, here's how we could add a pale blue background and dark blue border to all movie reviews, and add italics to all summary paragraphs:

  div.review {
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
  }
  p.summary {
  	font-style: italic;
  }

Descendant Selectors

In addition to assigning styles to a class of elements, you can also assign styles to descendants of those elements. A descendant is an element that is nested inside another element.

As an example, let's say you wanted all <a> elements (links) on a page to be red and underlined. Here's how you could accomplish that in CSS:

  a {
	  color: red;
	  text-decoration: underline;
  }

However, let's also say you wanted a different style for links that are part of your navigation menu. You want them to be white text on a dark blue background, with no underline. Assuming these links are contained within a <nav> element, you could stylize those using descendant selectors in CSS, like so:

  nav a {
	  color: white;
	  background-color: #003399; /* dark blue */
	  text-decoration: none;
  }

In the above example, the selector nav tells the browser to apply the style definition to every <a> element that's inside of a <nav> element. In other words, if there's a link inside the navigation menu, apply this style to it.

In the movie review example, let's say that most paragraphs on your entertainment page have padding set to 1em. However, you want to reduce that padding to 0.75em for all paragraphs that make up the movie reviews, to make the reviews look a little tighter. Since the movie reviews are each wrapped inside of a <div> element with class="review", you can easily stylize them all using descendant selectors, like this:

  div.review p {
	  padding: 0.75em;
  }

Activities

  1. Open your portfolio's index.html file with your text editor.
  2. Review the content of your page. It should contain one or more of the following elements:
    • <div>
    • <a>
    • <nav>
    • <ul>
    • <li>
    • <main>
    • <h1>
    • <h2>
    • <p>
  3. Notice how many <div> elements there are. Each of these currently has the same style. Which of these might you want to style differently? As you think about this, consider the function of each div:
    • The first div is a container for the skip to main content link.
    • The second div is a container for your contact information.
    • The third div is a container for information about your course and school.
    The second and third div are similar in function, but the first one is very distinct.
  4. The first div is unique. It's functionally different than all other divs and you will likely want it to be stylized differently. Therefore, is should have a unique id. Assign id="skipnav" to the first div. NOTE: This div appear in the other pages in your portfolio too, so you'll need to open each of the other HTML files and add this same id attribute there.

  5. Since the second and third divs are similar to one another, they could be assigned a class. Then, whatever style you apply to that class will apply to both of these divs. Since both contain info about something, add an attribute class="info" to each of these divs.
  6. Now look over the paragraphs inside the <main> element. There should be an overview paragraph at the top. Add id="overview" to this paragraph so it be can stylized differently than the other paragraphs.
  7. Currently, you have several paragraphs that contain placeholder content such as "This section will be completed soon." For each of these paragraphs, add class="temp". This will allow the placeholder content to be stylized differently than completed content. As you add content to these sections in the future, you'll need to remember to remove that class.

Handouts/Online Documents

All done?

After you added id and class elements to each of the divs on your portfolio home page, you now have the framework in place to add much more variety to the style on your page. Show your page to your instructor before continuing on to Lesson 2.