Style Locations

Style can be defined in three places
  1. External css file
    • For a multiple page web site this is the recommended place for style declarations
    • To hook up the style sheet to an html file include the link tag inside the head tag of the html file. Example: 
      <head>
        <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
      </head>
    • The style sheet must end with *.css or some web servers will not include the file.
    • Sample css file contents:
      h1,h2,h3,h4,h5,h6
      {
       color:Maroon;
       background-color:Yellow;
      }

      div.codeexample
      {
       font-family:Courier, Monospace;
       border:dashed 1px;
       background-color:#DDDDDD;
       color:Black;
       padding:.3em;
       font-size:small;
      }

      /* Note: to create a comment in css file start with slash asterix and end with asterix slash - this line ignored */
      /* Note: it is not necessary to put style declarations on separate lines */
  2. Within the head tag of an html file (Document Level)
    • Good location for a single web page or to override global styles of an external style sheet in a multi-page site when wanting to give a single page unique style.
    • To put style in the head tag, the style rules must be placed in a nested style tag. Example:
      <head>
        <style>
        <!--
          h2 {background-color:black;color:white;}
          body {background-color:red;color:white;}
          /* you can put comments inside this area using the slash star, star slash syntax */
        </style>
        -->
      </head>  
    • Include the style rules inside comment syntax: <!-- and --> to close.  Modern browsers will ignore the comment but older browsers that don't know about the "style" tag will atleast know what a comment is and so they will not display the text within your style tags (the only thing they could do since they don't know what "style" means) 
  3. Inline (inside an html opening tag by use of the attribute style="") -not recommended
    • Not a recommended location (not separating content from style markup and creating tedium by having to style individual elements).
    • Possible use could be for overriding a global style or tweaking a singulary unique element within the whole site A style rule put in an inline style gives the rule the highest specificity (it will win unless another rule is marked as "!important"). Example:
      <p style="font-weight:bold;color:green;">here is the text of a paragraph that I individually want bold and green in color</p>
    • The curly braces are replaced by quotes since the style declarations are part of an element attribute where attribute syntax is attribute="value".