www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons CSS Working with Fonts Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9

In this lesson we will learn about fonts and how they are applied to HTML using CSS.

CSS 'font-family' property

The CSS property font-family is used to set a prioritized list of fonts to be used to display a given element or web page in a web browser. In case the web browser does not find the first font on the list, the next font on the list is tried until a suitable font is found.

We can categorize fonts in one of the two ways; by their family-names and / or by their generic families. A font family is also known as 'font' e.g. Tahoma, Arial, and Times New Roman etc. On the other hand Generic families can best be defined as groups of family-names with uniformed appearances. An example could be monospace family, where the fonts are characterized by all characters having fixed width.

When we list fonts for your web site in CSS, we start with the most preferred font followed by some alternative font(s). It is a good practice to complete the list with a generic font family, making it sure that at least the page / element is shown using a font of the same family if none of the specified fonts are found.

Here is an example:

h1 {
font-family: arial, "Times New Roman", sans-serif;
}

Heaings of level 1 marked with <h1> will be displayed using the font "Arial". If this font is not found on the user's computer, "Times New Roman " will be used, instead. If both these fonts are not found, a font from the sans-serif family will be used to show the headlines. Also notice that as the font name "Times New Roman" contains spaces, it has been surrounded by the quotation marks.

CSS 'font-style' property

The CSS property font-style defines the way the chosen font is displayed. It can take a value of normal, italic or oblique .

Here is an example:

h1 {
font-family: arial, "Times New Roman", sans-serif;
font-style: italic;
}

CSS 'font-variant' property

The CSS property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

In case we set the font-variant property to small-caps and our chosen font does not support small-caps, the browser is likely to display the text in uppercase, instead.

Here is an example:

h1 {
font-variant: small-caps;
}

CSS 'font-weight' property

The CSS property font-weight is used to describe how bold or "heavy" a font is to be displayed. Normally a font can either be normal or bold. We can also use numbers between 100-900 (in hundreds) to describe the weight of a font.

Here is an example:

p {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}

CSS 'font-size' property

We use the CSS property 'font-size' to set the size of the font.

We can set the size of the font using pixels, percentages, cms, and points etc.

Here is an example:

h1 {
font-size: 50px ;
}
h2 {
font-size: 15pt ;
}
h3 {
font-size: 170% ;
}

CSS 'font' property

Using the CSS font short hand property we can specify all the different font properties in one single property.

Consider the following CSS code:

p {
font-style: italic;
font-weight: bold;
font-size: 50px;
font-family: arial, sans-serif;
}

Using the font property, the above code can be reduced as follows:

p {
font: italic bold 50px arial, sans-serif;
}

Next >>> Lesson No. 6: CSS Working With Text




Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.