CSS class exercise adapted from Handcrafted CSS by Dan Cederholm

This exercise is adapted from Handcrafted CSS by Dan Cederholm, Chapter 1. This is a recommended book for the CSS course.

Job Specs

Let's build a small price list. We will use a list of Recommended Books for this class. Each row will have the name of the book and the price.
The whole row should be clickable. This is actually not possible without some duct tape and bailing twine programming because blocks/rows cannot be a link, at this time. Only text and images can take a link tag; so, we can't put the link tag around the <li>.
"block-level elements can't live inside link elements"
The name of the book and the price should be different colors. The book name should be left justified and the price should be right justified.
We will start with 3 books: CSS Zen Garden, Handcrafted CSS and CSS: The Definitive Guide

This is a list; so, we will need
<ul>
 <li>
 CSS Zen Garden $27.07
 </li>
 <li>
 Handcrafted CSS $34.64
 </li>
 <li>
 CSS: The Definitive Guide $28.27
 </li>
</ul>
Example
Skill covered in Basic Web Construction 1
Each list item is a link
<ul>
 <li>
 <a href="#">
 CSS Zen Garden $27.07
 </a>
 </li>
 <li>
 <a href="#">
 Handcrafted CSS $34.64
 </a>
 </li>
 <li>
 <a href="#">
 CSS: The Definitive Guide $28.27
 </a>
 </li>
</ul>
Example
Skill covered in Basic Web Construction 1
The price will be formatted differently from the name of the book; so, we need a tag around the price that will allow different formatting.
For this purpose we will use a tag, even though that generally produces italic text. Notice that the is inside the <a href="#"></a>
<ul>
 <li>
 <a href="#">
 CSS Zen Garden
 $27.07
 </a>
 </li>
 <li>
 <a href="#">
 Handcrafted CSS
 $34.64
 </a>
 </li>
 <li>
 <a href="#">
 CSS: The Definitive Guide
 $28.27
 </a>
 </li>
</ul>
Example -
The example in the text uses , instead of . It is worth reading the trick they used to make and italics tag not show as italics. This could be considered bad form and a "hack," but it is still interesting to see how it is done!
Skill introduced in Basic Web Construction 1
Identify the list with a class
<ul class="BookList">
 <li>
 <a href="#">
 CSS Zen Garden
 $27.07
 </a>
 </li>
 <li>
 <a href="#">
 Handcrafted CSS
 $34.64
 </a>
 </li>
 <li>
 <a href="#">
 CSS: The Definitive Guide
 $28.27
 </a>
 </li>
</ul>
Skill covered in Basic Web Construction 1
Note that we will not be creating a .BookList style, instead we will be using this class in combination with other tags for more specificity.
Put the whole list in a sized box
<div id="BookList">
Note there will only be one price list on the page, so this an appropriate place for an ID layer
New skill for CSS class - an ID as a layout element

Note: the styles in the examples are internal styles; so, you can view them easily in the page source.

Format the links
a
{
  font-weight: bold;
  text-decoration: none;
  color: #3792b3;
}
Example
Note that using this tag rewrite affects more than just this little box; so, another strategy may have to be considered.
Skill covered in Basic Web Construction 1
Turn the text element into a "block" element.
ul.BookList li a
{
 display:block;
 padding: 7px;
 border-bottom: 1px solid #f3f2e8;
}
Example
New skill for CSS class - block v. inline elements
Note <ul> is a block element, but <a> is not. So, we are forcing the issue by saying that
a) whenever and <a>
b) is inside an <li>
c) which is inside a <ul> of the BookList class
display it like a block.
Remove the bullet from the list
ul.BookList li
{
list-style-type:none;
}
Example
New skill for CSS class - rules for lists
Note with the list-style-type rule, there is no reason why a list has to have a bullet. The nice thing about using <li>, instead of just a list with or is that it is read as a list by screenreader software.
Format the price, inside the 
ul.BookList li span
{
color: #9c836e;
}
New skill for CSS class - rules for specific tag sequences
Example
Move the price to the right
ul.BookList li a
{
  position: relative;
  display: block;
  padding: 7px;
  border-bottom: 1px solid #f3f2e8;
}

ul.BookList li span
{
  position: absolute;
  top: 7px;
  right: 7px;
  color: #9c836e;
}
New skill for CSS class - rules for positioning
Example
Format the BookList ID style
#BookList
{
  width: 200px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #666666;
}
New skill for CSS class - rules for ID layers
Example

Next Exercise: Text spacing