Breaking News

css Load More



Wednesday, 10 July 2013

CSS: CSS Font - Learn CSS for Free and Fun


What we can do with CSS Font?

 We can set the font of a text
 We can set a paragraph font using the "caption" value
 We can set the size of the font
 We can set the style of the font
 We can set the variant of the font
 We can set the boldness of the font


How CSS Font is used?

Syntax: tag1 {font: < font style> || < font-variant> || < font size> || < font-family>;}

Example: font: italic small-caps 12px Arial;

The CSS font is used to set the font of the text, and the paragraph font can be set by using the
“caption” value. It helps to set the style, variant and size of the font. The boldness of the font
can be set by CSS font. The font in the webpage varies in color, style, size and others using
CSS.

The CSS can set the font of a text by adding the syntax

<style type="text/css">
h3 {font-family: times;}
p {font-family: courier;}
p.sans-serif {font-family: sans-serif;}
</style>

To set the paragraph font by using the “caption” value, the following syntax is used

<html>
<body>
<p>This is a normal paragraph</p>
<p style="font: caption">This is a paragraph with a "caption" font</p>
</body>
</html>

The size and style of the font is set by the help of the following syntaxes respectively

<style type="text/css">
h1 {font-size: 150%;}
h2 {font-size: 130%;}
p {font-size: 100%;}
</style>

and

<style type="text/css">
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
</style>

To set the variant of the font, the syntax used is

<style type="text/css">
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
</style>

CSS font can also set the boldness of the font, the syntax used is

<style type="text/css">
p.normal {font-weight: normal;}
p.thick {font-weight: bold;}
p.thicker {font-weight: 900;}
</style>
Share This
Blogger
Facebook
Disqus

comments powered by Disqus

No comments:

Post a Comment

Subscribe
Labels
Popular Posts

Subscribe Via Email

About Us

Advertisment

Like Us

© tryiblog All rights reserved | Designed By Seo Blogger Templates