Current Section: CSS -> Fonts // « Back

Ever wonder how you can get an entire page one color,or have bolded letters a color seperate from the normal font color? I mean there has to be a way without useing the <Font>text</Font> code a million times on one page right? It would just be to much coding and a waste. Lukily 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 how to read the code, * is for plain text without it the code wont work. Similar for Bold text the B stands for bolded text so whenever the page reads a <b> it will know to make the text within that code the color you tell it too.

Next we need to know what color and font size for the page. The code looks like this:

color : #000000;
font-weight : normal;
font-size : 12px;
text-align : left;
font-family : Tahoma;
cursor : nw-resize;

Dont worry I'll explain the entire thing.

The 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.

Font-size is the size of the font. Right now its 12pt font (or px) This you may also change.

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...) you may change this also.

Cursor is the cursor you want for the page. There are many differnent ones(ex. ns-resize, move, wait, help etc...) you can make this whatever you want aswell.

Font-weight will determine whether its bold or normal etc...

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 : 12px;
text-align : left;
font-family : Tahoma;
cursor : nw-resize;
}
</Style>

Now is you wanted this to be for bolded words then you just switch the * for a b it'd look like this:

<Style type="text/css">
b
{
color : #000000;
font-weight : bold;
font-size : 12px;
text-align : left;
font-family : Tahoma;
cursor : nw-resize;
}
</Style>

You can also stick the two together under the same <Style type="text/css"> it can be easier to do that at times really if you are using a lot of CSS.

This ends the tutorial on CSS text, any questions contact me through the contact page under the site navigation.