lecture 2: style properties

Look at the first section of your handout. This contains the code for both "antiq.css" and "cool.css". You can see that in each sheet four tags have been defined: <body>; <p>; <h1>; and <blockquote>.

In this lecture's pre-reading we talked about the general format of style sheet tag definitions. So you can compare this with what you see on the handout, I repeat it here:

tag name { property : value;
property : value;
property : value; }

This style sheet uses the most common text formatting properties. (The next slide goes into a little more detail about how you can define fonts and colours.) There are many more possible properties than these. Some will be specifically mentioned in later parts of the course, but not all. They are all listed, however, on this site's style sheets reference page.

PRACTICAL EXERCISE: Open a new Notepad window. Choose either "antiq.css" or "cool.css" and type it in as you see it on the handout. I know this seems laborious but it is useful practice for you. You need to be exact with the syntax (e.g., punctuation marks) with style sheets or they may not work properly. Typing it in yourself will start to get you in the routine.

Once you've typed it in and checked it, save it alongside the "film quotes" page you created last week. Give it the file name, "my.css". (If you did not create this page, or have since deleted it, you can get the source code of "blue.html" by going back a couple of pages in this lecture. You should then use Save As to save it in your www folder.)

What we need to do then is add a <link> tag to our first web page. This tag always goes in the header: do not put it in with the text of the page body. (I tend to put <link> and <title> tags next to one another.) If you did save the style sheet as "my.css" the tag should look like this:

If you now open up the "film quotes" page in a browser window, it should show with the styles in place. If it does - well done - and you can move on to the next slide where we will practise making some changes to the styles.

If it does not show the styles check the following:

did you type in the <link> tag exactly as given above?
did you save your style sheet as "my.css"? If you saved it under a different name, either rename the file or change the href attribute of the <link> tag to match the name you gave it.
do the style definitions in the style sheet match the ones on your handout exactly? Check particularly that you have not put angle brackets < > around the tag name - that you have curly brackets { } at each end of the definition - that you have separated the properties and values with colons : - and that you have separated each property by semicolons ; (although one of these is not strictly necessary after the last or only property).

If all these are true then it should be working! However, if it is not, I suggest you move on to the next slide and keep going through the lecture. You can always ask a demonstrator later why it did not work.

<< previous slide

return to lesson 2 index

next slide >>

lecture menu

lecture 2: style properties