Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Which property is used as shorthand to specify a number of other font properties in CSS?
The CSS font property serves as a shorthand for specifying multiple font-related properties in a single declaration. Instead of writing separate properties for font-style, font-weight, font-size, line-height, and font-family, you can combine them all using the font property.
Syntax
selector {
font: font-style font-weight font-size/line-height font-family;
}
Values
| Property | Description | Example Values |
|---|---|---|
| font-style | Specifies the style of the font | normal, italic, oblique |
| font-weight | Specifies the weight (boldness) of the font | normal, bold, 100-900 |
| font-size | Specifies the size of the font | px, em, rem, % |
| line-height | Specifies the line height (optional) | normal, numbers, px, em |
| font-family | Specifies the font family | Arial, serif, sans-serif |
Example 1: Using Individual Font Properties
The following example demonstrates customizing fonts using separate CSS properties
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 18px;
font-weight: bold;
font-family: Arial;
font-style: italic;
line-height: 1.5;
color: #333;
padding: 10px;
}
</style>
</head>
<body>
<h3>Using Individual Font Properties</h3>
<p class="text">
This text is styled using separate font properties.
</p>
</body>
</html>
A paragraph with italic, bold, 18px Arial text with 1.5 line-height appears on the page.
Example 2: Using Font Shorthand Property
The following example achieves the same result using the shorthand font property
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font: italic bold 18px/1.5 Arial;
color: #333;
padding: 10px;
}
</style>
</head>
<body>
<h3>Using Font Shorthand Property</h3>
<p class="text">
This text is styled using the font shorthand property.
</p>
</body>
</html>
A paragraph with identical styling to the first example - italic, bold, 18px Arial text with 1.5 line-height appears on the page.
Conclusion
The font shorthand property provides a clean and efficient way to set multiple font properties in a single declaration. This approach reduces code complexity and improves readability while maintaining the same visual results.
Updated on: 2026-03-15T16:51:35+05:30
288 Views
Advertisements