Introduction of CSS Font Properties

Through CSS you can change the size, style, weight, line-height, etc. of fonts. A separate property has been created for all these changes. Let us know about these properties.

font-family Property

To set the font’s family of any HTML element, you use the font-family property. You give the name of any font family as the value of this property.

The following is a list of some font families that you can use as values.

  • Verdana
  • Arial
  • Courier
  • serif

Let us try to understand the font family property with an example.

<html><head><title>Font Family Property Demo</title><style>p
{ font-family:Arial;
}
</style></head><body><h1>Font Family Example of Experts Tool</h1><p>This font will be shown in Arial in Experts tool. </p></body></html>

font-style Property

With the help of CSS, you use font-style property to change font style. The values ​​of this property can be normal, italic and oblique. The example is given below.

<html><head><title>Font style Property Demo </title><style>h1
{ font-style:italic;
}
</style>
</head><body><h1>This heading will be in italic in Experts Tool.</h1><p>This is an example of font style property and this is a paragraph.</p></body></html>

font-weight property

With this property you can define the weight of the font. This property defines how bold the font will be. The values ​​of this property can be bold, bolder and lighter. You can also define a custom font weight. An example of this is given further.

<html><head><title>font-weight property</title><style>p
{ font-weight:bold;
}
</style>
</head><body><p>This is an example of font weight</p></body></html>

font-size property

Through this property you can change the font size of any HTML element. You can give the value of this property in pixels and also in%. The example is given below.

<html><head><title>font size property demo </title><style>h1
{ font-size:20px;
}
p
{ font-size:12px;
}
</style></head><body><h1> This is heading</h1><p>This is a paragraph</h1></body></html>

Leave a Reply

Your email address will not be published. Required fields are marked *