Design of font style property by CSS

CSS font code generator
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.
DEMO : Font Style using internal Style
Now here is the total style code
P { font-family: 'New Century Schoolbook', Times, serif ;
 font-style: oblique;
 font-weight: 800 ;
 font-size: 48px ;
 font-variant: small-caps;
CSS code Generator
HTML Link without Underline Border Style using CSS


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer