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
A Practical Guide to Font Styling using CSS
CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc.
Syntax
/* Individual font properties */
selector {
font-family: family-name;
font-size: value;
font-weight: value;
font-style: value;
}
/* Font shorthand property */
selector {
font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;
}
Key Font Properties
| Property | Description |
|---|---|
color |
Changes the color of the text |
font-family |
Sets the font face for an element |
font-size |
Sets the size of the font |
font-style |
Italicizes text (normal, italic, oblique) |
font-weight |
Specifies the boldness of characters |
text-shadow |
Adds shadow to characters |
Example: Font Shorthand Property
The following example demonstrates using the font shorthand property to set multiple font properties at once −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: oblique small-caps bold 1.3em/1.5 cursive;
border: 3px solid lightcyan;
padding: 10px;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>
Two paragraphs with oblique, small-caps, bold cursive font at 1.3em size with light cyan borders appear on the page.
Example: Font Size
To change the font size, use the font-size property in CSS −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 25px;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>
Two paragraphs with 25px font size and green borders appear on the page.
Example: Font Style
To change the font style, use the font-style property. The values can be normal, italic, and oblique −
<!DOCTYPE html>
<html>
<head>
<style>
.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }
p {
border: 3px solid green;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="normal">Normal text style</p>
<p class="italic">Italic text style</p>
<p class="oblique">Oblique text style</p>
</body>
</html>
Three paragraphs showing normal, italic, and oblique text styles with green borders appear on the page.
Example: Text Shadow
The text-shadow property adds shadow effects to text with horizontal offset, vertical offset, blur radius, and color −
<!DOCTYPE html>
<html>
<head>
<style>
.shadow1 {
font-size: 2em;
text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
.shadow2 {
font-size: 1.5em;
text-shadow: -2px 2px 4px blue;
}
.shadow3 {
font-size: 1.8em;
text-shadow: 0px 0px 10px red;
}
</style>
</head>
<body>
<p class="shadow1">Shadow with blur</p>
<p class="shadow2">Blue shadow offset</p>
<p class="shadow3">Red glow effect</p>
</body>
</html>
Three paragraphs with different text shadow effects: a gray blurred shadow, a blue offset shadow, and a red glow effect appear on the page.
Conclusion
CSS font properties provide comprehensive control over text appearance. Use individual properties for specific styling or the font shorthand for efficiency. Text shadows add visual depth and emphasis to your typography.
119 Views
