@codeswithpankaj

CSS Text

CSS Text Tutorial - codeswithpankaj.com

CSS text properties are used to control the appearance of text in your web pages. This tutorial will cover various text properties including color, alignment, decoration, transformation, and more.

1. Text Color

The color property sets the color of the text. You can use color names, hex values, rgb, rgba, hsl, or hsla values.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Color - codeswithpankaj.com</title>
    <style>
        .text-color-example {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="text-color-example">This text is blue - codeswithpankaj</p>
</body>
</html>

In this example, the text color of the paragraph is set to blue.

2. Text Alignment

The text-align property specifies the horizontal alignment of text in an element. It can take values like left, right, center, and justify.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Alignment - codeswithpankaj.com</title>
    <style>
        .text-align-example {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="text-align-example">This text is centered - codeswithpankaj</h1>
</body>
</html>

Here, the text alignment of the heading is set to center.

3. Text Decoration

The text-decoration property adds decoration to text. It can take values like none, underline, overline, line-through, and blink.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Decoration - codeswithpankaj.com</title>
    <style>
        .text-decoration-example {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class="text-decoration-example">This text is underlined - codeswithpankaj</p>
</body>
</html>

In this example, the text decoration of the paragraph is set to underline.

4. Text Transformation

The text-transform property controls the capitalization of text. It can take values like none, capitalize, uppercase, and lowercase.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Transformation - codeswithpankaj.com</title>
    <style>
        .text-transform-example {
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <p class="text-transform-example">This text is uppercase - codeswithpankaj</p>
</body>
</html>

Here, the text transformation of the paragraph is set to uppercase.

5. Text Indentation

The text-indent property specifies the indentation of the first line of text in a block-level element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Indentation - codeswithpankaj.com</title>
    <style>
        .text-indent-example {
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <p class="text-indent-example">This text has an indentation of 50px on the first line - codeswithpankaj</p>
</body>
</html>

In this example, the first line of the paragraph is indented by 50px.

6. Line Height

The line-height property sets the space between lines of text. It can take unitless values, or values with units (px, em, %, etc.).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Line Height - codeswithpankaj.com</title>
    <style>
        .line-height-example {
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <p class="line-height-example">This text has a line height of 1.5 - codeswithpankaj</p>
</body>
</html>

Here, the line height of the paragraph is set to 1.5 times the font size.

7. Letter Spacing

The letter-spacing property increases or decreases the space between characters in a text.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Letter Spacing - codeswithpankaj.com</title>
    <style>
        .letter-spacing-example {
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
    <p class="letter-spacing-example">This text has a letter spacing of 2px - codeswithpankaj</p>
</body>
</html>

In this example, the letter spacing of the paragraph is set to 2px.

8. Word Spacing

The word-spacing property increases or decreases the space between words in a text.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Word Spacing - codeswithpankaj.com</title>
    <style>
        .word-spacing-example {
            word-spacing: 5px;
        }
    </style>
</head>
<body>
    <p class="word-spacing-example">This text has a word spacing of 5px - codeswithpankaj</p>
</body>
</html>

Here, the word spacing of the paragraph is set to 5px.

9. Text Shadow

The text-shadow property adds shadow to text. It can take values for the horizontal shadow, vertical shadow, blur radius, and color.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Shadow - codeswithpankaj.com</title>
    <style>
        .text-shadow-example {
            text-shadow: 2px 2px 5px grey;
        }
    </style>
</head>
<body>
    <h1 class="text-shadow-example">This text has a shadow - codeswithpankaj</h1>
</body>
</html>

In this example, a grey shadow is applied to the heading with a horizontal offset of 2px, a vertical offset of 2px, and a blur radius of 5px.

This tutorial covers the basics of CSS text properties. For more tutorials and examples, visit codeswithpankaj.com.

PreviousCSS outlineNextCSS Fonts

Last updated