CSS Text Styles

CSS is essential for controlling the visual presentation of HTML elements. One of the key aspects of CSS is styling text. Whether you are designing a website or a web application, effectively managing text appearance can significantly enhance user experience.

CSS Text Properties

CSS text properties allow you to control the appearance of text in your web pages. They cover various aspects such as font, size, color, spacing, alignment, and decoration. Here’s a brief overview of some fundamental CSS text properties:

  • font-family: Specifies the typeface to be used.
  • font-size: Sets the size of the font.
  • font-weight: Defines the thickness of the text.
  • line-height: Controls the space between lines of text.
  • text-align: Aligns the text within its container.
  • text-decoration: Adds decoration like underline, overline, or line-through.
  • text-transform: Controls text capitalization.
  • letter-spacing: Adjusts the space between characters.
  • word-spacing: Adjusts the space between words.

Font Family

The font-family property defines the typeface used for text. You can specify a list of fonts, and the browser will use the first available font.

Syntax

css
Selector {
    font-family: Arial, sans-serif;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            font-family: 'Times New Roman', serif;
        }
    </style>
</head>

<body>
    <p class="para">
        This text is styled with the 
        Times New Roman font.
    </p>
</body>

</html>

Font Size

The font-size property sets the size of the text. You can use units like px, em, rem, %, or keywords like large or small.

Syntax

css
Selector {
      font-size: 24px;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <p class="para">
        This text is 40px in size.
    </p>
</body>

</html>

Font Weight

The font-weight property controls the thickness of the text. Values can be numeric (100 to 900) or keywords like bold, normal, or lighter.

Syntax

css
Selector {
      font-weight: bold;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            font-weight: 700;
        }
    </style>
</head>

<body>
    <p class="para">
        This text is bold with a 
        font weight of 700.
    </p>
</body>

</html>

Line Height

The line-height property sets the distance between lines of text, which can improve readability.

Syntax

css
Selector {
      line-height: 1.5;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            line-height: 1.8;
        }
    </style>
</head>

<body>
    <p class="para">
        This text has a line height of 1.8, 
        making the lines more spaced out.
    </p>
</body>

</html>

Text Align

The text-align property sets the horizontal alignment of text within its container. Common values include left, right, center, and justify.

Syntax

css
Selector {
      text-align: center;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            text-align: right;
        }
    </style>
</head>

<body>
    <p class="para">
        This text is aligned to the right.
    </p>
</body>

</html>

Text Decoration

The text-decoration property adds decorations such as underline, overline, or line-through to text.

Syntax

css
Selector {
      text-decoration: underline;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <p class="para">
        This text has a line-through decoration.
    </p>
</body>

</html>

Text Transform

The text-transform property controls capitalization of text. Values include uppercase, lowercase, capitalize, and none.

Syntax

css
Selector {
      text-transform: uppercase;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            text-transform: capitalize;
        }
    </style>
</head>

<body>
    <p class="para">
        this text will have its first 
        letter of each word capitalized.
    </p>
</body>

</html>

Letter Spacing

The letter-spacing property adjusts the space between characters in text.

Syntax

css
Selector {
      letter-spacing: 2px;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .heading {
            letter-spacing: 3px;
        }
    </style>
</head>

<body>
    <h1 class="heading">
        This heading has extra space
        between letters.
    </h1>
</body>

</html>

Word Spacing

The word-spacing property controls the space between words.

Syntax

css
Selector {
      word-spacing: 5px;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .para {
            word-spacing: 10px;
        }
    </style>
</head>

<body>
    <p class="para">
        This text has increased
        spacing between words.
    </p>
</body>

</html>

CSS

2499

826

Related Articles