Kenston High School
Understanding Our CSS Style Sheet
Search Our Site

Understanding Our CSS Style Sheet

Problem? "There's nothing in my style window." Be sure you have saved your php page in the correct folder, and then attach styles-dreamweaver.php.

Our CSS style sheet gives us the power of changing the entire look of our website by changing the code in our style sheet. Visit Zen Garden to see the same content formatted in several different ways, simply by using a different style sheet.

Use our style sheet for all formatting. How? Select or highlight the image, table, or text you want to format, and then use the style you desire from the style window.

If you are making a title or sub-title, use the Format window and select the desired heading number.

Heading 1

Heading 1: large blue letters with an underline

Heading 2

Heading 2: smaller than heading 1 (but larger than our normal text) with no underline

Heading 3

Heading 3: same size as our normal text, but blue and bold

The only other formatting you may need is bold. We have two options for bold. If you highlight your text and press <CTRL + B> or click the "B" icon on the property tool bar, Dreamweaver will but a <strong> tag around your text, which will change the color of the text to blue and assign the bold attribute. If you do not want the text blue, but you do want it to be bold, go into the code and put an opening <b> tag in front of the text, and a closing </b> tag after it.

Never use the Font or Size windows on text. If you are trying to accomplish a "look" that you do not see in our style sheet, talk to your teacher. We can always add new styles. If you do not use our style sheet, and down the road we want to change the look of our site, your formats will not convert to the new look.

Do's and Do not's

Never press <Enter> in the right column of a two column page (no P tags). Use the rightSpacer class, or two br tags if needed (<Shift> + <Enter> in Dreamweaver).

Never press <Enter> inside a table (no P tags). Use two br tags if needed.

Span classes are tricky. A span will inherit the values of the parent class. If you use a span, you will probably see unexpected behavior. Span's should only be used when surrounding text that a class would otherwise break the desired styling.

Never center anything! Our design is based on a grid. By keeping things left aligned, we are able to ensure that the grid is maintained throughout the site. The grid allows for faster reading, and allows a reader's eyes to easily handle and evaluate the site without creating visual conflicts.

When to use:

rowtitle - This class is designed to be used with the even and odd row declarations, it will give you the ability to create a blue headline inside of the row.

roweven - Should be used in even rows in a table when you want the rows to alternate colors.

rowevenBordered - Same as above (roweven), but with a blue border.

rowodd - Same as roweven, but should be used for odd rows.

rowoddBordered - Same as rowodd, but with a blue border.

fullColRowOdd - Should only be used outside of a table in the full-column (a page with a right column), used for odd rows.

fullColRowEven - Same as fullColRowOdd, but for even rows.

articlespacer - This can be used to break up content in the middle column or full-column. It will add 15 pixels between the object above and below it.

rightSpacer - This should only be used in the right column to produce space between "sections".

cleaner - The cleaner is a simple class that can be confusing as to when to use. It clears both right and left floats. An object that is floated left for instance will try and place the next object or text next to it unless you use the cleaner. The cleaner would be used after a class div or span tag on a given object that has been closed.