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.

Font Family

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 }

DEMO: Apply different font family by selection and generate CSS code

Font Colour

P { color:#ff80ff; }

Font Colour using style properties and how to manage

Font Style

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 }

Font Weight

We will 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 }

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% }

Different types of Font Sizes and how to manage

Font variant

We 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.

We can adjust the gap between lines ( line spacing ) by using line-height.
P{ line-height:1.7em}
We can combine all above internal styles in to one declaration and keep it inside the page. Same code we can use for CSS also. Now here is the total style code
<style>
P { font-family: 'New Century Schoolbook', Times, serif ;
 font-style: oblique;
 font-weight: 800 ;
 font-size: 48px ;
 font-variant: small-caps;
}
</style>
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer