Here are some useful tips for constructing a site using CSS:
Wherever possible, place your styles in external style sheets (see "Adding Styles to a Web Site" earlier in this chapter).
The power of CSS is that you can place your styles in one common location and change an entire Web site from one place (Figure 2.59). In the file structure example, notice that both sections use a file called section.css and not ones called s01.css and s02.css. This allows us to move HTML files between sections without needing to change the URLs used to link or import the documents.
Figure 2.59. A typical tiered file structure that allows different HTML pages to use a global CSS file and then tailors the styles for the particular section with a sectional CSS file.
At the top level of your Web site, define a default default.css style sheet that can be applied to your entire Web site.
Generally speaking, you'll want certain characteristics to be ubiquitous throughout your Web site. You may want all your level 1 headings to be a certain size and font, for example (Figure 2.60).
Figure 2.60. This diagram shows how the different HTML files will be linked to the associated CSS files. default.css is linked to all three files, while each section's individual section.css is linked to refine the page's layout.
Refine styles at sublevels with a section.css style sheet. By doing this, you can change each section or add to the global style sheet. For example, you've already set the size and font for your <h1> tags in the global style sheet, but each section's headers are color-coded. This is your chance to set the color for each section individually.
Use different .css files for distinctive uses.
Placing all your CSS in one file can lead to larger files and longer download times if you use a lot of CSS. Instead, consider splitting your CSS into several files and importing them as needed for each page.
Avoid using styles in tags unless you have a compelling reason.
Again, the great thing about CSS is that you can apply styles to multiple tags and change those styles throughout a Web site on a whim. If you define the style directly in the tag, you lose this ability.
