teaching machines

CS 318: Lab 5 – Hello, CSS

February 12, 2018 by Chris Johnson. 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:

• We get hung up on the visual display and forget about the information.
• We sometimes want the same information displayed in several ways.
• One person often handles the information, while another handles the presentation.

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:

• blue
• yellow
• white
• orange
• magenta
• gray

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:

• background-color
• color
• width
• font-style

Here’s your TODO list for next time:

• Read chapter 4. On a quarter sheet, jot down 2-3 questions or observations from your reading. For one of your items, do a web search on the role of div and span, and restate their function in your own words.

Sincerely,

Lab

We have a few goals for today’s lab:

• Practice constructing a multi-page web site with images.
• Start applying style to our information using CSS.

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.

Partners

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 main content is a series of journal entries written during a four-day vacation. Each day’s entry is in its own .html file.
• Each entry has the same overall heading naming your adventure. For example: Four Days in Dulles or There and Back Again *sigh*.
• Each entry has a unique h2 listing the date of the entry.
• Each entry is organized into coherent sections using h3s.
• Each entry has two images interjecting the copy of the journal entries. Use images of the actual vacation destination. Find images that aren’t locked up in copyright issues. For example, search for your destination on Flickr, and then from the Any license dropdown on the results page, select All creative commons.
• Each of the earliest three entries end with a link to the next day’s entry.
• All images have captions. (We haven’t discussed these; explore the figure element on MDN.)
• The site has a table of contents page in index.html with copy introducing the vacation, a chronological list of links to the four entries, and copy summarizing the vacation.

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:

• All pages use a common style sheet named style.css.
• A color scheme is applied to the background of the body and the text of the h1, h2, h3, p elements. Use a triad or tetrad that fits the aesthetics of your destination. Check out Paletton or Adobe Color CC or some similar generator.
• Make the caption text appear in italics. Consult font-style on MDN.
• Lighten the text color of figcaption to a medium gray.
• Constrain the body to a fixed width of 800 pixels by settings its width property to 800px.
• Center each figure within body by setting its width property to 600px and its margin property to auto. We’ll discuss layout in more detail in subsequent labs.
• Constrain each img to a width of 600px. Make each image a link to its unscaled source image using an a tag.

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.