Admins101.com - Tutorial: Top20 Code overrides all font colors

So you've used the TOP20 codes and it changed all your font colors?

This is quite lenghty but you'll learn a lot about controlling your page colors. This tutorial was written in our help forums. If you need further help with it, please post a question there.

Ok, let's begin...

Find the following code in your page:

This is CSS or Cascading Style Sheets code. What's happening is that even though you have tags in your page, the CSS code above is overriding the tags.

Look where it says:

font, td, p, i, xmp, u, {COLOR: #8B4513; FONT-FAMILY:verdana; FONT-SIZE:10pt;}

That code is telling your font, table cells, paragraphs, etc to be displayed as Verdana, Size 10pt, Color #8b4513. So even though further down in the page you have

<FONT face="verdana" size="2" color="ffffff"><b>Report Loss</b></FONT>

the CSS code has already told it to be displayed a certain way, so the browser just ignores the tags.

It's also telling your links (a:links), visited links (a:visited) and hovered links (a:hover) to be a certain color, font and size.

So how do you fix it? Well, first, I would remove the and tags throughout the page. They're being overridden anyway and it's alot easier to set up and change font colors in the CSS code than having to go through your page changing every tag every time you want to change your page colors.

Next, you need to set up a class in the CSS codes for each thing you want displayed on the page. You can create a class for just about every HTML tag there is.

Here's an example:

Let's say you want to have a heading on your page that says "Happy Thanksgiving!" You want it to be displayed larger than the other text and you want it to be red and you want to use the font Verdana. Your class would look like this:

h1 {font-family: Verdana; font-size: 14pt; color: #ff0000;}

In your page, your HTML code would look like this:

<h1>Happy Thanksgiving!</h1>

So everytime the browser sees an

<h1> tag in your page code, it's going to display it using Verdana, size 14pt font, color #ff0000 (red).

But wait, what if we don't want EVERY heading on the page to be displayed that way? No problem, we can create our own classes. We don't have to use the HTML tags for classes.

We could do this:

.heading1 {font-family: Verdana; font-size: 14pt; color: #ff0000;} .heading2 {font-family: Comic Sans MS; font-size: 14pt; color: #0000ff;}

And in the our page html code, we'd do this:

<span class="heading1">This is a red heading</span> <span class="heading2">This is a blue heading</span>

That's going to give us two headings on our page with different fonts and colors.

So, back to the CSS code you already have on your page:

font, td, p, i, xmp, u, {COLOR: #8B4513; FONT-FAMILY:verdana; FONT-SIZE:10pt;}

The class "td" is controlling all of the text inside of the table cells

<td> on your page. We can change that by creating a class for each td that we want displayed differently by removing td from the code above and then setting up different classes for each cell.

Let's say we have a table with 2 cells. We want the text in one to be red and the text in the other to be orange. Our CSS would look like this:

.redcell {font-family: Verdana; font-size: 10pt; color: #ff0000;} .orangecell {font-family: Verdana; font-size: 10pt; color: #ff9900;}

In the page HTML we'd have:

<td class="redcell">This text is going to be red.</td> <td class="orangecell">This text is going to be orange.</td>

So, what happens when we're ready to change our page to a Christmas theme and we want to have the text in the second cell displayed as green instead of orange? All we have to do is change the class for the orange text to green. Like this:

.greencell {font-family: Verdana; font-size: 10pt; color: #669900;}

and our page code would look like this:

<td class="redcell">This text is going to be red.</td> <td class="greencell">This text is going to be green.</td>

What about our links? Can we change them? Of course!

This is the code that's controlling how our links look and behave:

A:LINK{color: #8B4513 ;FONT-FAMILY:verdana;font-size:10pt;} A:VISITED{color: #8B4513 ;FONT-FAMILY:verdana;font-size:10pt;} A:HOVER{color: #8B4513 ;FONT-FAMILY:verdana;font-size:10pt;}

Now, if you want all of your links on your page to look the same as the links used for the Admins at the top of the page, just leave this alone.

If you want your links to be displayed differently, all you have to do is create some new classes in your CSS code. Like this:

A.mylink:LINK{color: #ff0000 ;FONT-FAMILY:verdana;font-size:10pt;text-decoration:none;} A.mylink:VISITED{color: #0000ff ;FONT-FAMILY:verdana;font-size:10pt;text-decoration:underline;} A.mylink:HOVER{color: #00ff00 ;FONT-FAMILY:verdana;font-size:10pt;text-decoration: underline;}

and in your page HTML code, an example would be:

Notice, the added .mylink to the class in the CSS code and class="mylink" to my HTML code. Another thing that was added, text-decoration:none; and text-decoration:underline; to the CSS code for the links.

What this gives us is links (:LINK) that will be initially displayed as Verdana, 10pt, red, no underline. When someone mouses over the link (:HOVER) it will turn yellow and have an underline. When someone clicks the link (:VISITED), it is then displayed as blue with no underline.

Remember, all CSS tags go between the

tags in the section of your page. You can also create a whole separate page to hold all of your styles called a Style Sheet and link to it from your pages, but that's a whole other lesson.

Published on: 2006-03-19 (3986 Reads)

[ Go Back ]