Lab 3: Cascading Style Sheets

Today you will get practice specifying the style of HTML tags using Cascading Style Sheets (CSS).
In particular, we will use an existing external CSS in our document,and then we will modify it to better fit our needs.

We may also get some practice with document-level and in-line CSS as time permits.

The Cascading Style Sheets lecture notes give an overview of CSS.

The CSS reference page describes details of the syntax, and is a useful guide to the CSS language.

Get started

Create a Lab3 folder on your desktop. You will save every document related to this lab inside folder Lab3.

Save a copy of this document, in the folder Lab3, to use it as a starting point. Name this copy lab3.html. (In your browser, File --> Save As...) View lab3.html in a browser. Notice that lab3.html does not use any CSS at this point.

Task 1: Use an existing External Style Sheet

• Add a line to your lab3.html file, to make it point to the CS110 main style sheet: Open lab3.html in TextWrangler, and add the following line in the HEAD section of the document:

  <LINK TYPE="text/css" REL="stylesheet"
  HREF="http://cs.wellesley.edu/~cs110/cs110-main-style.css">

  
  
• Save your lab3.html, and view it in a browser. Does it look different now? Why? Have you seen this style of pages before?
• Can you identify a few HTML tags that seem to have been affected by the use of the CSS?
• Open the cs110 main style sheet in your browser. (A simplified version of the current cs110 main style sheet, actually.) Try to find the code that:
  • Specifies the style of the header tag for the CS110: Laboratory 3 header. What font family, size, and color was used for this header?
  • Specifies the style of the text for the body of the document. What font family, size, and color was used in the BODY of the document?
  • Specifies the style of the smaller headers, like How to use CSS and Why to use CSS. What font family, size, and color was used for these headers?

You just experienced one of the advantages of using an external style sheet: you can easily re-use existing CSS code (if, of course, it fits your purpose).

Here is how my lab3.html looks like at this point.

Task 2: Modify an External Style Sheet

• Open the cs110 main style sheet in your browser, again.
• Save this document in your Lab3 folder, on your Desktop, as my_style.css. (In your browser, File --> Save As...)
• Update the file lab3.html, so that it points to the new style sheet, my_style.css, instead of the cs110 main style sheet. To do so, modify the HREF attribute, in the LINK tag in the HEAD of the document, to look like this:

  <LINK TYPE="text/css" REL="stylesheet" HREF="my_style.css">

• Open the file my_style.css in TextWrangler, so you can edit it, as follows:
  Make sure you test each line of your code as you add it! Do not wait until all changes are made to start testing them!
• Update the comment on the top of the file, to reflect the original author and the modifier (that's you!) of the file.
• Make text in the Headers appear magenta (this is a color name which is recognized by browsers), instead of green (more on color names).
• Change the background color of the document to something you like. For example:
  

  BODY {background-color: green; }

• Change the color of the text on the document. For example:
  

  BODY {color: white; }

• Change the alignment of level 1 headers so that text between the <H1> and </H1> is centered in the line:
  

  H1 {text-align: center;}

• Change the appearance of the emphatic text so that it is now red:
  

  EM {color: red;}

• Change the appearance of the strong text so that is is now purple and 16-pt large:
  

  STRONG {color: purple; font-size: 16pt;}

• Define a class of images that float to the right of the text in the same paragraph:
  

  img.right {float: right; margin: 0px 10px 20px 30px;}

  
  Add the necessary html code to your lab3.html document to test this class of images.

Here is how my lab3.html looks at this point, and this is the document my_style.css.

Task 3: Document-level Style Sheets

If you want to specify the appearance of a certain page only, as opposed to a whole web site, you can use Document-level Style Sheets . For example, we may want to change the behavior of the <P> so that, in a certain page, text between the <P> and </P> shows with a margin around and on an orange background.

To do that, add this piece of CSS code in the HEAD part of your lab3.html document:

<STYLE TYPE="text/css">
 P {margin: 1cm 4cm 1cm 4cm; background-color: orange;}
</STYLE>

Save your document, and view it on a browser to see the results. Notice how this piece of document-level css code affects all the <P> tags in your lab3.html document.

div.ImgCaption {
   width: 300;
   padding: 15px;
   border: 1px solid black;
   text-align: center;
   font-size: small;
}

Here is how my lab3.html looks at this point.

Task 4: In-line Style Sheets

With in-line cascading sheets you can modify the appearance of a specific tag within a certain document. As an example, let's modify the <BLOCKQUOTE> so that text between the <BLOCKQUOTE> and </BLOCKQUOTE> appears with a certain-look border, and some padding around it. To do that, add the STYLE attribute to the tag, as shown below:

<BLOCKQUOTE STYLE="border: medium double black;
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 15px;
   padding-bottom: 15px;">

Often times you want to center an image on the page. You can do it using in-line style sheet code to surround the image with a centered paragraph:

<P STYLE="text-align: center">
  <IMG SRC="weasel.jpg" ALT="weasel image" >
</P>

Here is how my lab3.html looks at this point.

Keep in mind that using CSS this way (in-line), although convenient at times, can result in pages that are difficult to maintain and update.

Introduction | Syllabus | Assignments | Documentation | Project

Computer Science 110
Date Created: January 2006
Date Modified: February 2008