a video guide to CSS Typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

FAQs

about CSS text and font properties to style typography

What is the difference between font-weight and font-size in CSS?

Font-weight determines the thickness of the characters in a font family, while font-size sets the size of the characters. For example, font-weight: bold will make the characters in a font family appear thicker then a font-weight:light, while font-size: 16px will set the size of the characters to 16 pixels.

What is the difference between font-family and font-style in CSS?

Font-family specifies the font family to be used for an element, while font-style sets the style of the font. For example, font-family: Arial will use the Arial font family for an element, while font-style: italic will make the characters in the font appear italicized.

Can I use custom fonts in CSS?

Yes, you can use custom fonts in CSS by using the @font-face rule. This rule specifies the font files to be used for a custom font and allows you to use the font in your CSS styles.

How do I change the color of text in CSS?

To change the color of text in CSS, use the color property. Set the value of color to the desired color, such as color: red for red text or color: #000000 for black text.

What is the difference between text-transform and text-decoration in CSS?

Text-transform specifies how the text should be transformed, such as making all characters uppercase or lowercase, while text-decoration specifies how the text should be decorated, such as underlining or striking through the text. For example, text-transform: uppercase will make all characters in the text uppercase, while text-decoration: underline will add an underline to the text.

Copyright 2023