CSS Lesson 2

In the past, you might have done this for a H1 header that you wanted to have green like the one above.

<font color=”#027A65”><h1>Basic CSS Lesson 2<h1></font>

CSS Lesson 2

h1 {
font-family : Verdana, Geneva;
font-style : italic;
letter-spacing : 2px;
color : #027A65;
font-weight : bold;
font-size : 100%;
}

CSS Lesson 2

It might look like a little more work up front, but now I don’t have to add the other tags. All I have to do as add the <h1></h1> and the rest is taken care of including the new size. I even add an element, “letter-spacing: 2px;”, to space the letters out a little to make it look a little more dramatic.

OK here is a complete style sheet that you could cut and paste to use, With just a few personal touches, you could use it on your site.

Here is the link for the style sheet that you could cut and paste in between the head tags on your page.

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

Just change the yourstylesheet.css to anything you want. Then just save the style sheet that you make up with the same name.

body {
background-color : #FFFFFF;
margin : 0px;
font-family : Arial, Helvetica, sans-serif;
font-size : small;
color : #303030;
table-layout : inherit;
}

a:link {
font-family : Verdana, Geneva;
font-size : 80%;
font-weight : bold;
text-decoration : none;
color : #027A65;
}

a:visited {
font-family : Verdana, Geneva;
font-size : 80%;
font-weight : bold;
text-decoration : none;
color : #027A65;
}

a:hover {
font-family : Verdana, Geneva;
font-size : 80%;
font-weight : bold;
text-decoration : underline;
color : #404040;
}

h1 {
font-family : Verdana, Geneva;
font-style : italic;
letter-spacing : 2px;
color : #027A65;
font-weight : bold;
font-size : 100%;
}

h2 {
font-family : Verdana, Geneva;
font-style : italic;
letter-spacing : 2px;
color : #027A65;
font-weight : bold;
font-size : 90%;
}

h3 {
font-family : Verdana, Geneva;
font-style : italic;
letter-spacing : 2px;
color : #027A65;
font-weight : bold;
font-size : 85%;
}

h4 {
font-family : Verdana, Geneva;
font-style : italic;
letter-spacing : 2px;
color : #027A65;
font-weight : bold;
font-size : 75%;
}

p {
text-indent : 30px;
color : #303030;
font-size : small;
}

OK there it is. Your basic style sheet. I added the “P” paragraph element as I like to indent my paragraphs. As you noticed I also defined my links here also. I set the normal link to have no underline till the mouse is over it. That’s the hover stage and then the link changes color and is underlined.

Just these few tags can give you a lot of flexibility in the presentation of your text. I’ll give you a couple of more elements to play with before I end Lesson 2.

Have you noticed how the first letter in each paragraph is a little bigger and a different color? You know how in print articles they like to use what is called drop letters? That big letter sometimes the size of two or three lines of text at the beginning of a paragraph. Well this is not quite that big but it gives the same sort of effect without the use of an image.

P:first-letter (
font-weight: bold;
font-size: 110%;
color: #000000;
margin-right: 3px;
}

Try it out, it can add a little flair to a plain looking paragraph. Note! This is added separately from the standard paragraph element. You would use both if you wanted to add an indent also.

For those that wanted to add a background image into their page, you would add the following to the body selector.

body {
background : Black url(images/yourimage.gif);
}

or

body{
background : url(images/yourimage.gif);
}

The first adds a black background color and also the background image, while the second adds just the image by itself. Whenever you add a background image to your page, it’s a good idea to add a background color that matches or at least nearly matches. It may take your image a few seconds to load depending on its size, and if your text color is dependent on the color of the image, you wont have missing text till the image shows up.

Lesson 3 will cover a few more basics and an intorduction to some intermediate CSS.