Introduction to Multimedia: The Internet & the Web

Basic CSS: A First Stylesheet

Background: Selectors

CSS files contain three types of selectors:

selectors which apply to pre-existing HTML tags where they appear in a document
selectors which can be applied to more than one tag and to more than one place in a document
selectors which can only be applied to one particular instance of one particular tag in a document

Remember: each entry in a CSS file consists of

a selector
one or more properties to be applied where that selector is found in the HTML
and one or more values for each property of that selector

As you do this homework, it would probably be a good idea to have the slides about basic CSS open in another browser window.

Establish a Basic CSS File

In the first part of the homework, you will be creating your first CSS file for this class. You will need to remember our discussion of and practice with the BBEdit programmers' editor, about establishing directory structures, and about setting file and directory permissions.

After completing the last homework, your directory structure on gibson.rit.edu should include the following:

www
imm
exercises stylesheets

Directly under your login directory (the one you arrive at when you connect up using ssh) should be the www directory, under that should be the imm directory, and under that should be two directories: exercises stylesheets. All should have the same permissions:

drwxr-xr-x

You should now copy exercise01.html to a new file called exercise02.html in the same directory as the last homework.

Next, open up BBEdit and create a new and empty text file and save it to gibson.rit.edu in that stylesheets directory you created while doing the last homework. Make sure to save it with the name exercise02.css, and make sure it has the right permissions after you save it to the server.

Now insert into the stylesheet instructions to display all first-level headers using a red color for the text displayed. Next, add to the stylesheet instructions to create a class called "fancy", which sets text to be displayed in the default system serif font and bold. Finally, add to the stylesheet instructions to establish an ID selector called "important", which sets text to be displayed in the default system sans-serif font using a green color.

Finally, open the HTML file you created called exercise02.html in the editor. Make sure you have at least one first-level header in that HTML file, that it has at least some text declared to be of class "fancy", and that it has one and only one area of text declared to have the ID selector "important".

Test & Revise

Test your page against the W3C CSS validator, and revise until it validates as completely correct.

Grading Matrix

item		points
create CSS and HTML files with correct names in correct directories with correct permissions		20
CSS file sets "first-level header" tag to a red color		10
CSS file establishes class selector called "fancy" which sets font to Serif and Bold		10
CSS file establishes ID selector called "important" which sets font to Sans-Serif and green		10
HTML file from last homework copied to new file named exercise02.html		10
link to exercise2.css properly inserted into exercise02.html		10
first level header displays properly when HTML loaded into browser		10
"fancy" selector applied in at least one place in HTML and displays properly when HTML loaded into browser		10
"important" selector applied in exactly one place in HTML and displays properly when HTML loaded into browser		10
total		100

Due Date

By start of class on Monday of week 3.