In-class Practice

Getting Started with CSS

Part 1

Our conference page has some good content and structure, but the design is fairly boring. Let's add id and class attributes to set up the ability to style with CSS.

  1. Open the practice site in VSCode: Open VSCode
  2. Open a tab so you can preview your site as you work: View Your Practice Site
  3. In the opening section tag for the introductory section ("Dedicated to the Craft..."), add an id attribute with the value introduction. The code should look like this:

    <section id="introduction">
  4. As in the previous step, add an id attribute to each of the following three sections in the opening section tags. Respectively, the ids should be "speakers", "schedule", and "venue".
  5. To the same three opening section tags as in the previous step, add a class attribute with the value conference-info. For example, the code for the first of the three sections should look like:

    <section id="speakers" class="conference-info">
  6. To the four links in your page that are NOT inside the nav elements, add a class attribute to each opening a tag with a value of highlight-link.
  7. Add span elements around the following words:
    1. "brightest" in the Introduction
    2. "fantastic" in the Speakers section
    3. "action-packed" in the Schedule section
    4. "primary" in the Venue section

    For example, the first change should look like this:

    <span>brightest</span>
  8. Add a class attribute to the opening span tags for "brightest", "fantastic", and "action-packed" with the value pizazz.
  9. Add a class attribute to the opening span tag for "primary" with the value attention.

If you entered everything correctly, your HTML file should look like this:

Part 2

Now that elements in the HTML file have ids and classes, it will be easier to select them from the CSS file.

  1. Create a new file in Visual Studio Code called style.css.
  2. Add a link element to the head section of your HTML file with the following attributes:
    1. href with the value style.css
    2. rel with the value stylesheet
    3. type with the value text/css

    Remember that the link element is self-closing.

  3. In the CSS file, select all h3 elements, and set the text color to the value purple.
  4. Set the text color of all a elements to a darker shade of blue using a hex color value.
  5. Set the text color of all span elements with the class of pizazz to a shade of pink using a hex color value.
  6. Set the text color of all elements — regardless of the element name — with the class of attention to a shade of red using an rgb() value.
  7. Set the text color the element with the id of speakers and the id of venue to a shade of dark gray using an rgb() value.
  8. Set the text color of all elements with the class of conference-info to a shade of green using either a hex or an rgb() value.

    In the last few steps, you selected the same elements using a variety of methods, setting different colors each time. Take note of which selectors won the battles and think about why.

  9. Create a CSS selector for all a elements with the class of highlight-link for each of the following cases (using a different method of defining the color — word, hex, rgb — for each) in this order:
    1. For :visited, set the color to light gray
    2. For :active, set the color to yellow
    3. For :hover, set the color to orange

There were a few elements on which you added an id but didn't select by id in CSS. This is perfectly fine! We're going to use these in later practices, but when building your HTML structure, it doesn't hurt to think ahead to how things might be styled later on.

This is how your live page should look:

Final CSS

Below is approximately how your final CSS should look: