- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Which property is used as shorthand to specify a number of other font properties in CSS?
Developers can customize the font of the webpage using various CSS properties. For example, the ‘font-size’ property is used to specify the font size, and the ‘font-weight’ CSS property is used to specify the font weight of the text. Furthermore, there are lots of other CSS properties which we can use to customize the fonts.
The ‘font’ CSS property can be used as a shorthand of all properties to customize the font.
Syntax
Users can follow the syntax below to use the ‘font’ shorthand CSS property to customize the web page's font.
font: font-style font-weight font-size/line-height font-family;
Values
font-style – It specifies the style of the font, such as italic, underline, etc.
font-weight – It specifies the font weight. It can take ‘bold’, ‘normal’, numbers, etc.
font-size – It is used to specify the size of the font.
line-height – It specifies the line height of the text.
font-family – It specifies the font family.
Example
In the example below, HTML <p> element contains some text which we have customized using the various CSS properties. We have used the ‘font-size’ CSS property to specify the size of the font, the ‘font-weight’ CSS property to specify the font weight, ‘font-family’ to specify the font type, ‘font-style’ to specify the font style, and ‘line-height’ property to specify the line height of the text.
In the output, users can observe the customized font.
<html>
<head>
<style>
.text {
font-size: 13px;
font-weight: bold;
font-family: Arial;
font-style: italic;
line-height: 3.6;
width: 100px;
}
</style>
</head>
<body>
<h3> Using the different <i> font properties </i> to customize the fonts in CSS </h3>
<p class = "text">
This font is customized with various CSS properties.
</p>
</body>
</html>
Example
In the example below, we have used the single ‘font’ CSS property to customize the fonts instead of using the 5 various properties like the above example.
In the output, users can observe that it gives the font the same style as the first example.
<html>
<head>
<style>
.text {
font: italic 800 1.2rem/2.5 Arial;
width: 100px;
}
</style>
</head>
<body>
<h2> Using the font CSS property to customize the fonts in CSS </h2>
<p class = "text">
This font is customized with the CSS 'font' property.
</p>
</body>
</html>
Conclusion
Users learned to use the shorthand ‘font’ CSS property instead of using the number of CSS properties to customize the fonts. Also, it is a good practice to use the shorthand CSS properties to increase the readability and decrease the complexity of the code.
94 Views
