CSS in the Head Element

Abstracting Style: CSS stylesheets
One problem with the "in-line" approach to CSS is that there may be a particular "style" that you want to apply many times, e.g. to all td elements or to half of the li elements. One approach is to write the style once and then use cut/paste capabilities of a text editor to copy it into all of the places you want it to appear. The problem with this approach is that if you decide to change some aspect of the style, you have to make the same change at all of those places. For a large document, this could be hundreds of changes.

CSS offers a nice way to get around this problem. The first is to make some general style definitions and put them in the head element of the webpage. These definitions allow you to specify that all li elements should use a given style. It also allows you to "name" styles and to specify the style to be used in any particular tag using the "name" of the style. Any style that is particular to a given page can still be put in a tag using the "style" attribute and takes precedence over the style definitions in the head.

Specifying CSS in the `head` (WDG)

In this section we show how to give names to styles in the "head" element of a webpage. This allows you to define the style once and then use it many places.

There are three ways of naming a style. You can either assign the style to an entire html tag (e.g. p) in which case it is applied whenever that tag appears. Or you can can give it a class name that can be used with any tag. The NAME in this case should start with a period (.) as in .toocool. Finally, you can name the style with both an HTML tag and a class name, as in p.toocool. In case of conflicts, the most specific specification is used, e.g. p.toocool style will be used in a paragraph with the toocool attribute. Likewise, the bland style will be used in a bland paragraph. Finally, note that the style names can be any name you wish to create. The names must begin with a letter and contain only letters, digits, and dashes (-).

The style definitions can go into the head element of the html tag. The code below defines the warning and tropical classes and uses them in various tags. Notice how there is NO inline style for this page, all of the style is specified in the head element of the webpage.

HTML Live Demo --

<html>
 <head>
    <title>CSS margin/padding demo </title>
    <style type="text/css" media="screen">
      
    </style>
 </head>
 <body>
  <h1>CSS in the head demo</h1>
 <p>
   This is an example of putting CSS in the head. This is a paragraph.
fds jflkds jfklds jfkdls jflks jfdslfj dslj fsdl jfdskl 
fds jflkds jfklds jfkdls jflks jfdslfj dslj fsdl jfdskl 
fds jflkds jfklds jfkdls jflks jfdslfj dslj fsdl jfdskl 
</p>
<p> This is the second paragraph:
fds jflkds jfklds jfkdls jflks jfdslfj dslj fsdl jfdskl 
fds jflkds jfklds jfkdls jflks jfdslfj dslj fsdl jfdskl 
fds jflkds jfklds jfkdls jflks jfdslfj dslj fsdl jfdskl 
fds jflkds jfklds jfkdls jflks jfdslfj dslj fsdl jfdskl 
</p>
<p class="warning">
  This "warning" paragraph shows how to use the class attribute to specify the CSS for a tag
</p>
<div class="tropical">
  This shows another way to use the class attribute, where one class works
  with any tag. Here is a tropical div.
</div>
and <span class="tropical">this is a tropical span</span><br/>
<p>
Finally, this paragraph contains a table where the td's all have some style...
<table>
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
</table>
</p>

</body>
</html>

The style definitions have the form: NAME {STYLE-SPEC} NAME {STYLE-SPEC} NAME {STYLE-SPEC} where the STYLE-SPEC is a specification of the style as we have seen for inline CSS and, in the example above, NAME is either a TAG, a .CLASS name, or a TAG.CLASS name as above.

The "media" specification in the style tag allows you to specify different styles for different media. Current media include "screen" for usual webpage browsing, "print" for printing, and "aural" for screen readers.

Pseudo-classes and pseudo-elements (WDG)

One very useful feature of CSS is the ability to change the style of a hyperlink when a mouse passes over it (or clicks it, or presses but does not click, ...) This is done by specifying anchor pseudo elements in the CSS as below: a:link {background:white} a:visited {background:yellow} a:hover {background:red} a:active {background:blue} This can be used to heighten the user's awareness of links by making them stand out.

Some other useful pseudo-elements are the first-line and first-letter elements, which allow you to specify specify styles for the first line of first letter of an element, e.g.

