mirrormere.com News
Getting Started in Cascading Style Sheets, by Christopher Hurley
Getting Started

Cascading Style Sheets are useful for either creating or editing HTML tags, or giving your pages a consistant feel to them. It's all done by rules.
Rules in CSS (as they are known) always have two sections - a selector, such as <H1>, <B> or even <GREEN>, and a style for the selector. The syntax is like this:

selector {property:value}

For example, the rule for a blue Heading One is:

H1 {color:blue}

You can use more than one property and value by separating them with a semicolon, like this:

H1 {color:blue; font-family:Helvetica}

In this way, you can subsitiute a known HTML tag for one of your own creations, such as

GREEN {color:green}

You can also create classes for tags like this:

H1.red {color:red}
H1.blue {color:blue}

And then use them in your document like this:

<H1 CLASS="red">

Properties

There is a phenominal amount of properties and values you can use - I'll just go over some of the more useful ones. For many more properties, go to one of the web sites at the bottom of this page, or buy a book from your local bookstore. Text in italics shows the values you can use, and text in bold shows the property.

Background-Repeat is a property which tells the browser how many times to repeat the background image. Possible values are repeat, in which it repeats normally, repeat-x, which only repeats horizontally, repeat-y, which only repeats vertically, and no-repeat, which doesn't repeat at all.

Color defines the colour of any element on your page by using a colour name or the #RRGGBB notation.

List-Style-Type identifies which marker is used to show a list item. You can use disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha and none.

List-Style-Image idenifies an image to be used as a list marker. You use it in the format: list-style-type:url(yourimage.gif)

Font-Family sets the font for text. Use a font name or a type: serif, sans-serif, cursive, fantasy and monospace. Names of fonts with spaces should be inclosed in quotes, and you can put more than one font by separating with a comma - they will be used in the order that you state them.

Font-Size specifies the size of text. Use xx-small, x-small, small, smaller, medium, large, larger, x-large or xx-large.

Font-Style defines if the font should be normal, italic or oblique.

Font-Value can change the font to normal or small-caps.

Font-Weight defines the boldness of a font. Use normal, bold, bolder, lighter, and the numbers 100 to 900. 100 is the lightest, 500 is medium and 900 is darkest.

Text-Align changes the alignment of text. You can use left, right, center or justify as properties.

Text-Decoration assigns a text modification - none, underline, overline, line-through and blink. Used with the tag <A>, this can remove underlining from links.

Text-Transform can change the case of text with capitalise, lowercase, uppercase or none.

Implementing Style Sheets

Embedded style sheets just change properties for that document. In the <HEAD> section of the file, use this syntax to create an embedded CSS:

<STYLE TYPE="text/css">
<!--
Put your rules here
-->
</STYLE>

External Style Sheets are an alternative. These can be used in any file as they are external. Use the following syntax, then save it in a file with a .css extension.

<!--
Put your rules here
-->

To link to it, use this tag:

<LINK REL=StyleSheet
HREF="mystyle.css" TYPE="text/css">

Cascading Style Sheets are 'cascading', as the name suggests. If you make all tables have green and bold text inside and then put a string of blue text inside it, it will inherit it's paren't bold text. Bear this in mind when using your style sheets.

CSS related links

WWW Consortium - Style Sheets Leaving mirrormere.com
WWW Consortium - More Style Sheets Leaving mirrormere.com
HTML Help Reference - CSS Leaving mirrormere.com

T3 Network Affiliate
mirrormere.com Network
mirrormere.com
  News
  Authoring
HTML
Design
Style Sheets
JS
  Reviews
HTML Dev
Graphics
Misc

mirrormere
Interactive
  Web Design

Frevo
  Home
  Software
  Reviews

Home

Search

Forums

Chat

Contact

Top Best viewed with Microsoft Internet Explorer 5 Leaving mirrormere.com, at 800x600 or higher.
© 1999-2000 mirrormere Interactive. Legal Notice.
mirrormere.com and mirrormere Interactive are trademarks of mirrormere Interactive.