CSS Text and Fonts
Text
Text properties in CSS allow us to specify or modify the several text styles like alignment, spacing, decoration, transformation and many more in very simple and effective way. We can set various text property, which are given below-
Text Color:- It is used to specify or set the color of a text by the CSS color property.
h1 {
color: green;
}
Text Alignment:- It is used to specify or set the horizontal alignment of a text by the CSS text-align property. Possible values for text-align properties are left, right, center, justify, and inherit.
h1 {
text-align: center;
}
Text Decoration:- It is used to specify or set or remove the decorations from the text by the CSS text-decoration property. Possible values for text-decoration properties are none, underline, overline, line-through, blink and inherit.
h1 {
text-decoration: underline;
}
Text Transformation:- It is used to specify or set the cases for a text by the CSS text-transform property. Possible values for text-transform properties are none, capitalize, uppercase, lowercase and inherit.
h1 {
text-transform: lowercase;
}
Text Indentation:- It is used to specify or set the indentation of the first line of a text of an element.
p {
text-indent: 100px;
}
Word Spacing:- It is used to specify or set the spacing between the words.
h1 {
word-spacing: 25px;
}
Letter Spacing:- It is used to specify or set the extra spacing between the characters of a text.
h1 {
letter-spacing: 11px;
}
Line Height:- It is used to specify or set the height or leading of a line.
h1 {
line-height: 1.3;
}
Fonts
Font properties in CSS allow us to specify or modify the several font styles like font family, boldness, size, and many more in very simple and effective way. We can set various font property, which are given below-
Font Family:- It is used to specify or set the font family of a text by the CSS font-family property. This property should hold several font names as a fallback system, if the browser does not support the first font, then it tries the next font, and so on. List the font which we want first, and end with a generic font family (i.e. serif, sans-serif, monospace, cursive and fantasy), to let the browser pick a most similar font in the generic family, if no other fonts are available.
h1 {
font-family: "Times New Roman", Times, serif;
}
Font Style:- It is used to specify or set the font style of a text by the CSS font-style property. Possible values for font-style properties are normal, italic and oblique.
h1 {
font-style: normal;
}
Font Size:- It is used to specify or set the font size of a text content of an element by the CSS font-size property. There are various ways to specify the font size values like with keywords, pixels or ems-
| Font Size | Description |
|---|---|
| xx-small | It is used to display the extremely small font size. |
| x-small | It is used to display the extra small font size. |
| small | It is used to display the small font size. |
| medium | It is used to display the medium font size. |
| large | It is used to display the large font size. |
| x-large | It is used to display the extra large font size. |
| xx-large | It is used to display the extremely large font size. |
| smaller | It is used to display comparatively smaller font size. |
| larger | It is used to display comparatively larger font size. |
| size in pixels, ems and percentage (%) | It is used to set font size value in percentage, ems and pixels. |
h1 {
font-size: larger;
}
Font Weight:- It is used to specify or set the font weight of a text by the CSS font-weight property. Possible values for font-weight properties are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.
p {
font-weight: bold;
}
Font Variant:- It allows the text to be displayed in a special small-caps variation by the CSS font-variant property. Possible values for font-variant properties are normal, small-caps and inherit.
p {
font-variant: small-caps;
}