p:first-line {font-weight:bold} p:first-letter {font-size:200%}

HTML Live Demo --

<html>
 <head>
    <title>CSS margin/padding demo </title>
    <style type="text/css" media="screen">
      
    </style>
 </head>
 <body>
  <h1>Pseudo-elements and contextual specifiers demo</h1>
Here are some links:
<ul>
<li><a href="http://www.whitehouse.org">don't click here, this is an unvisited link</a></li>
<li><a href="http://www.brandeis.edu">click here, then this will be a visited link</a></li>
<li><a href="http://www.cs.brandeis.edu">Hover over this and see what happens</a></li>
</ul>
<p>
This is a paragraph, Check out the first line and 
the first character of each line of a new paragraph.
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
</p>
<p>
This is a paragraph, Check out the first line and 
the first character of each line of a new paragraph.
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
jfkdls jf dskl fjdkls jfdskl jfdkls jfdsl fjdsklfj dsklf jdskl
</p>
 </body>
</html>

Contextual Specifiers WDG

Sometimes it is useful to be able to specify the CSS of all tags that lie within a particular element, for example, you might want to define the style for all td elements that appear within a table.schedule element. This would allow you to specify the style using only the table tag, rather than having to specify the style in each td. For example,

table.schedule td {background:yellow; padding:5px; margin:5px}

HTML Live Demo --

<html>
 <head>
    <title>CSS margin/padding demo </title>
    <style type="text/css" media="screen">
      <!--
       /* 
         comments in the CSS are written between 
         slash-* and *-slash as shown here
       */
       body {margin:0.5in}

/* all tds have padding and font shown here*/
       td {padding:0.5in; font:bold 60pt sans-serif}

table {background:blue}

/* table.a will have yellow tds */
       table.a td {background:yellow; font-family:cursive}

/* table.b will have lightgreen tds */
       table.b td {background:lightgreen; color:red}

/* all heading have fantasy font */
       h1,h2,h3,h4,h5,h6 {font-family:fantasy}
      -->
    </style>
 </head>
 <body>
  <h1>Grouping and Contextual contextual specifiers demo</h1>
  <h2>Here is an h2</h2>
  <h3>and an h3</h3>
  <h4>Below is a table.a</h4>
<table class="a" cellspacing="10">
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
</table>
  <h4>next is a table.b</h4>
<table class="b" cellspacing="10">
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
<tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td></tr>
</table>

</body>
</html>

External CSS stylesheets (WDG)

If you are developing a multipage website, you may want to use a particular set of CSS definitions in all of your webpages. You can of course cut-and-paste the definitions into the head of all of your pages, but the same problem arises when you want to make a change to the style -- you will have to change the style in all of the files (which could be hundreds of web pages). To solve this problem, HTML allows you to put the style definitions in a separate file (a .css file) and then to "import" those definitions into a webpage. When this is done, one can easily change the style for an entire site, just by changing one file. Any style that is specific to a given page can still be put in the head and it overrides any imported definitions.

You can also store the CSS in a separate file and link it to the current page using a "link" tag in the head: <html> <head><title>test</title> <link rel="stylesheet" href="demo.css" type="text/css" media="screen"> </head> <body> <h1 class="toocool">Cool page</h1> This is neat and <span class="toocool">this is too cool!</span> </body> </html> Here is an example using style1.css. You should change it to style2.css to see what happens.

Cascading Stylesheets by importing

In a large setting, an organization may want to have a uniform style that is used in the websites of all of its departments, but each department may want to have some department-specific style definitions. To handle this, CSS allows one to "import" the organizations style sheet into each department style sheet. This provides a "cascading" effect, where one style sheet depends on another, which may depend on another, etc. The definitions in a given CSS page take precedence over any conflicting definitions from an imported page. This is done with the @import directive in the style file or style definition, e.g.

Specifying CSS in the head (WDG)

Pseudo-classes and pseudo-elements (WDG)

Contextual Specifiers WDG

External CSS stylesheets (WDG)

Cascading Stylesheets by importing

Specifying CSS in the `head` (WDG)