|
|
Article
Webmaster Help Tutorial: Font Colors and CSS
© AffiliateSeeking - This article is not allowed to be re-published but can be linked to.
Cascading Style Sheets or CSS is one of the most important webmaster tools of all. Whether you use webmaster software or just plain Notepad, you should use it as much as possible to keep your web page design trim and simple. In this webmaster help article, you will learn to display fonts of different colors and backgrounds in the same page with just one CSS file.
TWO-TONE PAGES:
Most web pages are either dark-colored fonts on a light background, or light-colored fonts against a dark background. You can do both with CSS. This is good if the webmaster wants to highlight a table or block of text. For example, if your pages have gray text on black background and you want to put an article there with different colors for emphasis.
In this webmaster help tutorial we get this effect by defining separate classes in your CSS file. Like this:
For your default paragraph, enter something like this:
p
{
font-family: 'Book Antiqua';
color: #cccccc;
font-size: 16pt;
text-align: justify
}
For the other type of paragraph, this:
p.help
{
font-family: 'Book Antiqua';
color: black;
font-size: 16pt;
text-align: justify
}
To invoke the default paragraph, just type <p>paragraph</p>.
To invoke the special type of paragraph, type <p class="help">paragraph 2</p>.
Now this wouldn't make any sense if the background color was the same. One of them would be unreadable. Our webmaster help solution: Put the special paragraph in a special table.
Sample code for the table:
table.help
{
background-attachment: fixed;
background-image:url("YourGraphicsFolder/bground.jpg");
background-color: #cccccc;
table-align: center;
font-size: 16pt
}
Every time you invoke <table class="help">, it will create a table with light-colored background or the background image of your choice that complements the special paragraph font color.
And the coolest part of all with this webmaster help tip is, you have to do it only once. If you want to change the colors or font type/size anytime, you just have to edit the source CSS file.
Try it and see for yourself. This webmaster help with fonts is useful if you want a part of your site or article without having to use too much code every time (specifying colors, alignment and sizes of fonts, tables, etc.) We call this the "tombstone" effect when the table has a 3D effect.
For a 3D effect, try this:
table.help {
border-width: 15px 15px
}
HYPERLINKS
This webmaster help tutorial won't be complete without a word on hyperlinks. This is how you change colors for hyperlinks.
CSS code for hyperlinks may look like this:
a:link {color: blue}
a:visited {color: red}
a:hover {color: red}
To define classes of hyperlinks, follow this example with "help" as a class:
a.help:link {color: green}
a.help:visited {color: green}
a.help:hover {color: purple; font-style: italic; font-weight: bold; background: white}
In this class, when you place the mouse-cursor over the link, it not only changes from green to purple, it also turns bold and italic AND has a white highlight. (A yucky combination, but you get the idea.)
NOTE: We recommend that you use the same color for visited and unvisited links if yours is a small artistic web site. It makes everything look new. But if it's a service-oriented site, use different colors to make easier for your visitors.
You can use this for graphic presentations, or for whole articles. The effects taught in this webmaster tutorial will help make the item stand out from the page. If a webmaster uses this wisely and conservatively, the pages can look very cool and impressive.
|
If you want to use this article on your website, in your newsletter or anywhere else on the Internet, then you can only link to the article and not re-publish it. If you wish to link to the article, here is the html linking code:
| <a href="http://www.affiliateseeking.com/ashow/160.html">Webmaster Help Tutorial: Font Colors and CSS</a> |
|
|
|
|
|
