Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 110

</ul>
</footer>
</body>
Reload index.html in your browser. The footer info is displayed logically (see Figure 7-4 ).
Figure 7-4. The unstyled footer markup added
The Styles
With the markup in place, you can start styling up the elements. Starting with the basics, add the font rules. Each
element will have its font size set in em s to make it more flexible when media queries come into play later. The trick is
to set the body font-size to a px value, use relative sizes for all other elements. If you need to bump the font size up or
down later, all you'll need to do is adjust the body setting and the whole design will adjust proportionally.
Using the design as a guide, set colors, sizes, and letter spacing for each of the elements in the header and footer.
Don't forget to reset the fonts to normal styles and weights when using a bold or italicized font; if you forget, the
browser will apply its own bold or italics to the already bold or italicized text, which looks bad in most cases. When
you've done this, the CSS will look like the following:
/**
* Styles for the Realtime Q&A app
*/
/*
fonts.com font-family rules.
Cooper Black
font-family:'Cooper Black W01';
News Gothic:
light: font-family:'NewsGothicNo.2W01-Light 710401';
light-italic: font-family:'NewsGothicNo.2W01-Light 710404';