Chapters 7 through 11 use the example of a fictional site called voxLibris to show off various CSS techniques. I broke the code down and sometimes simplified it in those chapters.
This appendix includes the unexpurgated code—including all HTML and CSS—used to create the site. You can also download the code from:
The content for the page is in the file index.html, which includes all of the HTML needed to create the structure of the page, but none of the styles. As with all HTML pages, it is composed of metadata between the <head> tags (03–07) and content between the <body> tags (08–139).
Note
For details about index.css, see Chapter 8, “Layout.”
One other important note: I have included a break at the bottom of most rows and columns with the alignclear class, which stops floating:
<br class=“alignclear”/>
For example, this code is included at line 15. This is needed in CSS to make sure that a parent element stretches to the full height of its children.
All external CSS code for voxLibris is imported into main.css. which is in turn linked to by index.html. During prototyping, it is often easiest to keep your CSS in several distinct files, using @import to add them to the master style sheet. This makes finding code easier, and makes switching between possible design concepts faster. For example, if you have a few different chrome concepts, you can simply switch the chrome.css file.
Note
For details about main.css, see Chapter 8, “Layout.”
Once you go into final deployment, however, I recommend copying and pasting all the CSS code into this file. This will speed up your page download and avoid some problems that IE has with using @import.
Default styles for the site reset the browser defaults—giving us a level playing field for the different browsers—and set site specific general styles for the HTML.
Note
For details about default.css, see Chapter 8, “Layout.”
The layout styles establish the layout grid in the design, defining how rows, columns, and sections should be placed.
Note
For details about layout.css, see Chapter 8, “Layout.”
All link, menu, and button styles are set in navigation.css. Remember to set the styles for all of the different link states (:link, :visited, :active, and :hover).
Note
For details about navigation.css, see Chapter 10, “Navigation.”
The site’s visual appearance is set primarily by the chrome.css file.
Note
For details about chrome.css, see Chapter 11, “Chrome.”
