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
How to set all the font properties in one declaration using CSS?
CSS provides a shorthand property called font that allows you to set multiple font properties in a single declaration. This property combines font-style, font-variant, font-weight, font-size, line-height, and font-family into one convenient statement.
Syntax
selector {
font: font-style font-variant font-weight font-size/line-height font-family;
}
Property Values
| Property | Values | Required |
|---|---|---|
font-style |
normal | italic | oblique | Optional |
font-variant |
normal | small-caps | Optional |
font-weight |
normal | bold | 100-900 | Optional |
font-size |
px | em | rem | % | Required |
line-height |
normal | number | length | Optional |
font-family |
font names or generic families | Required |
Example 1: Basic Font Shorthand
The following example demonstrates setting multiple font properties using the font shorthand
<!DOCTYPE html>
<html>
<head>
<style>
.text-example {
font: italic small-caps bold 18px/1.6 Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="text-example">
This text demonstrates the font shorthand property with italic style, small-caps variant, bold weight, 18px size, 1.6 line height, and Arial font family.
</div>
</body>
</html>
Text appears in italic style, with small capital letters, bold weight, 18px font size, increased line spacing, and Arial font family on a light gray background.
Example 2: Multiple Elements with Different Font Properties
This example shows how to apply different font shorthand properties to various HTML elements
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font: normal normal bold 32px/1.4 "Georgia", serif;
color: #333;
}
h2 {
font: italic normal 600 24px/1.5 "Helvetica", sans-serif;
color: #666;
}
p {
font: normal normal 400 16px/1.6 "Arial", sans-serif;
color: #444;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading Example</h2>
<p>This is a paragraph demonstrating different font properties applied using the CSS font shorthand property. Each element has its own unique styling.</p>
</body>
</html>
A page displays with a large bold Georgia heading, an italic Helvetica subheading, and regular Arial paragraph text, each with different font sizes and line heights.
Key Points
font-size and font-family are required values in the font shorthand
line-height must be preceded by a forward slash (/) when specified
Optional properties can be omitted and will use default values
The order of properties in the shorthand must be maintained
Conclusion
The CSS font shorthand property provides an efficient way to set multiple font properties in a single declaration. It reduces code length and improves maintainability while ensuring consistent typography across your website.
2K+ Views
