Font style property by using CSS

SQL PHP HTML JavaScript articles and free code

Design of font style property by CSS

Read the basic CSS tutorial

Fonts are important part of our html page. We can manage the style property of our fonts using style sheet. We will use internal style sheet to set the property values of our fonts. We will discuss each font property here and its possible values. At the end you can see the demo and html code of the style sheet used.

Let us start with font type or family by saying what style of font to be used. We can use any supported font. Here is how we will set the font family using CSS.

P { font-family: "New Century Schoolbook", Times, serif }

After this we will try to set the font style by using font-style property. It can take values as normal, italic and oblique

P { font-style: oblique }

Next we will move to set the weight of the font. We can have values
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | bold | bolder | lighter
Here is one example on how to set font-weight

P { font-weight: 800 }

Now we will try to set font size. We can set relative or absolute font size for the text.

P { font-size: 12pt }
P { font-size: x-large }
P { font-size: 60% }

Font variant can be used to display fonts in two options one is normal and other is SMALL-CAPS

P { font-variant: small-caps}

With small-caps all fonts will be displayed in upper case ( capital letters ) and with upper case letter in slightly higher in height.

Now here is the total style code

<style type="text/css">

</style>

Discuss this tutorial at forum

List of HTML Tutorials

CSS: Cascading Style Sheets