CSS Lesson 3 Part 1

In the past lesson we covered some pretty basic stuff. This lesson we will cover a little more of the basics and try some easy intermediate things. We left off covering the basic HTML tag like headings, links, paragraph, and background images for your page.

Backgrounds

Lets go over the background element a little more since this will probably get used a lot. If you were using a tiled background, the following code would be correct:

background-image : url(images/yourimage.gif);

This would let the image repeat itself both horizontally and vertically, which is called tiling. However, have you ever been to a page and as you scroll the text the image stays in one place? In most cases I think that is a little distracting, but depending on the usage, it can look pretty cool. This is how it is done.

body {
background-image : url(images/yourimage.gif);
background-attachment : fixed;
background-repeat : no-repeat;
}

The background-attachment : fixed; tells the browser that the image must stay stationary and not scroll with the page. The background-repeat : no-repeat; keeps the image from tiling both horizontally and vertically. One draw back to this, is your image hast to be as large as the screen. That can be tricky when choosing an image that looks good at 800X600 and also at 1280x1024 or larger.

Depending on the image, it may be ok to let it tile either horizontally or vertically. If you wanted to let it repeat horizontally but not vertically then you would change the no-repeat to repeat-x. Or, if you wanted the image to only repeat vertically, you would use repeat-y.

While were still on the basic tags here, let’s talk a little more about those Heading tags. As you have probably noticed, when using the H1 tag it has built in padding or margin. It adds a space between it and the text beneath it. You can control that extra white space by adding margin and padding properties to the style sheet.

Here is the H1 tag that I'm using on this page:

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

Heading

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

Heading

Intermediate CSS

Classes and ID’s

Lets cover classes and id’s since we will be using classes in the next example. You define classes and ids using the same properties and values as you would for standard elements. The biggest difference is that the same class can be used multiple times on the same page, where ids cannot. The ID command works exactly the same way as the CLASS command. The reason it exists is to allow you to incorporate these Style Sheet models into JavaScript or DHTML. So, unless you are attempting to use these with JavaScript, stick with the CLASS command. When writing classes and ids, a class starts with a period (.) and ids with a hash mark (#).

.class {
}

#id {
}

Lets define a class. Maybe you had a page with a lot of text on it. You had certain words or phrases that you wanted to stand out or emphasize. You could use the bold <b> or <strong> tag, and that might be just all you need, but if you wanted it not only to be bold, but red and italic also? You would write a class for this in your style sheet.

This is what we would add to our style sheet. We’ll shorten the word emphasis to em just to make it quicker to write on the page.

.em {
font-weight: bold;
font-style: italic;
color: red;
}

We want to make <span class=”em”>these words stand out and are very red</span>, while the rest of the sentence is normal. See how easy that was. We now have our own custom class. There is no limit to the number of classes you can make. Just be sure to use different names for each one.

In Part 2 of this lesson, we will get a little creative with classes.