In an HTML document, we can style text using various CSS properties. We will learn about text alignment, style changes, transformation, spacing, and shadowing. Every block-level HTML element by default takes up the entire available width (extends left and right); however, if we set width and height, we prevent the element from stretching to the edges.
| Property | Example | Description |
|---|---|---|
| Color and Fonts | ||
color | color: #333; |
Sets the text color |
font-family | font-family: Arial, sans-serif; |
Specifies the font of the text |
font-size | font-size: 16px; |
Specifies the font size |
font-style | font-style: italic; |
Specifies the font style (normal, italic, oblique) |
font-weight | font-weight: bold; |
Specifies the font weight (normal, bold, 100-900) |
font | font: 16px Arial; |
Shorthand syntax for all font properties |
| Alignment | ||
text-align | text-align: center; |
Specifies text alignment (left, right, center, justify) |
text-align-last | text-align-last: right; |
Specifies alignment of the last line of a paragraph |
vertical-align | vertical-align: middle; |
Specifies vertical alignment of inline elements |
text-indent | text-indent: 20px; |
Specifies the indentation of the first line of text |
| Spacing | ||
line-height | line-height: 1.6; |
Specifies vertical spacing between lines |
letter-spacing | letter-spacing: 2px; |
Specifies spacing between characters |
word-spacing | word-spacing: 5px; |
Specifies spacing between words |
| Decoration and Transformation | ||
text-decoration | text-decoration: underline; |
Specifies text decoration (underline, overline, line-through) |
text-transform | text-transform: uppercase; |
Transforms letters (uppercase, lowercase, capitalize) |
text-shadow | text-shadow: 2px 2px 4px #000; |
Adds a shadow to the text |
| Breaks and Overflow | ||
text-overflow | text-overflow: ellipsis; |
Specifies how to mark clipped content (clip, ellipsis) |
word-break | word-break: break-all; |
Specifies word break rules at line edges |
overflow-wrap | overflow-wrap: break-word; |
Allows breaking long words to the next line |
clear | clear: both; |
Property for positioning elements around floating elements |
CSS fonts determine the weight, size, and style of text. Choosing the right font greatly affects how readers experience a website. The right font can create a strong identity for your website (whether it is a store, company presentation, blog, etc.). Using a readable font is important, as fonts add value to your text.
It is also important to choose the correct text color and size. On the web, it is not recommended to use multiple different fonts simultaneously; we can use one font for headings and another for paragraphs. Why specify multiple fonts? If the browser does not support the first font, it tries the next one in the list. Today, due to widespread support for modern fonts, this is less critical, but it remains a good practice.
| Property | Example | Description |
|---|---|---|
| Basic Font Properties | ||
font-family | font-family: Arial, sans-serif; |
Specifies the font and fallback fonts |
font-size | font-size: 16px; |
Specifies the font size (px, em, rem, %) |
font-style | font-style: italic; |
Specifies the font style (normal, italic, oblique) |
font-weight | font-weight: bold; |
Specifies the font weight (normal, bold, 100-900) |
font-variant | font-variant: small-caps; |
Specifies the font variant (normal, small-caps, all-small-caps) |
font | font: italic bold 16px Arial; |
Shorthand syntax for all font properties |
| External Fonts | ||
@import | @import url("https://fonts.googleapis.com/css2?family=Roboto"); |
Imports an external font (e.g., Google Fonts) |
@font-face | @font-face { font-family: "MyFont"; src: url("font.woff2"); } |
Defines a custom font with a local file |
| Colors and Backgrounds | ||
color | color: #333; | Specifies the text color |
background-color | background-color: #f0f0f0; |
Specifies the background color of the text |
| Hover Effects | ||
:hover | a:hover { color: red; font-weight: bold; } |
Changes properties on mouse hover |
