There are a number of ways to influence the appearance of webpages with color, text sizes, font faces, etc. One piece of advice to designers of websites, is that it is a good idea for all of the pages of a website to have the same basic appearance. This provides a context and clues to the user regarding where they are in terms of web navigation. If you wish to do a good bit of customizing the appearance of the pages of a website, you can imagine how tedious and error prone it would be to include all of these customizations on each page of the website. If you wanted to dictate other aspects of the pages' appearance, all of these would need to be written down as "rules" to be followed when editing or adding a webpage for the site. For example, suppose you never wanted to use an <h1> level heading because you feel that it is just too large or you wanted every <h1> level heading to be red. Whenever you, or someone else, worked on a webpage, the "rules" would need to be consulted to ensure a consistent appearance with the rest of the site. If the "rules" were changed, each webpage on the site would need to be updated to conform to the new version of the rules. This process would be tedious and errors would be likely.

CSS is a solution to this problem. Using a style sheet, the web designer can define the appearance aspects of many tags in one place. Then, each webpage only needs to link to the style sheet in order for the appearance specifications to be implemented on each page. If the style sheet is changed, the change will be seen the next time each page is displayed in a browser.

The "cascading" aspect of CSS is a consequence of the "styles" that can be dictated by the browser, the user and the designer. Styles defined by the author of a webpage take precedence over the style set by the user, which take precedence over the default style of the browser. We will look at styles that can be set by the author. However, users can specify their own style sheets, if they so desire. For example, a visually impaired person may want to specify a very large font size in their own style sheet to be used with a browser. The user can instruct the browser to ignore author style sheets. Additionally, when nesting tags for which styles have been defined, the inner tag will "inherit" the style of the outer tag unless the inner tag is more specific (has more details). In that case, the inner tag style will override the style of the outer tag. An example of nesting styled tags will be reviewed later in this section.

This section will first take a brief look at applying the style attribute to individual tags. Then, embedded style sheets will be discussed followed by how to link to an external style sheet. Please note that many of the examples used in this section were adapted from Deitel, Deitel & Nieto (2002).

11.1 Inline Styles

