CPSC 120, Fall 2014
Lab 2: Introduction to CSS

For the previous lab, you were asked to create a small web site on some topic. The site used only plain HTML. Your assignment for this lab is to add CSS styling to your site.

For this lab, once again, your work should be in the www folder in your Linux account. It will be visible to the whole world, and you do not need to do anything special to turn it in. Your site should be ready for grading before the start of next week's lab.

Organizing Your Lab Work

You should keep your work for different labs separate. To do that, you can put the files for each lab into a folder.

First, you should move your work from the first lab into a folder named lab1. Open your www folder. Right-click in the window, and select "New Folder." As soon as the new folder appears, you can type a new name for it; name it lab1. Do not include any spaces in the name. (Note that you can rename an item at any time by right-clicking it and selecting "Rename.") Now, drag the files that you created for the first lab into the lab1 folder.

Second, you want to start the second lab with a copy of your work from the first lab. Make a copy of the lab1 folder and name it lab2. To do that, right-click lab1 and select "Copy." Then right-click elsewhere in the www window and select "Paste". You will get a copy named lab1 (copy). Change the name of the copy to lab2. (Right-click lab2 and select "Rename".)

Remember that to access your files on the web, you will need to add the folder name to the URL. For example, if the URL for one of your files was originally

                   http://math.hws.edu/~zz9999/mypage.html

then after you move the file to the lab1 folder, its new URL will be

                   http://math.hws.edu/~zz9999/lab1/mypage.html

Adding CSS

For this lab, you want to add CSS styling to the files that you created for last week's lab. You should work with the copies of the files in the lab2 folder that you just made. You should open that folder in a file browser window so you can get at the files easily.

You are designing a web site, and all the pages on the site should have a somewhat similar style. The way to implement that is to create a new CSS file containing some style rules, and then to use that file on each of the site's HTML files. But in addition to making a general style, you should also have some specialized, individualized style for some of your pages using style rules in the HTML files.

Use gedit to create the general CSS file, and save it in the lab2 folder with a name such as style.css. (The name should definitely end with ".css".) The file will contain CSS rules that apply to your entire site such as

h1 {
    color: #AA0000;
    test-align: center;
}

You then need to link that style to each of your pages by adding a <link> element such as the following to the <head> section of each of the HTML files:

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

Your CSS file defines the general style for your site. To add some extra style to a particular page or override some of the general style rules on that page, you should add a <style> element to the <head> section of that HTML document. The <style> element contains CSS rules of exactly the same for as you would use in a CSS file. For example:

<style">
   h1 {
       color: blue;
       test-align: left;
   }
   p {
       text-indent: 20px;
   }
</style>

(Remember that you can look up color names and color codes on the w3schools web site. Here is a direct link for color codes: http://www.w3schools.com/tags/ref_colorpicker.asp.)

For your work in the lab today, you should apply the material that is covered in the reading, Chapters 10 through 12 of HTML&CSS. That means primarily color, font, and text properties. But you should also use one other property that was covered in class: background_image. Use a background image on at least some of your pages. It has to look good. I prefer a subtle image like those on http://coolpatterns.net/. You can also try Googling "free background patterns".

More Than One Way to Style It

To get full credit for this lab, you should design a second style for your site. After you have the first style finished, make a copy of your lab2 folder. Call it something like lab2b. Edit the CSS file in the copy to give the second version of the site a different look. You might want to edit some of the styles on individual HTML pages as well. Maybe, for example, you can use dark text on light background for one version of the site and light text on dark background for the other.

Also remember that you should do more than the absolute minimum that is described in this lab. You should not just add a couple of style rules and think you are done. You want to apply a variety of rules including some that were not mentioned in class. Furthermore, try to make the site look good! It would be nice to use some attractive Google Fonts...

About Google Fonts

Google has made a selection of free web fonts available and has made them fairly easy to use. Web fonts are discussed on pages 277–278 in HTML & CSS, but the discussion there seems to be too old to mention Google fonts. When you use fonts from Google, you don't have to download them onto your own server. You just have to link them to the HTML document that uses them. When a web browser views your web page, the web browser will get the fonts directly from Google's servers.

The fonts can be found at https://www.google.com/fonts. On that page, you can browse fonts. When you find one you want to use on your page, just click a button to "Add to Collection". When you have all the fonts that you need, click the "Use" button in the bottom right corner of the window. You will get instructions on how to use the fonts, with some code that you can copy-and-paste into your HTML document. There will be a stylesheet <link> element that you can copy into the <head> section of your page. (The stylesheet that you are linking to contains the required @font-face rules for the fonts; see page 277.) There are also sample font-face rules that you can add to your CSS to apply the fonts to elements on your page.

This section of this page uses three Google Fonts, one for the headline, one for italic text and one for regular text. (Note that you can apply font-size rules to a Google font so that you can make text that is smaller or bigger  than normal.)