The CSS properties have evolved and have made it possible to be used in a web designer’s style sheets. Below is the list of the commonly used properties and the ways to utilize them.

The Font Properties

Font-Family. This defines the text that should show up in your screens. It is important to remember that if the viewer of your page does not have the font that you are using, then the browsers will most likely guess on the texts written. Instead of being readable, it comes out as having strange appearances. Therefore, it would be best and is highly suggested to use the most typical fonts. This way, any computer viewing your site can read what has been documented.

To make particular font families, you need to design them this way: font-family : arial,geneva,helvetica,sans-serif;. If you have noticed, the family names are written in the way you’d like them to strategically appear. Also, everything is separated by a comma. In defining a generic font family, you need to have this set up: font-family : serif;. The browser permits the most appropriate font that is in the system if you use a generic font family. Examples of which are:
• serif
font-family : serif;
• sans-serif
font-family : sans-serif;
• monospace
font-family : monospace;
• cursive
font-family : cursive;”
• fantasy
font-family : fantasy;

Next is the font-size. It can either be described in exact size, in lengths, in percentages, and in relative sizes. To be able to do this, you need to define particular sizes in the following measurements:
• ems
font-size : 13em;
• pixels
font-size : 13px;
• picas
font-size : 13pc;
• points
font-size : 13pt;
• inches
font-size : 13in;
• centimeters
font-size : 13cm
• milimeters
font-size : 13mm

There are seven standard sizes in HTML and XML documents, you can define your font-size based on those sizes as well (standard text is size medium):
• xx-small
font-size : xx-small;
• x-small
font-size : x-small;
• small
font-size : small;
• medium
font-size : medium;
• large
font-size : large;
• x-large
font-size : x-large;
• xx-large
font-size : xx-large;

To define your font-size as relative to the surrounding text, you can simply say:
font-style - defines whether the font is italic, oblique, or normal.
• italic
font-style : italic;
• oblique
font-style : oblique;
• normal (the default)
font-style : normal;
font-variant - defines whether the font is normal or small-caps.
• small-caps
font-variant : small-caps;
• normal (the default)
font-variant : normal;
font-weight - defines how dark or light the text is.
• bold
font-weight : bold;
• bolder
font-weight : bolder;
• lighter
font-weight : lighter;
• 100
font-weight : 100;
• 200
font-weight : 200;
• 300
font-weight : 300;
• 400
font-weight : 400;
• 500
font-weight : 500;
• 600
font-weight : 600;
• 700
font-weight : 700;
• 800
font-weight : 800;
• 900
font-weight : 900;
• normal (the default)
font-weight : normal;

Tags: CSS Properties: How to Use Them