Scribd
Upload
12 views30 pages

CSS Styling

The document discusses CSS text formatting and fonts. It covers topics like text styling, fonts, web-safe fonts, custom fonts, and Google fonts. CSS offers properties to control the appearance of text, allowing customization of sizes, weights, colors, alignments and more. Font properties change aspects like font size, family, style, weight, and variant. Web-safe fonts provide consistent rendering, while custom fonts can be loaded from servers using @font-face. Google Fonts is a popular service that provides free open-source fonts.

Uploaded by

zailo perezz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views30 pages

CSS Styling

The document discusses CSS text formatting and fonts. It covers topics like text styling, fonts, web-safe fonts, custom fonts, and Google fonts. CSS offers properties to control the appearance of text, allowing customization of sizes, weights, colors, alignments and more. Font properties change aspects like font size, family, style, weight, and variant. Web-safe fonts provide consistent rendering, while custom fonts can be loaded from servers using @font-face. Google Fonts is a popular service that provides free open-source fonts.

Uploaded by

zailo perezz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

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!

You might also like