The Webmaster's Resource

Main Page Main Page

HTML Tutorials HTML

Design Tips Style

Promotion Tips Promotion

Links Links
      Web Rings
      Credits

Send the Webmaster E-mail Feedback
      Critique
      Sign In
      Guestbook



Sponsored by GeoCities
Get your
FREE web site!

  

<Introduction to Cascading Style Sheets>

CSS1
 
   Control over the style of your web page has been lacking or even non-exsistant in the past.   We've all had to layout pages with elaborate tables and put <font> tags all over the place to create the desired effect.   Now with Cascading Style Sheets (CSS1) we now have greater control over the layout of our pages.

   Interest from the World Wide Web Consortium has been so great that Netscape has incorporated Style Sheets in its Navigator 4.0 and Microsoft has supported them since Internet Explorer 3.0.

   Perhaps the best reason to learn Cascading Style Sheets is that they are an important part of all Dynamic HTML pages.   OK, enough of this.  Lets dig in.

What can we do?

   With CSS1 we can control many of the formatting options on your web page with just one entry.   For instance, if your using a CSS1 enabled browser, you'll see that even though all of the type on this page is one font and there are many table cells forming the page it is all controlled by one line in my style definition.

   In addition I've modified all of the links on the page so that they are not underlined.  Depending on the browser you are using you may even be able to layer objects or even create motion.

Types

   Style Sheets can be used in three ways.  Inline, or adding the style to an HTML tag using the style attribute.   Embeded, as in putting style data between <style> tags in the heading section of your HTML file.   And finally, External style sheets that are linked to your HTML file.  These style sheets are great because you can have one style file that controls the style of all of the web pages on your site.   They are just text files saved with a .css extension.

   Here is how we can use style inline inside a regular HTML tag:

<a href="links.html" style="font-family: Sans-Serif">

Format

   The format for creating embedded style sheets is:

TAG { property: value }

   Note that the CSS declaration above (officially named 'selectors') use a different sytax than normal HTML.

TD { font-family: Verdana }

   The above example sets all text within a table data cell to the font Verdana.   If the visitors computer doesn't have the Verdana font installed then the default font for his or her browser will be used.

   Here is how this would look using embeded style.

<html>
<head>
<title>My Style</title>
<style type="text/css">
<!-- Hide from browsers with NO STYLE
     TD { font-family: Verdana }
     A { text-decoration: none }
End Hiding -->
</style>
</head>
etc...

   It's a good idea to use the comment function to hide the style declarations from older browsers just as you would with a script.

   To use this example as an external style sheet you would save the style declarations as a text file named something.css and use the following in your header.

<link rel=stylesheet href="something.css" type"text/css">

   As you've already guessed there are a number of other attributes you can specify besides the font.   Here are some of the rest.

font-family
Controls the font of the text.  You may specify a specific font, as I did in the above example, or a family of fonts.  For instance Serif, Sans-Serif, Cursive, Fantasy, and finally Monospace.

   NOTE:  It's a good idea to include different fonts for differing machines.  For instance,

body { font-family: Verdana, Helvetica, Sans-Serif }

   The browser will pick the Verdana font first (fond on PC's), if it isn't found then it will pick Helvetica (found on Mac's), and finally if it can't find either of those it will select the default Sans-Serif font.

font-size
The size of the font can be controlled in many ways.  Points use pt.   Inches use in.  Centemeters use cm.  Pixels use px, and Percentage use %.   Here is an example:

body { font-size: 12pt }

font-weight
The thickness of a font is known as its weight.  If you use this attribute always remember that in order for it to work the font weight must be on the visitors computer.  The possible weights are, extra-light, demi-light, light, medium, extra-bold, demi-bold, and bold.  Usually bold is available but the others may not be.

span { font-weight: bold }

text-decoration
This attribute assigns decoration to text.  The options are, none, underline, italic, and line-through.   You can remove the underline from your links like this:

a { text-decoration: none }

line-height
Here we can define the leading of a portion of text.  Use the same measuring units as font-size.

p { line-height: 15pt }

color
Put a color name or hex triplet here to change the color of the text.

span { color: Blue }

Run it all together

   Ok, to put a bunch of attributes together all on one tag all you have to to is separate the attributes with a semi-colon.

td { font-size: 10pt; font-weight: normal; color: Black; font-family: Verdana, Helvetica, Sans-Serif }

Note

   Because of differences in the implementation of Style Sheets in the various brousers out there it is best to put the font-family definition last in your tag style description.

Shorthand

   The above examples can make you tired of typing really fast.  So there is a shorter way, the inventors of CSS1 came up with a shorthand method of writing style sheets.   Look at the following:

div { font: bold italic 12pt/20pt Verdana, Helvetica, Sans-Serif }

   Order is VERY IMPORTANT here!   The order is font-weight, font-style, font-size, line-height, and finally font-family.

Finally

   This is a primer for CSS.  You can do so much with style sheets.  Watch this site for more on style sheets coming soon.


Back Main Page
    Copyright © 1997, 1998 by Jim Meeker
Back to the top.   E-mail: jim314@oocities.com    ICQ: 724480
Updated on: 12/27/97 11:41:34 CST