CSS for Font and Text
Font and text styling in CSS involves a variety of properties to control the appearance of text. These properties help you adjust the font type, size, weight, alignment, color, and various other text formatting features. Here is a comprehensive list of font and text styling properties with examples:
Font Styling Properties
1. font-family: Specifies the font family for text.
p {
font-family: Arial, sans-serif;
}
2. font-size: Sets the size of the font.
h1 {
font-size: 24px;
}
3. font-style: Sets the style of the font (normal, italic, oblique).
em {
font-style: italic;
}
4. font-weight: Sets the thickness of the font (normal, bold, or numeric value).
strong {
font-weight: bold;
}
5. font-variant: Controls the usage of alternate glyphs (e.g., small-caps).
p {
font-variant: small-caps;
}
6. line-height: Sets the height between lines of text.
p {
line-height: 1.5;
}
7. letter-spacing: Sets the space between characters in a text.
h2 {
letter-spacing: 2px;
}
8. word-spacing: Sets the space between words.
p {
word-spacing: 4px;
}
Text Styling Properties
9. text-align: Sets the horizontal alignment of text (left, right, center, justify).
h4 {
text-align: center;
}
10. text-decoration: Adds decoration to text (underline, overline, line-through, none).
a {
text-decoration: underline;
}
11. text-transform: Controls the capitalization of text (none, capitalize, uppercase, lowercase).
h3 {
text-transform: uppercase;
}
12. text-indent: Indents the first line of a paragraph.
p {
text-indent: 30px;
}
13. white-space: Controls how white space inside an element is handled (normal, nowrap, pre, pre-wrap, pre-line).
pre {
white-space: pre;
}
14. text-shadow: Adds shadow to text.
h1 {
text-shadow: 2px 2px 5px grey;
}
15. color: Sets the color of the text.
p {
color: red;
}
16. direction: Specifies the text direction left to right or right to left(ltr, rtl).
div {
direction: rtl;
}
17. text-overflow: Specifies how overflowed content that is not displayed is signaled to the user (clip, ellipsis).
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
18. vertical-align: Sets the vertical alignment of an element.
img {
vertical-align: middle;
}
19. writing-mode: Specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
p {
writing-mode: vertical-rl;
}
20. font-kerning: Controls the usage of kerning information.
p {
font-kerning: auto;
}
21. font-feature-settings: Allows control over advanced typographic features in OpenType fonts.
p {
font-feature-settings: “liga” 1, “dlig” 1;
}
22. font-variation-settings: Allows control over variable font settings.
p {
font-variation-settings: “wght” 700;
}
By combining these properties, you can have fine-grained control over the appearance and behavior of text on a webpage.
EXAMPLE TO SHOW FONT AND TEXT PROPERTIES
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Font and Text Properties Example</title>
<style>
/* Font Properties */
.font-family {
font-family: ‘Arial’, sans-serif;
}
.font-size {
font-size: 20px;
}
.font-weight {
font-weight: bold;
}
.font-style {
font-style: italic;
}
.font-variant {
font-variant: small-caps;
}
.line-height {
line-height: 1.5;
}
/* Text Properties */
.text-color {
color: darkblue;
}
.text-align {
text-align: center;
}
.text-decoration {
text-decoration: underline;
}
.text-transform {
text-transform: uppercase;
}
.letter-spacing {
letter-spacing: 2px;
}
.word-spacing {
word-spacing: 5px;
}
.text-shadow {
text-shadow: 2px 2px 5px gray;
}
.white-space {
white-space: pre;
}
.text-indent {
text-indent: 50px;
}
.direction {
direction: rtl;
}
</style>
</head>
<body>
<h1>CSS Font and Text Properties Example</h1>
<p class=”font-family”>This paragraph uses the Arial font family.</p>
<p class=”font-size”>This paragraph has a font size of 20px.</p>
<p class=”font-weight”>This paragraph is bold.</p>
<p class=”font-style”>This paragraph is italic.</p>
<p class=”font-variant”>This paragraph uses small caps.</p>
<p class=”line-height”>This paragraph has a line height of 1.5.</p>
<hr>
<p class=”text-color”>This paragraph has dark blue text color.</p>
<p class=”text-align”>This paragraph is centered.</p>
<p class=”text-decoration”>This paragraph is underlined.</p>
<p class=”text-transform”>This paragraph is uppercase.</p>
<p class=”letter-spacing”>This paragraph has 2px letter spacing.</p>
<p class=”word-spacing”>This paragraph has 5px word spacing.</p>
<p class=”text-shadow”>This paragraph has a text shadow.</p>
<p class=”white-space”>This paragraph preserves whitespace.
Here is an example of whitespace preserved.</p>
<p class=”text-indent”>This paragraph is indented by 50px.</p>
<p class=”direction”>This paragraph has right-to-left text direction.</p>
</body>
</html>
OUTPUT
CSS Font and Text Properties Example
This paragraph uses the Arial font family.
This paragraph has a font size of 20px.
This paragraph is bold.
This paragraph is italic.
This paragraph uses small caps.
This paragraph has a line height of 1.5.
This paragraph has dark blue text color.
This paragraph is centered.
This paragraph is underlined.
This paragraph is uppercase.
This paragraph has 2px letter spacing.
This paragraph has 5px word spacing.
This paragraph has a text shadow.
This paragraph preserves whitespace. Here is an example of whitespace preserved.
This paragraph is indented by 50px.
This paragraph has right-to-left text direction.