- 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
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.
color − This property is used to change the color of the text.
font-family − This property is used to set the font face for an element.
font-kerning − To make the character spacing uniform and increase readability, the font-kerning property is used. However, this property is font specific.
font-size − The font-size property sets the size of the font.
font-stretch − Some fonts have additional faces like condensed, bold, etc. The font-stretch property is used to specify these.
font-style − To italicize the text by an angle, the font-style property is used.
font-variant − font-variant allows us to specify whether an element should be displayed in small caps or not.
font-weight − The boldness of characters is specified by the font-weight property.
line-height − This property sets the spacing between two lines.
text-decoration − To underline or overline and style it, text-decoration is used.
text-shadow − Like box-shadow, this property adds a shadow to the characters as desired.
Furthermore, there are text layout properties like text-indent, text-overflow, white-space, word-break, direction, hyphens, text-orientation, word-wrap, etc.
Change the Font
Example
Let us see an example wherein the font size, style, etc. are changed using the font property −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: oblique 5deg small-caps bold 1.3em/0.5px cursive;
border: 3px solid lightcyan;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>
Change the Font Size
Example
To change the font size, use the font-size property in CSS. Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 25px;
border: 3px solid green;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>
Change the Font Style
Example
To change the font style, use the font-style property in CSS. The values can be normal, italic, and oblique. Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-style: italic;
border: 3px solid green;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>
Text Shadow
Example
The text-shadow property in CSS is used to set shadow to the text. Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: 1.6em arial;
text-shadow: -3px -12px lightblue;
}
p + p {
font: italic bold 12px/30px menu;
text-shadow: unset;
box-shadow: 0 0 5px 1px black;
}
div {
width: 30%;
font-size: 1.4em;
font-family: cursive;
background-color: tomato;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text</p>
<p>This text is for demo and included here to display different font styles in CSS.</p>
<div>Another text with different font style.</div>
</body>
</html>
Set Horizontal text Shadow
Example
The text-shadow property is used to set the text shadow. One of the property value is the h-shadow that sets the position of the horizontal shadow −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 4px 4px orange;
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
MySQL is the most popular Open Source Relational SQL database management system. MySQL is one of the best RDBMS being used for developing web-based software applications.
</body>
</html>
Set Vertical Text Shadow
Example
The text-shadow property is used to set the text shadow. One of the property value is the v-shadow that sets the position of the vertical shadow −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 4px 6px green;
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
MySQL is the most popular Open Source Relational SQL database management system. MySQL is one of the best RDBMS being used for developing web-based software applications.
</body>
</html>
Set Blur Effect for the Text Shadow
Example
The text-shadow property is used to set the text shadow. One of the property value is the blur-radius that sets the blur radius −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 4px 6px 5px blue;
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
MySQL is the most popular Open Source Relational SQL database management system. MySQL is one of the best RDBMS being used for developing web-based software applications.
</body>
</html>
74 Views
