CSS Text Formatting

and Fonts
List of Topics for CSS

1. CSS Text Styling

2. CSS Fonts
➢ Web-Safe Fonts
➢ Custom Fonts
➢ Google Fonts
 NEXT

Text Styling

Text styling is an important aspect of web design. CSS

offers a wide range of properties and values to control
the appearance of text, allowing you to customize
sizes, weights, colors, alignments, and more. By using
these properties, you can create visually appealing and
engaging text content on your web pages.
PREVIOUS NEXT

Text Styling
Text Appearance
Property Description
color Change the color of the text
text-transform Change the letter cases of the text
text-shadow Adds shadow effect on the text
PREVIOUS NEXT

color
PREVIOUS NEXT
text-transform
PREVIOUS NEXT
text-shadow
PREVIOUS NEXT

Text Alignment
Text Appearance
Property Description

text-align Change the alignment of the text

text-align-last Change the alignment on the last line of the text

PREVIOUS NEXT
text-align
PREVIOUS NEXT
text-align-last
PREVIOUS
Text Formatting NEXT

Text Spacing

Property Description
text-indent Adds an indention on the first line of the text
letter-spacing Changes the spacing between the letters
word-spacing Changes the spacing between the words
line-height Changes the spacing between lines
white-space Indicates the behavior of whitespaces when text overflows
PREVIOUS
text-indent NEXT
PREVIOUS
letter-spacing NEXT
PREVIOUS
word-spacing NEXT
PREVIOUS
line-height NEXT
PREVIOUS
white-space NEXT
PREVIOUS NEXT

Fonts

It is the overall appearance of a digital

and printed text; it has a certain style and
can be changed accordingly.
PREVIOUS NEXT
Fonts
Property Description

font-size Changes the size of the text

font-family Changes the font of the text

font-style Changes the font style of the text

font-weight Changes the thickness of the font

font-variant Indicates a variant of a font

PREVIOUS
font-size NEXT
PREVIOUS
font-family NEXT
PREVIOUS
font-family NEXT
PREVIOUS
font-style NEXT
PREVIOUS
font-variant NEXT
PREVIOUS NEXT

Web-Safe fonts

These fonts ensure consistent rendering

across different platforms, providing a
reliable fallback option if custom fonts
cannot be loaded.

▪ Arial ▪ Georgia
▪ Helvetica ▪ Courier New
▪ Times New Roman ▪ Verdana
PREVIOUS NEXT

Web-Safe fonts
PREVIOUS NEXT

Custom Fonts

This allows you to load font files from

your server and use them in your CSS
rules.

@font-face
PREVIOUS NEXT

Custom Fonts
PREVIOUS NEXT

Google Fonts

It is a popular web font service that

provides a wide range of free and open-
source fonts for use on websites.

https://www.fonts.google.com
PREVIOUS NEXT

Google Fonts
Thank
You!