Information Technology Reference
In-Depth Information
Listing 3-4.
CSS for I Love Ham- Part 3
sectionli.fail {
background:#990000;
color:#fff;
}
sectionli.win {
background:#009900;
color:#fff;
}
sectionli.fail, section li.win {
border-bottom:1px solid #fff;
}
sectionblockquote {
margin:0;
padding:0;
}
sectionblockquote:before {
content: "\201c\ ";
font-size:26px;
float:left;
margin-right:5px;
padding-left:5px;
}
sectionblockquote:after {
content: "\201e\ ";
font-size:26px;
margin-left:5px;
padding-left:5px;
}
Now, these selectors are neat, as they allow you to add content either before or after the
element they are attached to. Here, I am attaching them to the
blockquote element,
which is an older HTML element used to semantically mark that content as a quote that
should stand out from the rest on thepage.
Now, if you look at the
content
property, you might be a little confused. In most cases,
people usually add something meaningful to this field like a “>” in place of bullets on an
unordered list, or an ellipsis after a blurb of content that links back to an article. Not a lot
of people are aware, however, that you can also include Hex code in this property to
display characters that are not commonly found on the keyboard, such as the quotation
marks I want to add at the beginning and end of my
blockquote
content!
Now that we have a good understanding of how everything is laid out, it is time to jump
in and figure out how all the gears, pulleys, and sprockets are put together and get this
application working! First, just as in our previous application, we start off declaring our
global variables here that will be used throughout the application. In JavaScript, it is very
The JavaScript
