CSS font properties.

CSS font properties helps to customize the font.

There are following CSS font properties.

  • Font family.
  • Font style.
  • Font size..
  • Font variant.
  • Font weight.

Font family.

Helps to set the font-family to the specified element contain text.

Example. font-family : Arial;

Font style.

Font style helps to set the style to the specified element contain text.

Font style contain three values.

  • Normal : It is a default value.
  • Italic: Sets font style to Italic.
  • Oblique. It is similar to Italic but not supported to most of the browser. Hence not recommended.

Example: font-style : italic;

Font Size.

Font size helps to set the size to the specified element contain text.

Font size can be set either in px, em or %.

Example : font-size: 20%; 

Font variant.

Lower Case letters can become upper case with small height.

Example : font-variant : small-caps;

Font weight.

Sets the weight of the specified font.

Example. font-weight:bold;

font-weight can contains following values.

  • normal.
  • bold.
  • bolder.
  • lighter.
  • 100, 200, 300 etc.
  • initial
  • inherited

font properties example.

<html>
<head>
<style>
h1#family
{
font-family : Arial;
}
h1#style
{
font-style : italic;
}
p#size
{
font-size: 20px;
}
h2#variant
{
font-variant : small-caps;
}
p#weight
{
font-weight:bold;
}
p#allin1
{
font: small-caps 40px Arial bold italic;
}

</style>
</head>

<body>
<h1 id=”family”>Font family is Arial.</h1>
<h1 id=”style”>Italic style</h1>
<h2 id=”variant”>Small-Caps variant example</h2>
<p id=”size”>font size example.</p>
<p id=”weight”>font weight example</p>
<p id=”allin1″>All properties in one</p>
</body>
</html>

CSS font properties

Comments

comments