|
On this page I will go into detail about Font, Font size, weight, color, and text-decoration. Each one is important to understand and extreamly helpful.
|
Fonts
As you know their are many fonts that the programmer can choose from, such as Arial nad Comic Sans, but did
you know that you can tell the CSS to select which ever font the client computer has. For example lets say the programmer sets the font in the CSS to Verdana and the Client computer dose not have that font. What could
happen is the text may not show up or the Client my choose a random font that messes up the site. One way around this is to list fonts inside of the CSS as such: font-family:Verdana, Trebuchet, sans-serf;
With this set up the CSS will see if the Client computer has the first font, reading from left to right. If not then it will go to the next till it gets to the last font. This gives the programmer some control over
what happens if the Client dose not have the inteded font.
|
 |
|
Font Size
Font size in CSS is can be a bit different depending on how you whant to use it. You can use pixels, percents, or em. Pixles arent very hard to figure out, as a reference is think of the h1
tag and its 21px high. Percents are abit different, for example the programmer will not be assigning the percent based off of how large the page is, but rather based off of another font. Which font though?
Well since font can be inherated by a parent, such as the body, the percent will be realitave to the parent element's font size. For example say the font size of the body is 12px and in the p tag the programmer
sets the font to be 150% of that. The font inside of the p tag would be 18px. Finally the programmer has the option of using em, which is scaler, a lot like percents. I think of these roughly the same
as percents, but converted to whole numbers (X100). So 150% is roughly equal to 1.5em if you keep the parent element the same.
There is also one more option for selecting font sizes, kind of like shopting for shirts, the programmer can select: xx-small, s-small, small, medium, large, x-large, xx-large. You will be able
to see the differences on the example page.
Here is what the page looks like.
|
 |
|
Font Weight
Font weight is pretty much the same thing as the strong tag, except that the programmer is given more options. With the font-weight: the programmer has the options of lighter, normal,
bold, and bolder, and each one looks slightly different.
Here is a example page.
|
 |
|
Font Color
Font color as you already know can be any comon color such as: Aqua, Black, Blue, Fuchsia, Grey, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, and Yellow. Font color can also
be a Hexadecimal code. Such as #cococo, which is a shade of grey. Just like before you would place color: [typed color or Hexadecimal code];
Here is a example page.
|
|
|
Text-decoration
Text-decoration allows the programmer to decide wheather or not to have lines or not. The programmer has the options of: none, underline, overline, line-though, and blink.
Here is a example page.
|
|
|
