A blog post from danboe.net

Applying style to markup

Posted Aug 17, 2004 at 12:36 AM

There are four primary approaches by which HTML can be styled using CSS. I’ll identify each of these approaches, discussing the advantages and disadvantages of each. Think of them as the four horseman of the Application of style to markup.

Approach 1: embedding styles with the style element

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <![CDATA[
  5. ...CSS declarations...
  6. ]]>
  7. </style>
  8. </head>
  9. <body>
  10. <div>
  11. ...document content...
  12. </div>
  13. </body>
  14. </html>
  15. Download this code: /code/applying_style_01.html

Advantages

This method allows you to write your CSS declarations right inside of the HTML document, which some consider convenient during the development stage. Personally, I think it’s fine to do in a prototyping stage, but I would never recommend releasing this way.

Disadvantages

Since this approach does not achieve a separation of content from presentation, all requests for content will get the presentation as well. This creates several limitations:

  • Most browsers that support any level of CSS will strive to apply these declarations to the document. This can be problemmatic if the styles are sophisticated and/or the browser requesting the page has partial or buggy support for the styles. By embedding the styles, you’re asking all browsers to take their best attempt, which can be unpredictable.
  • Since the declarations are embedded in the actual document, the styles cannot be cached separately, making it more expensive because they are downloaded along with every request.
  • The styles are embedded per document, making it more difficult and expensive to share the styles across many documents.

Approach 2: linking to styles with the link element

  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="site.css" />
  4. </head>
  5. <body>
  6. <div>
  7. ...document content...
  8. </div>
  9. </body>
  10. </html>
  11. Download this code: /code/applying_style_02.html

Advantages

  • Linking documents to style allows for easy changes to be made across many documents simply by updating the linked stylesheet.
  • The linked stylesheet can be downloaded once with the first request and cached by the browser so that requests for subsequent pages or repeat visits can use the cached copy, increasing the client performance.
  • There are several types of relationships that can be defined between the document and linked stylesheets, creating opportunities to provide features such as alternate styles.

Disadvantages

  • Linked styles share one disadvantage with embedded styles, in that they are likely to be parsed and applied to the document by browsers that may only partially support CSS or have buggy support at best. This can cause significant rendering problems based on the sophistication of the declarations being used and the browser applying the styles.

Approach 3: importing styles with the @import rule

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <![CDATA[
  5. @import "site.css";
  6. ]]>
  7. </style>
  8. </head>
  9. <body>
  10. <div>
  11. ...document content...
  12. </div>
  13. </body>
  14. </html>
  15. Download this code: /code/applying_style_03.html

This approach is really a mix of linked and embedded stylesheets, in that we use an embedded style element, but create only one CSS declaration inside of it, an @import rule to point to the file containing the actual CSS declarations.

Advantages

  • Like using the link / element, importing style into documents allows for easy changes to be made across many documents simply by updating the linked stylesheet.
  • Like using the link / element, the imported stylesheet can be downloaded once with the first request and cached by the browser so that requests for subsequent pages or repeat visits can use the cached copy, increasing the client performance.
  • Older browsers (Netscape 4 and earlier) do not support the @import rule, thus providing a helpful exit to prevent problems associated with older browsers applying whatever styles they see (and creating problems along the way). Since the older browsers don’t import the styles, they do not get applied.

This approach is a major aspect of good web development: authoring valid markup in a standard and semantically correct manner (thereby ensuring that all browsers can render the document fine according to the default styles baked into the browser), and reserving style and behavior for only those browsers that can understand and fully support them.

Disadvantages

  • None.

Approach 3A: Linked and imported Styles

  1. <html>
  2. <head>
  3. <link type="text/css" href="site.css" />
  4. </head>
  5. <body>
  6. <div>
  7. ...document content...
  8. </div>
  9. </body>
  10. </html>
  11. Download this code: /code/applying_style_04.html

So this really looks like approach 2, and in the case of the markup, it is. However, the trick here is in the contents of site.css:

  1. /* styles every browser understands */
  2.  
  3. body
  4. {
  5. background-color: #ff0000;
  6. color: #000000;
  7. font-family: tahoma, sans-serif;
  8. }
  9.  
  10. /* styles reserved for current browsers */
  11. @import url("colors.css");
  12. @import url("fonts.css");
  13. @import url("layout.css");
  14. Download this code: /code/applying_style_01.css

Please be aware that the order in which the stylesheets are defined is important, since rules in subsequent stylesheets will override rules in preceding stylesheets.
Consider this approach for a little while, and you should realize that it introduces several interesting possibilities:

  • It allows us to create separations within the stylesheet for declarations we believe to be safe for every browser and that apply globally across our documents.
  • It illustrates that we could break our styles into separate documents based on the types of rules they contain, making it easier to update and understand them.

Of course, this could also be differentiated in different ways, such as:

  • Separate files based on the sophistication of the rules defined (e.g. CSS1/CSS2);
  • Separate files based on the scope of the documents they affect (e.g. site/section/page);
  • Separate files based on regional scope (e.g. global/market/language).

Approach 4: Inline styles

  1. <div style="color: red; background-color: black;" >
  2. Black and red.
  3. </div>
  4. Download this code: /code/applying_style_05.html

Unlike the other approaches, inline styles are not defined at the document level, but are instead applied directly to each HTML element independently.

Advantages

  • Inline styles take precedence over styles that are defined in linked or embedded styles. In other words, all inline style rules will override any rules defined in the style or link elements.

Disadvantages

  • Once again, we are not achieving a separation of content and presentation, limiting our flexibility.
  • Even worse, by embedding the style information at the tag level, any updates to the styles must be made in the HTML itself, which is typically riskier than changing the styles independently.
  • This approach can significantly increase page weight and make the markup more difficult to work with and understand.

This post is closed to new comments.

About this page

This page contains a single post from Daniel Boerner's blog, of which Boot Camp + Windows Vista = no more Airport Extreme reboots is the latest post.

Are there more posts like this one?

Possibly. Within this blog, this post is categorized under webdev and it was posted on August 17, 2004. Those would be good places to start looking for related posts.

Next post (newer)

Previous post (older)