Wednesday 15 April 2015

, , ,

CSS Font

No comments  
The CSS Font property defines the font family, boldness, size and style of the text

Font

The font property is used to set all the font properties in one declaration. The font properties are set in the order of "font-style, font-variant, font-weight, font-size, font-family."

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.html_font {font:"italic bold 15px "Georgia, Serif;}
</style>
</head>

<body>
<p class="html_font">Hyper Text Markup Language</p>
</body>

</html>

Font Family

The font family of a text is set with the font-family property. The font-family property should contain several font names, so that the next font will be displayed if the first font is not present. If the names of the font is more than one word, then it should be contained in a pair of double quotes like "Times New Roman". If there are more than one font, then it should be separated by commas.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.html_fontfamily {font-family:"Times New Roman", Times, Serif;}
p.css_fontfamily {font-family:Arial, Helvetica, sans-serif;}
</style>
</head>

<body>
<p class="html_fontfamily">Hyper Text Markup Language</p>
<p class="css_fontfamily">Cascading Style Sheets</p>
</body>

</html>

Font Size

The font-size property sets the size of the text. Managing the text size is important, but it should not be used to make the text look like heading or so. The font-size value can be absolute or relative size. Font size can be denoted in percentage, pixels, and in emphemeral unit (em).

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.html_size {font-size:90%;}
p.css_size {font-size:10px;}
p.javascript_size (font-size:1.5em;)
</style>
</head>

<body>
<p class="html_size">Hyper Text Markup Language</p>
<p class="css_size">Cascading Style Sheets</p>
<p class="javascript_size">JavaScript</p>
</body>

</html>

Font Style

The font-style property is commonly used to style text. This property has the following values:
  • normal
  • italic
  • oblique
For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.html_style {font-style:normal;}
p.css_style {font-style:italic;}
p.javascript_style {font-style:oblique;}
</style>
</head>

<body>
<p class="html_style">Hyper Text Markup Language</p>
<p class="css_style">Cascading Style Sheets</p>
<p class="javascript_style">JavaScript</p>
</body>

</html>

Font Variant

The font-variant property is used to display the text into a small-caps form. In the small-caps font, all lowercase characters are transformed into upper characters, but will be somewhat smaller in size.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.html_variant {font-variant:normal;}
p.css_variant {font-variant:small-caps;}
</style>
</head>

<body>
<p class="html_variant">Hyper Text Markup Language</p>
<p class="css_variant">Cascading Style Sheets</p>
</body>

</html>

Font Weight

The font-weight property is used to make the text thick or thin.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.html_weight {font-weight:normal;}
p.css_weight {font-weight:lighter;}
p.javacript_weight {font-weight:bolder;}
p.jquery_weight {font-weight:100;}
</style>
</head>

<body>
<p class="html_weight">Hyper Text Markup Language</p>
<p class="css_weight">Cascading Style Sheets</p>
<p class="javascript_weight">JavaScript</p>
<p class="jquery_weight">jQuery</p>
</body>

</html>

0 comments:

Post a Comment