teaching machines

CS 318 Lab 5 – Hello, CSS

February 6, 2017 by Chris Johnson. 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:

• green
• blue
• red
• orange
• cyan
• yellow
• purple
• magenta

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:

• 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:

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:

• 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.

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. (If you know of a better one, please let me know!)
• 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

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.

Validate

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.