teaching machines

CS 318 Lab 5 – Hello, CSS

February 6, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

Let’s start by discussing how color is represented in many of our digital technologies. Color is decomposed into three primaries: red, green, and blue. These are different than the primaries we often use with paint, and mixing is little different too, because we’re mixing light rather than pigment.

We’ll create a little page and use the browser developer tools to tweak its background color. Let’s experiment with mixing together the following colors:

We can represent these red, green, and blue contributions in a more compact form called hexadecimal. The mathematical basis behind this form is not extremely important, but knowing how to convert between decimal and hexadecimal.

Next up we’ll 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:

element1 {
  property: value;
  property: value;
  property: value;

element2 {
  property: value;
  property: value;

For example, to place a background color behind our paragraphs, we’d say:

p {
  background-color: #6495ED;

We can tell the browser to pull in the style information with a single line 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:


Now, open GitHub Desktop and select your cs318 project. You should see a list of changes. Commit them and synchronize. 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. Fix your changes on the local machine, commit, and sync, until the validator reports no issues.


Leave a Reply

Your email address will not be published. Required fields are marked *