shadowline
ID & Class << Font Style >> Text Style
These elements are very similar to the FONT tag of HTML3.2. Fonts can be specified by type (family), style, size, and weight.


Font Family

font-family specifies the font NAME to use. In HTML3.2, this was known as the FONT FACE. A list of FONTs is specified. The visitor's browser will go down the list and use the first one it recognizes.

Using a Paragraph tag, embedded style example :
<style type="text/css">
<!--
p {font-family: helvetica, impact, sans-serif;}
-->
</style>

This would declare that, in the BODY area, all text within P tags will use this FONT FACE specified. Check your typing on those font names, because spelling counts.

Considering the differences of Windows and Mac users, it's hard to specify one specific FONT that will work, so a good list is best. See that last option of sans-serif ? That isn't an actual FONT, but a generic term for one. If the browser does not recognize the first FONTs, it can use the sans-serif option and choose the closest FONT that it knows with that type of properties. In most cases, that would be Arial.

Here are the other options you can use at the end of your list and the probable outcome :
serif
sans-serif
monospace
Times
Arial or Helvetica
Courier

When using FONT types that consist of two words, quotes must be placed on them so the browser does not read them as separate entries.

<style type="text/css">
<!--
p {font-family: "gill sans", "new baskerville", sans-serif;}
-->
</style>

The above example shows the code for embedded CSS (HEAD code). If you plan to use inline CSS (BODY code), you will have to use single quotes around the FONT names so it will not confuse the browser.

<p style="font-family: 'gill sans', 'new baskerville', sans-serif;">
Some text here
</p>



Font Size

font-size controls the size of the font in terms of POINTS, PIXELS, KEYWORDS, or PERCENTAGES. Try doing that with the old FONT tag. There are a half dozen other ways to declare font sizes, but these are the most common and usable.

Anybody with printed media experience has heard of points. They are a precise measurement very much the same as pixels. Points places an invisible box around the letter and sizes it accordingly. This is the prefered choice because it works best across all supporting browsers.

Setting all the text within P tags to a certain size :
<style type="text/css">
<!--
p {font-size: 14pt;}
-->
</style>

A pixel setting is very similar to the point setting. If you've come this far in HTML coding, you know pixels very well already.

<style type="text/css">
<!--
p {font-size: 14px;}
-->
</style>

Keywords are using regular words instead of a fixed size. There are 7 main keywords that have replaced the original FONT SIZE numbers 1 to 7.

CSS Keywordold FONT number
xx-small
x-small
small
medium
large
x-large
xx-large
1
2
3
4
5
6
7

<style type="text/css">
<!--
p {font-size: medium;}
-->
</style>

Two more keywords called smaller and larger may be used as well. This would affect the text a bit smaller or larger than the current size in use.

Percentages are another form of declaring the font size. Similar to the way SMALLER or LARGER works, the percentage will increase or decrease the specified font according to what is currently being used.

<style type="text/css">
<!--
p {font-size: 200%;}
-->
</style>

The percentage values should work properly in all browsers, but different browsers have a different view on the exact percentage.



Font Style

font-style is used to create italics STYLE letters. That's the slightly slanted to the right, script looking text.

<style type="text/css">
<!--
p {font-style: italic;}
-->
</style>


Font Weight

font-weight controls the boldness or thickness of the text. The values can be set as BOLD, BOLDER, LIGHTER, or a number from 100 to 900 depending on how thick you want the text to be. The 400 setting is a "normal" weight.

<style type="text/css">
<!--
p {font-weight: 800;}
-->
</style>


Grouping

There are two ways to combine the different properties into one group. The first way is to list the full properties and values for each one and have a semi-colon separate the different properties.

<style type="text/css">
<!--
p {font-style: italic;
    font-weight: bold;
    font-size: 14pt;
    font-family: arial, sans-serif;}
-->
</style>

The other method of grouping, is to combine all the values into one FONT property using spaces instead of semi-colons.

<style type="text/css">
<!--
p {font: italic bold 14pt "arial", "sans-serif";}
-->
</style>

Note : Grouping the FONT properties is shaky. IE usually has no problems with grouping. Netscape is picky on the order values are specified or used. Using values specified in the order of the above examples should work in both major browsers.
ID & Class << Font Style >> Text Style
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow