In this section, we will explore various CSS properties that allow you to style text on your web pages. Understanding these properties is crucial for creating visually appealing and readable content.

1. Color
2. Font Size
3. Font Weight
4. Font Style
5. Text Align
6. Text Decoration
7. Text Transform
8. Line Height
9. Letter Spacing
10. Word Spacing

The color property sets the color of the text.

• This code sets the text color of all <p> elements to blue.

The font-size property sets the size of the text.

• This code sets the font size of all <h1> elements to 24 pixels.

The font-weight property sets the thickness of the text.

• This code makes all <strong> elements bold.

The font-style property sets the style of the text.

• This code makes all <em> elements italic.

The text-align property sets the horizontal alignment of the text.

• This code centers the text inside all <div> elements.

The text-decoration property sets the decoration of the text (e.g., underline, overline, line-through).

• This code underlines all <a> elements.

The text-transform property controls the capitalization of the text.

• This code transforms all <h2> elements to uppercase.

The line-height property sets the space between lines of text.

• This code sets the line height of all <p> elements to 1.5 times the font size.

The letter-spacing property sets the space between characters.

• This code sets the letter spacing of all <h3> elements to 2 pixels.

The word-spacing property sets the space between words.

• This code sets the word spacing of all <p> elements to 4 pixels.

Create a simple HTML page and use CSS to style the text with the properties discussed.

• The <h1> element is styled with a specific color, font size, centered alignment, and uppercase transformation.
• The <p> elements are styled with a different color, font size, line height, letter spacing, and word spacing.
• The <strong> and <em> elements are styled to be bold and italic, respectively.
• The <a> element is styled with a specific color and underlined text.

• Common Mistake: Forgetting to include units (e.g., px, em) when setting properties like font-size.
  • Tip: Always specify units for properties that require them.
• Common Mistake: Overusing text transformations and decorations, which can make text hard to read.
  • Tip: Use text transformations and decorations sparingly to maintain readability.

In this section, we covered various CSS properties that allow you to style text effectively. Understanding and using these properties will enable you to create visually appealing and readable content. In the next section, we will delve into font properties to further enhance your text styling skills.