CSS Text

Introduction

CSS provides powerful tools to control the appearance of text on a webpage. From choosing the right typeface to adjusting spacing and applying decorative effects, understanding CSS text properties can significantly enhance the readability and aesthetics of your design. In this lesson, we will explore different ways to style text using CSS.

Choosing the Right Typeface

Serif vs. Sans-Serif

• Serif fonts have small decorative strokes at the ends of letters. Examples: Georgia, Times New Roman.
• Sans-serif fonts have clean, straight edges, making them ideal for digital screens. Examples: Arial, Helvetica.

Monospace, Cursive, and Fantasy Fonts

• Monospace: Each character takes up the same amount of space (e.g., Courier New, Consolas).
• Cursive: Resembles handwriting (e.g., Comic Sans MS, Monotype Corsiva).
• Fantasy: Highly decorative and mainly used for titles (e.g., Impact, Haettenschweiler).

Specifying Typefaces with font-family

CSS allows you to define the typeface of an element using the font-family property. Since not all fonts are available on every user’s device, it’s best practice to specify multiple fallback fonts:

body {
    font-family: Arial, Helvetica, sans-serif;
}

This ensures that if the first choice is unavailable, the browser will use the next available option.

Controlling Font Size

CSS provides several ways to define text size:

• Pixels (px): Fixed size (e.g., 16px).
• Percentage (%): Relative to the default browser font size (e.g., 100%).
• EM (em): Relative to the parent element’s font size (e.g., 1.5em).
• REM (rem): Relative to the root element’s font size (e.g., 2rem).

Example:

p {
    font-size: 18px;
}

Making Text Bold or Italic

font-weight

The font-weight property controls the boldness of text:

h1 {
    font-weight: bold; /* or numeric values like 700 */
}

font-style

Use font-style to make text italic:

p {
    font-style: italic;
}

Text Transformation and Decoration

text-transform

Use this property to change the capitalization of text:

h2 {
    text-transform: uppercase;
}

text-decoration

Controls underlining, overlining, or striking through text:

a {
    text-decoration: none;
}

Adjusting Spacing

line-height

Controls the space between lines:

p {
    line-height: 1.5;
}

letter-spacing and word-spacing

Adjusts spacing between letters and words:

h1 {
    letter-spacing: 2px;
    word-spacing: 5px;
}

text-indent

Indents the first line of a paragraph:

p {
    text-indent: 20px;
}

Aligning and Styling Text Shadows

text-align

Aligns text to left, right, center, or justify:

h1 {
    text-align: center;
}

text-shadow

Creates a shadow effect:

h2 {
    text-shadow: 2px 2px 5px gray;
}

Enhancing Interaction with Pseudo-Elements and Classes

Pseudo-Elements

• ::first-letter: Styles the first letter of an element.
• ::first-line: Styles the first line of an element.

p::first-letter {
    font-size: 24px;
    font-weight: bold;
}

Pseudo-Classes

Modify styles when a user interacts with elements:

• :hover – When a user hovers over a link.
• :focus – When an input field is selected.
• :active – When an element is clicked.

a:hover {
    color: red;
}

a:focus {
    border: 2px solid red;
}

a:active {
   color: purple;
}

Summary

CSS provides extensive options for text styling. By mastering properties like font-family, font-size, line-height, text-align, and text-shadow, you can create visually appealing and readable web pages. Using pseudo-elements and pseudo-classes can further enhance user interaction.