CS 318: Lab 5 – Hello, CSS
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-colorcolorwidthfont-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
divandspan, and restate their function in your own words.
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
.htmlfile. - 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
h2listing 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
figureelement on MDN.) - The site has a table of contents page in
index.htmlwith 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
bodyand the text of theh1,h2,h3,pelements. 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-styleon MDN. - Lighten the text color of
figcaptionto a medium gray. - Constrain the
bodyto a fixed width of 800 pixels by settings itswidthproperty to800px. - Center each
figurewithinbodyby setting itswidthproperty to600pxand itsmarginproperty toauto. We’ll discuss layout in more detail in subsequent labs. - Constrain each
imgto a width of600px. Make each image a link to its unscaled source image using anatag.
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.