Welcome to CSS Lessons
The power of CSS is boundless.
Let your imagination be your guide.
Brought to you by CyberStar Designs
Table of Contents CSS Lesson 1 CSS Lesson 1 Part 2 CSS-Lesson 2
CSS Lesson 3 Part 1 CSS Lesson 3 Part 2 CSS Lesson 4 CSS Lesson 5

CSS – Lesson 1 Part 2

Getting started.

Okay, it’s time to show you how to get started using CSS. There are three main ways to incorporate CSS elements on your pages.

First is the use of the "imbedded" style sheet. It would look like this:

<html>

<head>

<title>Your Page Title </title>

<STYLE TYPE="text/css">

Style element

</STYLE>

</head>
Notice that the style tags go in between the head tags and usually after the title tag. This would be fine if you only have one page, but if you have many pages then it makes more sense to use the next example.

Second is the use of "linked" style sheets. It would look like this:

<html>

<head>

<title>Your Page Title </title>

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

</head>
Using this method you would make up a style sheet in one of the free editors or you could use a note pad type of program if you prefer to hand code, and save it as a .css document. Do Not use a word processor for this, as it may add formatting code to the style sheet which could cause problems. It just needs to be a simple text document with a .css extension. On every page of your site where you would want the style sheet used, just cut and paste your linked style sheet between the <head> </head> tags.
<link href="yourstyleshhet.css" rel="stylesheet" type="text/css">

Third would be to use an "inline" style element on your page. This would be for that one time exception. I generally will add all style elements to my style sheet, just in case I change my mind and want to use it somewhere else.

<FONT STYLE="font-weight: bold; font-family: courier">affected text<FONT>

Terms Used

Selector : What you are defining. (ie: body, h1, h2 tags)
Property: The element. (ie: margin, font-size, color, etc.)
Value: The definition. (ie: 0px, #000000, arial etc.
Selector ( Property: Value; }
You would do an h1 tag like this:
H1 ( font-family: Verdana; }

For these lessons, we’ll assume that we are all going to use a linked style sheet. So the following is what you would actually put in the style sheet document. Remember, this goes in a plain text ascii document. If you have Windows, you would use a program like Note Pad to hand code it.

The first elements I set up on my sheets are for the body of the pages.

body {
margin: 0;
padding: 0;
font-family : Arial, Helvetica, sans-serif;
font-size : medium;
color: #000000;
}

Okay, what did I just do? The body tag controls the body of the page just like the <body> tag does. You’ll notice the curly bracket used. You need an opening bracket { and a closing bracket } for all of the selector tags.

Next I set the margins and padding. I use both as Netscape and Internet Explorer use different elements to do the same thing. I set them both to zero to get rid of any space around the edges of the page. Everything will now fit flush to the edges of the browser.

Then I set the font, font size and the color of the font. It is a good habit to use the semicolon at the end of every element even if there is only one.

Next I’ll set the H tags. I want the H tags to use a different font than the regular text, so I’ll change it here.

H1 { font-family: Verdana;
Font-size: 110%;
Color: #00000;
}

H2 ( font-family: Verdana;
Font-size: 90%;
Color: #00000;
}

Note! The W3C recommends that you do not use pixel size for text, as it will not be resizable for those who might have a vision impairment. This is what the W3C recommends for font size:

xx-small, x-small, small, medium, large, x-large, xx-large.

In using H tags, I usually will use a percentage. This will size it to a percentage of the normal H tag size. You may however use the standard text size of medium, large etc. I like the percentage as it gives me greater control over the size.

Ok that’s it for now. In Lesson 2 we will put together a complete style sheet.
Table of Contents CSS Lesson 1 CSS Lesson 1 Part 2 CSS-Lesson 2
CSS Lesson 3 Part 1 CSS Lesson 3 Part 2 CSS Lesson 4 CSS Lesson 5