id: 2
Category: CSS
Rated: ---
Ever wonder how you can get an entire page's text one color? Or have bold letters a color separate from the normal font color? I mean there has to be a way without using the <font>text</font> code a million times on one page right? It would just be to much coding and a waste of time.
Luckily there is an easy way to do this using CSS. First we need to start with the basic part of any CSS code: <style type="text/css"> next hit enter. Now we need to add this:
*{
Now you may be wondering...what is * for? We need to tell it what we are changing the properties for. * is for anything in general that doesn't have any properties specified. Mainly, people use it to change the text on the whole page.Similar for Bold text the B stands for bold. Whenever the page reads a <b> it will know to take on the properties you have given it in the CSS code.
Now how can I change the properties? There are many properties you can change for text. Basic ones are color, font weight, font size, alignment, and text decoration. Let's look at the basic changes in a clip of CSS code:
color:#000000;
font-weight:normal;
font-size:12pt;
text-align:left;
font-family:tahoma, arial, century gothic;
text-decoration:none;
color: will decide the color for the text. At the moment we have our text black(#000000). You may change that to any color you wish. Any color that’s is a hex color will need to start with a # symbol. Other colors such as blue, red, and yellow, you can write normal.
Font-size: is the size of the font. Right now its 12pt (twelve point, used in word etc.) font. You can however us px (pixel) as well. You can make it any size you want. While I won't advise you to use pixel measuring system for font, you are able to use it as valid CSS.
Text-align: is which side of the page you want your text at. For example my page is on the left. You may switch this to Center,Right, or leave it at Left.
Font-family: is the style of font you want (ex. Arial, times new roman etc...). Keep in mind: just because your pc may have a fancy font, doesn’t mean the other pcs will. You should always have 3 fonts specified in this area.
But why do I need 3 text styles in the font family? It works this way: if you want the page to have tahoma for the text and someone viewing this page does not have tahoma font on their computer it will then move to the next text. So now it will see if the person viewing the page has Arial font style. All browsers have their own default font. Having 3 text styles will prevent people from seeing the browsers default text.
Font-weight: will determine whether its bold, normal, italic. If you add font-weight:normal; in the * for the css, be aware: your bold text no longer looks any different from other text.
text-decoration is the decoration such as underline or overline. If it says none, all text on the page will have none of these effects. If you place text-decoration:none; in the * for the CSS tag, please be aware: it removes the underline for links.
the only thing left to do now is close this. You need to add } and </style>
Now our code should look like this:
<style type="text/css">
*{
color:#000000;
font-weight:normal;
font-size:12pt;
text-align:left;
font-family:Tahoma;
text-decoration:none;
}
</style>
<style type="text/css">
b{
color:#000000;
font-weight:bold;
font-size:12px;
text-align:left;
font-family:Tahoma;
}
</style>
<style type="text/css">
*{
color:#000000;
font-weight:normal;
font-size:12pt;
text-align:left;
font-family:Tahoma;
text-decoration:none;
}
b{
color:#000000;
font-weight:bold;
font-size:12px;
text-align:left;
font-family:Tahoma;
}
</style>
<style type="text/css">
i, u{
color:#000000;
font-size:12px;
text-align:left;
font-family:Tahoma;
}
</style>
bold: <strong>text</strong>
italic: <em>text</em>
you simply would replace b or i in CSS with strong or em.
The underline tag in XHTML strict is not valid. If you want to use this tag it must be in XHTML transitional or HTML.
