Font 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:

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: Times
• sans-serif: Arial or Helvetica
• monospace: 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.

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.

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 preferred choice because it works best across all supporting browsers.

Setting all the text within P tags to a certain size:

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.

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.

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.

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.

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.

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.

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