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
Create a small-caps effect for CSS
To create a small-caps effect in CSS, use the font-variant property with the value small-caps. This transforms lowercase letters into smaller uppercase letters while keeping original uppercase letters at their normal size.
Syntax
font-variant: small-caps;
Example
Here's how to apply the small-caps effect to text:
<html>
<head>
<style>
.small-caps {
font-variant: small-caps;
font-size: 18px;
}
.normal {
font-size: 18px;
}
</style>
</head>
<body>
<p class="normal">Normal text: Asia, Antarctica, Africa are continents</p>
<p class="small-caps">Small-caps text: Asia, Antarctica, Africa are continents</p>
</body>
</html>
Inline Style Method
You can also apply small-caps directly using inline styles:
<html>
<body>
<p style="font-variant: small-caps;">
This text will appear in small capitals
</p>
</body>
</html>
Font-Variant Values
The font-variant property accepts several values:
| Value | Effect |
|---|---|
normal |
Default text appearance |
small-caps |
Lowercase letters as smaller capitals |
inherit |
Inherits from parent element |
Key Points
- Small-caps affects only lowercase letters
- Uppercase letters remain at normal size
- Numbers and punctuation are unaffected
- Works with all font families
Conclusion
The font-variant: small-caps property provides an elegant way to emphasize text by converting lowercase letters to smaller capitals. It's commonly used for headings, abbreviations, and stylistic text effects.
Updated on: 2026-03-15T23:18:59+05:30
565 Views
Advertisements