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.
- Open the practice site in VSCode: Open VSCode
- Open a tab so you can preview your site as you work: View Your Practice Site
- In the opening
section
tag for the introductory section ("Dedicated to the Craft..."), add anid
attribute with the value introduction. The code should look like this:<section id="introduction">
- As in the previous step, add an
id
attribute to each of the following three sections in the openingsection
tags. Respectively, the ids should be "speakers", "schedule", and "venue". - To the same three opening
section
tags as in the previous step, add aclass
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">
- To the four links in your page that are NOT inside the
nav
elements, add aclass
attribute to each openinga
tag with a value of highlight-link. - Add
span
elements around the following words:- "brightest" in the Introduction
- "fantastic" in the Speakers section
- "action-packed" in the Schedule section
- "primary" in the Venue section
For example, the first change should look like this:
<span>brightest</span>
- Add a
class
attribute to the openingspan
tags for "brightest", "fantastic", and "action-packed" with the value pizazz. - Add a
class
attribute to the openingspan
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.
- Create a new file in Visual Studio Code called style.css.
- Add a
link
element to thehead
section of your HTML file with the following attributes:href
with the value style.cssrel
with the value stylesheettype
with the value text/css
Remember that the
link
element is self-closing. - In the CSS file, select all
h3
elements, and set the text color to the value purple. - Set the text color of all
a
elements to a darker shade of blue using a hex color value. - Set the text color of all
span
elements with the class of pizazz to a shade of pink using a hex color value. - 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. - 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.
- 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.
- 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:- For
:visited
, set the color to light gray - For
:active
, set the color to yellow - For
:hover
, set the color to orange
- For
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: