teaching machines

CS 318: Lab 5 – Hello, CSS

February 12, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Today we begin integrating cascading style sheets (CSS) into our pages. When we use an editor like Microsoft Word or Adobe InDesign, we are often thinking about two things at once: the information we wish to communicate and its presentation. For several reasons, mixing these is a bad idea:

HTML and CSS tease apart these roles. We put our information in the HTML and our style in a separate file, say style.css. In the CSS file, we can pick colors, font sizes, margins, alignment, backgrounds, and so on for the various HTML elements. The styles follow this general syntax:

selector1 {
  property: value;
  property: value;
  property: value;

selector2 {
  property: value;
  property: value;

The selector identifies a set of HTML elements whose visual properties we set in the succeeding block. For example, to place a background color behind our paragraphs, we’d say:

p {
  background-color: red;

There are several ways to specify colors in CSS. Many common colors can be named directly. Others can be expressed as a combination of red, green, and blue intensities:

p {
  background-color: rgb(100, 170, 30);

You “digital natives” may have no problem with this way of mixing colors, but many find this mixing scheme unintuitive. It doesn’t behave like the paints and Playdoh you mixed as a child. When you combine these colors, they get brighter. Not darker, as in the case of mixing pigments which filter more and more light.

Let’s try mixing a few colors:

To connect our styles to our HTML, we tell the browser to pull in the style information with a link element in the head element:

<link type="text/css" rel="stylesheet" href="style.css">

Today we’ll examine just a few properties:

Here’s your TODO list for next time:



We have a few goals for today’s lab:

Your task is to create a travelog (a travel diary) for a real or factitious vacation adventure. The site will be organized around a series of journal entries.


Create a lab05 directory in your cs318 project. In file partners.html, provide your names in a format of your choosing.

Travelog Content

Compose the travelog content to meet the following content requirements:

The copy of the entries and table of contents may be random.

Travelog Style

Once the content is in place, let’s give it some style. Meet the following style requirements:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab05 in your browser.

Now, visit the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator.