• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 2. CSS Basics > Style-Sheet Strategies

Style-Sheet Strategies

Here are some useful tips for constructing a site with CSS:

  • Wherever possible, place your styles in external style sheets (see "Adding CSS 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.33).

    Figure 2.33. A typical tiered file structure that allows different HTML pages to use a global CSS file and then tailor the styles for the particular section with a sectional CSS file. Notice that both sections use a file called "section.css" and not ones called "section1.css" or "section2.css." This allows us to move HTML files between sections without needing to change the URLs used to link or import the documents.

  • At the top level of your Web site, define a default global.css style sheet that can be applied to your entire Web site.

    Generally speaking, you will want certain characteristics to be ubiquitous throughout your Web site. You may want all your level-1 headers to be a certain size and font, for example (Figure 2.34).

    Figure 2.34. This diagram shows how the different HTML files will be linked to the associated CSS files. "global.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, each section can change or add to the global style sheet. For example, you have 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 on an as-needed basis for each page.

  • Place styles in the <head> after the JavaScript.

    Although you can place the <style>…</style> pair anywhere in the head of your document, it's best to place it in one consistent location to make it easier to find. I usually place mine at the bottom, because—well, that's where I put it. Wherever you put your code, be consistent.

  • 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.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint