In the last few articles we have learned the basics of CSS (Cascading Style Sheets) and have learned how to format the text displayed on our sites and even how to change the look and feel of our links. We’ve learned how to setup CSS in a separate file, so we do not have to edit all the pages within our web sites, and learned the proper way to write CSS within theses files.

In this article we will learn some advanced commands and a few tricks on how to use CSS and we will also learn a few ways to format other aspects of a web site.

Re-Cap

In the past few articles we’ve learned the basics of CSS. Let’s go over a few things again, just to refresh our memories.

Proper Format

When CSS is being used within a web page, or HTML document, it has to be formatted a certain way and opening and closing tags are required.

<style type=”text/css”>

This is the opening tag that we’ll need to start a CSS within an HTML file.

All of our commands and functions will go inside this and then we will close this by using the following command.

</style>

Now remember that these tags are not needed inside a separate CSS file. These are only required when using CSS inside of an HTML document.

To include a “.css” file we can use the following command under the “title” tags.

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

This command will include any “.css” into our HTML documents so the CSS command isn’t needed in every page. Multiple CSS files can be included this is useful for organizing different CSS commands and functions in different files.

Note: Remember that if there is more then one CSS file being included within a web document and they both contain the same command name, the first file loaded will be the functions used.

Link Classes

Most users do not realize that links can have more then one class also. This can be useful if a site uses different background colors on the same page and links need to be different colors within this document. We can setup custom link classes for each, and each can have there own colors and functions for each link class.

Let’s take a look at a how to setup a custom link class.

.footer:link {

  BACKGROUND: none; 

  COLOR: #D0CEA5; 

  FONT-SIZE: 10px; 

  FONT-FAMILY: Verdana; 

  TEXT-DECORATION: none

  }

 

.footer:active {
BACKGROUND: none;
COLOR: #D0CEA5;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}

.footer:visited {
BACKGROUND: none;
COLOR: #D0CEA5;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}

.footer:hover {
BACKGROUND: none;
COLOR: #F6F4D2;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}

Notice how we didn’t use “A” in front of the link commands. This is how to setup custom classes with links. There can be as many of these as a site wants.

Setting up these link classes to be used with links are a little different then using classes to format text.

<a href=”http://www.domain.com/” class=”footer”>Domain.com</a>

Notice how we used class=”footer” at the end of the opening link command. This tells the browser that this link needs to be formatted using the “footer” class in our CSS code. Once this is added to the link code, it will display the link however it’s formatted in the CSS. This is a great function to use for sites that need many different style links and can’t conform to just one set style.

More Classes

Different classes can be used on more then just fonts. They can set for all of the header tags “H1, H2 & H3”, and any other tag that would normally have only one function.

Example

H1 {

  BACKGROUND: none; 

  COLOR: #F6F4D2; 

  FONT-SIZE: 10px; 

  FONT-FAMILY: Verdana; 

  TEXT-DECORATION: none

  }

 

H1.2 {
BACKGROUND: none;
COLOR: #F6F4D2;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}

The first would be used just as normal it would format any text within the “H1” tag. The next class would be setup a bit different, but the same style as the link classes.

<H1 class=”2”>

This will use the functions setup in the “H1.2” class and not the default. These classes can be setup for any of the “H” commands and as many as you’d like.