It is a matter of Style: Cascading Style Sheets - CSS

We will use an external Cascading Style Sheet (.css) to affect the style of a small web site. In the process we will learn how to link a web page to such a sheet, how to read such a document and how to modify it.

Get started

• Open Fetch, and navigate, on the cs server, to:
  /home/cs114/public_html/labs/lab06
  Download the folder lab06_start into your Desktop.
• In your browser, open the file protocols.html
• Navigate around the site so you become familiar with its structure. Look at the source code of the non-styled pages. Do you see anything non-familiar?
• Our goal in this lab will be to style the html pages you downloaded to fit, in style, these pages.

The link element

We want the page http.html to look like the smtp.html page.

• Open the lab06_start/documents/smtp.html page in your browser, and see how it looks.
• Open the same page in Textwrangler, and study its html code. Locate the link tag, and examine it.
• Link your http.html document to the same external style sheet.
• View your http.html in your browser. Does it look different now?
• What else do you need to change in http.html to make it look like the model (smtp.html)?

The link tag (inserted into the head of an html document), points to a css document which is responsible for the appearance of the web page. In our case, the css styling document is named protocols_style.css and is located in the same folder as the html documents. Of course, this one styling document, can be used (pointed to, or linked to) to control the style of many different web pages. This is very important, as you can understand, and demonstrates a basic principle in Computer Science, called Code Modularity.

Edit a css document

1. Open the protocols_style.css file in your text editor. Examine the css code there.

   The first four sets of rules are responsible for setting the appearance of the body, all the headers of level 1 and 2 and all the images.

2. • Add some color and background-color to the level 2 headers.
   • Change the size of the level 1 headers.
   • Try to arrange the image to float to the right of its surrounding text.

     If you want to see what else you can do to affect the appearance of those elements (and many more), check the w3schools documentation on css.

3. The next set of rules

    img.maroonBorder {
      padding: 10px;
      margin-right: 20px;
      border-style:solid;
      border-color: #993300;
      border-width:6px;
   }
   

   defines a class of images, named maroonBorder, with certain characteristics: border color, width, space around it, etc.

   This technique of defining classes of elements is useful when we want to apply certain styling to some -but not all- the elements in a group. For example, we may want to style one or two images in a document, and not all of them. To make this work, you need to:

   1. define the class (like img.maroonBorder{ ... }) in the .css styling document, and
   2. denote the element in the html document to belong to the specific class
      (like img class="maroonBorder" ....)
4. Define an other class of images. Make the image on the page you are working on belong to that new class. Switch your image from one class to the other. Is it difficult to do so?
5. Try to take care of the style of the right part in the http.html page.You will need to add some code in the protocols_style.css as well as in the http.html itself.

Layout using css

In this part, we will try to arrange for the 2-column layout you see in the smtp.html page. Can you reverse-engineer the workings of this part? Hint 1: the tag div defines a division or part in an html document.
Hint 2: What does the float rule do? You have seen this before!

Fixing the file structure

If you want to check your work, here are some of my relvant files:

• protocols_style.css
• protocols.html
• http.html
• smtp.html