Before getting into CSS, we will look at how the appearance of individual tags can be altered with the style attribute. The style attribute for a tag uses CSS properties and values to change the appearance of an element. (For a complete list of CSS properties, see

<a href="first3.htm#cisdescriptions" style="color: #FF0000">CIS Course Descriptions</a>

The syntax for style attribute values is the CSS property, a colon, a space and then the value. More than one CSS property can be applied to a tag using a single style attribute by placing a semicolon between the property: value pairs. For example, the following line specifies both a color and a background-color for an <h1> heading tag.

<h1 style="color: #0000FF; background-color: #00FF00">Additional Information</h1>
  1. Open your "second.htm" file in Notepad and save it as "inlinestyles.htm". Edit the first anchor <a> tag the <h1> tag to include the style attribute as above.
  2. Save the file and view it in a browser. Note how the background color for the heading tag extends across the width of the browser window.

11.2 Embedded Styles

This section will look at how the style for a particular tag can be described once at the top of an XHTML document in order to affect every use of that tag within that document. This is accomplished by using the <style>…</style> tags inside the <head> section after the <title>…</title> of an XHTML document. For example:

<title> Style Tags in the HEAD section </title>
<style type = "text/css">
em { background-color: #0000FF;
color: #FFFFFF}
h1 { font-family: arial}
<h1>Additional Information</h1>

<em>Blah, blah, blah…</em><br />
And even more blah, blah, blah…
<h1><em>More Additional Information</em></h1>


In this XHTML page, the style tag follows the <title> of the page in the <head> section. The type attribute of the style tag indicates the MIME type. CSS documents use the text/css MIME type. Other MIME types define file types for images, scripts, etc.

Following the beginning <style> tag, is a list of tags for which styles will be defined. In this example, styles are defined for the <em> and <h1> tags. Note that the tags for which styles are specified do not include the angle brackets that are required when the tag is used in the body of the document. The style for each tag is enclosed in a set of curly braces, { }. The style for a tag is defined with property: value pairs. If more than one property is defined for a tag, semicolons are used to separate a property: value pair from the next. The <em> tag style demonstrates this. The <em> style specifies two properties: a color (text color) attribute as well as a background-color. The style for the <h1> tag specifies only one property, a font-family.

  1. Open a new file in Notepad called "embeddedstyles.htm" and copy the code above in this section to the file. Save it and view it. Notice that the second use of the <h1> tag has an <em> tag nested inside of it. The result of this nesting is that the style for the <em> tag is taking precedence over the default color of the <h1> tag and the heading appears in the arial font-family, in white with a blue background.

11.3 External Style Sheets

If each document of a website has the same style, users will associate that "look" with the site or organization itself. It becomes a "brand" look identifiable with the site. If the style is embedded in each document, every change to the style would require changing every single document individually. If instead of putting the style specifications in each document, each document is linked to one style sheet, any change to the style need only be done in the style sheet.

This section introduces a number of style properties, but there are many more that can be utilized.

11.3.1 An External Style Sheet Example

Each part of the following example of an external style sheet will be discussed below:

a { color: #800080;
text-decoration: none}
a:hover { text-decoration: underline;
background-color: #FFFACD}
body { background-image: url("images/cjmlogo.gif");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed}
p { text-indent: 2em}
div { font-size: 2em;
background-color: #E6E6FA;
padding: .5em;
margin: .5em}
li { list-style: url("images/blueball2.jpg") disc }
.medium { border-width: medium}
.blue { border-color: #0000CD}
.groovy { border-style: groove}
.framelike { border-style: inset}
.ltblue { border-color: #F0F8FF}

The first thing to note about the external style sheet is that it is NOT a XHTML document. It is a plain text file that was created in Notepad. The content of the style sheet file is similar to the content contained between the <style> tags of the embedded style document discussed in the section above.

The a specification: The style for the <a> tag will have the RGB color #800080. The text-decoration property is none. Other values for the text-decoration property are underline, overline, line-through and blink. The value none will result in no underlining for the links in the documents that use this style sheet.

The a:hover specification: :hover is a pseudoclass. Pseudoclasses respond to user actions. The :hover pseudoclass is activated when the user positions the mouse cursor over an XHTML element. The result of this style for the :hover pseudoclass for documents using this style sheet is that the link will have a different background color and will be underlined. Other pseudoclasses are :link for unvisited links, :visited for links that have been visited, and :active for links that have been clicked on but have not yet loaded. Styles can be specified for each of these.

The body specification: The properties used in the body style affect the background image. The first property, background-image, has the URL for the background image. The background-position property specifies that the image is to appear at the bottom right of the browser window. The background-attachment value is fixed, so that no matter how the browser window is re-sized, the image will always be at the bottom right corner of the window. The background-repeat property is set to no-repeat, so the image appears only once.

The p specification: The style for the p tag indicates a first line text-indent of 2em. The em notation is a relative length reference. The em is the "M-height" of the current font or the height of an uppercase letter "M" in the current font. 2em gives an indentation of the height of 2 times the M-height. Other relative references are ex, which is the "x-height" or height of an lowercase letter "x", and px, which is a pixel reference varying with the resolution of the screen.

The div specification: The <div> tag is similar to using beginning and closing <p> tags. The <div>…</div> tags define a block of text with margins above and below. The style defined for the div tag in the style sheet here defines a different background-color, and a font-size that is twice the "M-height" of the current font. The padding value provides space around the top, bottom and sides of the elements within the div tag. The margin value provides space around the outside of the div tags. More will be said about this later in this section.

The li specification: The <li> list item tags specifies an image to use instead of the usual bullet (list-style). Note that the URL of the image is placed in parentheses and quotes.

Classes: The last five items in the style sheet file are user-defined classes. These classes can be applied to tags as desired. Class names are preceded by a period. It is a good idea to name them something meaningful such as "medium" and "blue" above which indicate a medium border-width and a border-color of blue. However, just to prove that you can define the class name, "groovy" is a class indicating a border-style of groove and "framelike" is a class indicating a border-style of inset.

11.3.2 Linking an XHTML page to an External Style Sheet

Now that we have a style sheet defined, let's look at how we use it and look at the results of the properties, values and classes defined.

To use an external style sheet, we provide a link to it within the <head> section of the XHTML document after the <title> tag. The link is implemented with a <link> tag.

  1. Open a new file in Notepad and copy the style sheet specifications above into it. Save the file as "cjmstyle.css".
  2. Create a new XHTML document in Notepad. Put any title you like in the <head> section and leave the <body> blank for now. Save the file as "extstyle1.htm".
  3. Add the following <link> tag after the <title> tags in the <head> section of the file: <link rel = "stylesheet" type = "text/css" href = "cjmstyle.css" /> The rel attribute of the <link> tag indicates the relationship between the linked file and this one. The linked file is a style sheet to use with this XHTML file. The type attribute is the same as was used with the embedded style in the section above. It indicates that the file is a text file for a CSS. Finally, there is an href attribute which has the URL for the stylesheet file.
  4. Next, in the <body> section of the file, add the following: <div style = "float: left; text-align: left; width: 200px" class = "medium groovy blue">
    Sea Jam <br />
    Web Site <br />
    The beginning <div> tag contains both a style and a class definition. The float property for the style lets us place the contents of the <div> tags and let other text flow around them. Here, the div contents will be aligned to the left of the browser window. The text within the <div> tags will be aligned to the left according to the text-align property. Finally, the width of the div block is specified to be 200px. The effect of this will be seen when we view the page. We could have set the width to a percent of the browser window. If we had done that, the div block would change width as the user re-sizes the browser window.

    Some of the classes defined in the style sheet above are applied to this use of the <div> tag by using the class attribute. All of the classes that we wish to apply are listed within double quotes and separated by spaces. Here a blue groove border with a medium width will be applied to this use of the <div> tag. Remember that the styles and classes applied to this <div> tag are in addition to the style specified for the <div> tag in the external style sheet.
  5. Next, copy the following paragraph to your file after the <div> section above: <p>
    This is a page which uses a style sheet for a fictitious
    company called Sea Jam Web Site Consulting. Notice that
    this paragraph is indented. Notice that the background
    image is fixed and non-repeating in the top right corner.
    Notice that the items in the list below use an image
    instead of the usual button. Notice that this page
    is not necessarily well-designed. Notice that

    <a href = "extstyle2.htm"> this link</a>

    is not very noticeable until you put your cursor over it.
    Try moving your cursor over the list items below. The
    list items are links as well. That effect was done with
    the <em> hover</em> pseudoclass. That pseudoclass is
    activated when the user moves the mouse cursor over the link.
  6. Save the file and view it in a browser. It should look like this:

    Image of File Using CSS in a Browser

  7. The box in the top left corner has an appearance very similar to that of an image, but it was done using the <div> tags and a combination of style properties implemented in part with inline styles and in part by the external style sheet. The paragraph, which follows in the XHTML file, is to the right of the box due to the float: left property applied inline to the <div> tag. The float property allows one to position elements and change the default flow of the text.

    Try re-sizing the window. Notice that the box in the top left corner stays the same size when the window is re-sized. This is because the <div> tag was given a set width in pixels. If the width had been set using a percentage for the width, this box would change width with the window and the text inside would re-arrange itself accordingly.

    Notice also, that as the window is re-sized, the background image in the bottom right corner stays in place and the paragraph text flows over it when necessary. This is due to the fixed placement specified for the <body> tag in the external style sheet.

    Additionally, look at the link in the middle of the paragraph. It is not underlined, which is the default appearance for links, because the text-decoration property was set to none in the external style sheet.

    Move your cursor over the link. When the mouse cursor is over the link, the background of the link text should change to yellow and the link text should be underlined. This is due to the :hover pseudoclass available for the anchor, <a>, tag.
  8. Let's try out some of the other styles specified in the external style sheet. Add the following to the "extstyle1.htm" file after the paragraph entered earlier: <p>
    This paragraph is also indented because of the
    style set for the P tag. The box in the top
    left corner of this page looks like a graphic,
    but it is actually done by setting a style for
    the DIV tag. The width for the DIV tag has been
    set to a pixel value. The width could be set to
    be a percentage of the browser window, but then,
    if the browser window is re-sized, the size of the
    box changes also. Notice that there is a background
    image at the bottom right corner of the page. The
    image does not repeat, as a standard image will do.
    Try clicking the restore button on the top right of
    your browser window. Notice that the background
    image remains in the corner. Even if you scroll
    the page, the background image remains in the corner.
    This is because the background image attachment has
    a fixed position.
    <br />
    <h3 class="framelike ltblue medium"> Here is a list with images instead of the usual bullet discs </h3>

    <li> <a href="extstyle2.htm"> one link to the second page</a></li>
    <li> <a href="extstyle2.htm"> another link to the second page</a></li>
  9. Save your file and view it in a browser. The new code should appear as follows:

    Image of File Using CSS in a Browser

    Notice that the new paragraph is indented and flows after the previous paragraph. The classes defined for borders are applied to the <h3> tag to put an inset light blue border around the headings. Both of the items in the list are links. Moving your cursor over them changes the background of the linked text to yellow and the text is underlined.


  1. Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
  2. Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
  3. Lynch, P. J. & Horton, S. (2001) Web Style Guide. Yale University Press: New Haven. ISBN 0-300-08898-1.
  4. Yale Web Style Guide at
  5. W3C Cascading Style Sheets, Level 2
  6. W3C CSS Tutorial for HTML
  7. W3C CSS Properties
  8. W3C CSS Pseudoclasses
  9. CSS Properties, Browser Support, etc.

Introduction to Web Design by Cynthia J. Martincic :: Credits