<style>

Schedule

Intro

Topic:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Project Guidelines

Syntax

"Syntax" refers to the rules of usage. I think of it as the price I pay (the "tax") for "sins" against the detailed rules. Style sheets are less forgiving than html. When you write html computers often let you put in an extra space here and there. There are problems if you miss one of a pair of quotation marks, but the rules are fairly loose. With style sheets you must make sure you type the code exactly right.

For example, I had a hard time getting the Netscape 4.5 pc browser to display these pages in the brown color type, when I was trying to have a default type of brown. The style sheets worked with Explorer and Netscape 4+ for Mac, but not on a pc display. The code looked right. Finally, I found that it made a big difference whether I typed the font sizes 12 pt or 12pt in the style sheet. Once I took out the extra space, the display worked. Note that my problem showed up in the color of the font, even though the mistake was in the value for size.

It also is important that when linking a style sheet you put "text/css" in between quotation marks in the phrase:
<link rel=stylesheet href=namedstyle.css type="text/css">
or your page will not validate.

One suggestion when starting out with style sheets is to always write your style sheets with one selector or declaration per line. The "selector" is the html tag you are assigning a style. The "declaration" is the "property" (such as "color") and the "value" you assign to that property (such as "#FFFFFF"). Putting each declaration on a separate line makes it easier to check your punctuation and spacing.

For each html tag ("selector") you need a curly bracket { to begin and } to close. For each declaration you need the "property" followed by a colon : followed by the "value" ending with a semicolon ; (although you can leave out the final semicolon if you are ending with the closing curly bracket.) See the embedded Style Sheet for the unit 10 introduction page for an example. To use just one example:

h1 { <!-- selector with opening curly bracket -->
background: #FFFFFF; <!-- note colon and semicolon -->
color: #993300;
font-size: 20pt; <!-- note how hyphen used in some properties -->
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold } <!-- end curly bracket instead of semicolon for final value-->

Finding Problems

Check your Style Sheet

W3C maintains a validation service for style sheets. If you submit the URL of your page with a style sheet, the service will give you a report that may help you track down your problems.

Perhaps the most frustrating part of trying style sheets is this: if your style sheet does not work it is hard to know whether the problem is a mistake you have made or the browser's failure to implement the standard.

The only way to make progress with style sheets is to play with them. Try linking assorted styles to your page and see what works.

Continue to "Ice Cream Shoppe"