Document-Specific Styles in the <head>

Sometimes you have styles that you want to apply to only one page. In these cases it makes sense to write the styles in the <head> of that document, rather than write them in an external style sheet, to avoid bogging down the external style sheet with too much clutter that doesn't apply to the majority of the pages. To create styles in the document <head>, just type the styles in between the opening and closing <style> elements, like this:

<style type="text/css">
  <!--
      body {
      background-color: blue;
      color: white;
      }

   p  {
      margin: 2em;
      }
  -->
  </style>

Question: Can you link to an external style sheet and create page-specific styles in the document <head>?

Answer: Yes. In fact, this is a very common scenario. You usually define most of your styles in the external style sheet, then define page-specific styles in the document <head>. The style complete declaration would look like this:

<style type="text/css">
  <!--
    @import url(styles.css);
    
    body {
      background-color: blue;
      color: white;
      }

   p  {
      margin: 2em;
      }
  -->
  </style>

Question: What if your external style sheet already defines the style that you want to change? For example, what if your external style sheet sets a blue background color for all paragraphs, but on one of your pages you want to define a page-specific style so that all the paragraphs have a white background?

Answer: Your page-specific styles would override your external style sheet, as long as the page-specific styles are defined after the link to the external style sheet, as in the example shown above. The last definition of a style takes precedence over all other definitions.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.

CSS Tutorial: Standards-Based Web Design

Document-Specific Styles in the <head>