CSS - Styling Text

Quiz

CSS Styling Text involves modifying the appearance of text content by setting proper color, alignment, letter-spacing, and indention to make it more visually appealing. This chapter demonstrates how to style texts on web pages using CSS properties.

How to Style Text in CSS?

We can style text in the following ways to style texts in CSS.

Change Color: The default color of text on a webpage will be black. You can change this according to your webpage theme, using the color property in CSS.
Set Alignment: You can use the text-align property in CSS to specify the alignment (center, left, right) of text inside a container.
Text Decoration: The text-decoration property in CSS can be used to add effects like underline, overline, or strike-through to texts.
Shadow Effect: If you want to create a shadow around text in your webpage you can use text-shadow property in CSS. This can create a 3D effect or a subtle glow around the text.
Change Font Style: The font-style property allows you to style the text as normal, italic, or oblique.

Properties for Styling Text

The following table lists CSS properties for styling text:

Property	Description
color	Sets the color of the text.
text-align	Sets the alignment of the text.
text-align-last	Sets the alignment of the last line of a block of text.
direction	Sets the direction of the text.
text-indent	Sets the indentation of the first line of the text.
letter-spacing	Specifies the space between the letters of a word.
word-spacing	Specifies the space between the words in a block of text.
white-space	Controls the white space flow inside the text in an element.
text-decoration	A shorthand property for setting the text decoration.
text-decoration-line	It specifies the type of line the text decoration will have.
text-decoration-style	It specifies the type of line drawn as a text decoration such as solid, wavy, dotted, dashed, or double.
text-decoration-color	It sets the color of the text-decoration line.
text-decoration-thickness	It sets the thickness of the text-decoration line.
text-justify	It controls how spaces are distributed between words and characters to align text.
text-transform	Transforms the text in either uppercase, lowercase, or capitalize.
line-height	It controls the amount of space between lines of text within an element.
text-emphasis	Applied emphasis marks to text.
text-shadow	Adds shadow to the text.
line-break	Controls how to set the rule for a line break.
word-break	Controls how to set the rule for a word break.
text-combine-upright	Combines multiple typographic character units into the space of a single typographic character unit.
text-orientation	Sets the orientation of the text characters in a line.
text-underline-offset	Adds special visual effects to the text.
text-overflow	Controls how hidden overflow content is displayed to users.

Setting Text Color in CSS

To set the text color, you can use the color property. The color can be specified with color name, Hexadecimal value, rgb/rgba value, or hsl/hsla value.

Example

In this example, we have set the text color of paragraphs using the color property.

<!DOCTYPE html>
<html>
<head>
    <style>
        .name {
            color: blueviolet;
        }
        .hex {
            color:#ff00ff;
        }
        .rgb {
            color: rgb(255,124,100);
        }
        .rgba {
            color: rgb(255,124,100,0.5);
        }
        .hsl {
            color: hsl(7deg, 98%, 50%);
        }
        .hsla {
            color: hsl(7deg, 98%, 50%, 0.5);
        }
    </style>
</head>
<body>
    <p class="name">
        Color Name: blueviolet;
    </p>

    <p class="hex">
        Hexadecimal value: #ff00ff;
    </p>

    <p class="rgb">
        RGB value: rgb(255, 124, 100);
    </p>

    <p class="rgba">
        RGBA value: rgba(255, 124, 100, 0.5);
    </p>
    <p class="hsl">
        HSL value: hsla(7deg, 98%, 50%);
    </p>
    <p class="hsla">
        HSLA value: hsla(7deg, 98%, 50%, 0.5);
    </p>
</body>

</html>

Setting Text Alignment

The text in a webpage can be aligned horizontally and vertically inside a container. To set the alignment of the text, we use the following CSS properties.

The text-align property specifies the horizontal alignment of text in a container (left, right, center, justify).
The vertical-align property is used to align the text vertically at the top, bottom, baseline, and middle. This property is used with inline elements, inline-block elements, and table cells.

Example

In this example, we have used text-align and vertical-align properties to set the horizontal and vertical alignment of the text.

<!DOCTYPE html>
<html>
<head>
    <style>
        th{
            vertical-align: bottom;
            border: 2px solid; 
            width: 200px; 
            height: 150px;
        }
    </style>
</head>
<body>
   <h2>Text Alignment</h2>
        <p style="text-align: left;">Text Left Alignment.</p>
        <p style="text-align: right;">Text Right Alignment.</p>
        <p style="text-align: center;">Text Center Alignment.</p>

        <table>
            <th>This is vertical alignment</th>
        </table>
</body>
</html>

Aligning the Last Line in CSS

To set the alignment for the last line of a block of text, you can use the text-align-last property. It is useful when text-align: justify; is used to align the last line properly.

Example

In this example, we have used the text-align-last property to align the last line differently.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 300px;
            text-align: justify;
            text-align-last: right;
        }
    </style>
</head>
<body>

    <h2>text-align-last property</h2>
    <p>This is an example of text alignment. The last line of this paragraph will be aligned differently than the rest of the text.</p>

</body>
</html>

Aligning Text with text-justify

The text-justify property specifies the justification method of text when text-align: justify; is applied. The text remains unaffected in modern browsers. Try running the code in Firefox.

Example

In this example, we have used the text-justify property to control text justification.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 300px;
            text-align: justify;
            text-justify: inter-word;
        }
    </style>
</head>
<body>

    <h2>text-justify property</h2>
    <p>This paragraph demonstrates how the text-justify property works. It adjusts the spacing between words.</p>

</body>
</html>

Setting Text Direction in CSS

The text direction refers to the orientation of text characters in a document or element. You can use the direction property to set the text direction. This property accepts two values which are as follows:

ltr (Left-to-Right): It is the default value, used for languages that are written from left to right, like English.
rtl (Right-to-Left): It is used for languages that are written from right to left, such as Arabic or Hebrew. When using rtl, the text will be aligned right by default.

Additionally, CSS provides a shorthand property, unicode-bidi, to control the bidi algorithm, which specifies how characters with different writing directions are displayed when they appear in the same paragraph.

Example

In this example, we have used the direction property to set the text direction of paragraphs.

<!DOCTYPE html>
<html>

<body>
    <p style = "direction: rtl;">
        Right to Left
    </p>

    <p style = "direction: ltr;">
        Left to Right
    </p>
</body>

</html>

Applying Text Decoration in CSS

You can use the text-decoration property for adding extra decoration to the text, such as adding a line (underline, strikethrough, overline), color, style, and thickness to the line.

It is a shorthand property for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.

Syntax

The syntax for the text-decoration property is as follows:

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness | initial | inherit;

Example

In this example, we have used the text-decoration property to apply overline, line-through, and underline styles with different colors, thicknesses, and line types.

<!DOCTYPE html>
<html>

<body>
    <h2>Text Decoration</h2>
    <p style="text-decoration: overline solid red 5px;">
        Overline text decoration.
    </p>
    <p style="text-decoration: line-through solid green 1px;">
        Line-through text decoration.
    </p>
    <p style="text-decoration: underline dashed 2pt blue;">
        Underline text decoration.
    </p>
</body>

</html>

Using CSS text-transform for Text Styling

To change the appearance of text, the text-transform property is used. It transforms the text in various ways such as converting the text to uppercase, or lowercase, capitalizing the first letter of each word, or even capitalizing all letters.

Example

In this example, we have used the text-transform property to transform the text to uppercase, lowercase, and capitalize.

<!DOCTYPE html>
<html>

<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>

<body>
    <h2>Text Transform</h2>
    <p style="text-transform: capitalize;">
        capitalizes the first character of each word.
    </p>

    <p style="text-transform: uppercase;">
        Transforms all text to uppercase.
    </p>

    <p style="text-transform: lowercase;">
        Transforms all text to Lowercase.
    </p>
</body>

</html>

Adding Text Emphasis in CSS

To apply emphasis marks on a block of text, you can use the text-emphasis property. These marks are typically used to highlight specific content or to indicate pronunciation or stress in certain languages.

It is a shorthand property for text-emphasis-style and text-emphasis-color.

Example

In this example, we have used the text-emphasis property to apply emphasis marks to the text.

<!DOCTYPE html>
<html>

<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>

<body>
   <h2>Text Emphasis</h2>
        <p style="text-emphasis: dot;"> 
            The text is emphasized using dot.
        </p>

        <p style="text-emphasis: circle red;">
            The text is emphasized using red circle.
        </p>

        <p style="text-emphasis: triangle;"> 
            The text is emphasized using triangle.
        </p>
</body>

</html>

CSS Text Indentation Property

To add space between the margin and the first line of text, you can use the text-indent property. A proper indentation improves the readability and clarity of text on a page.

Example

In this example, we have used the text-indent property to indent the first line of the text of the paragraphs.

<html>

<body>
    <h2>Text indentation</h2>
    <p style="text-indent: 2cm;">Text indentation: 2 cm.</p>
    <p style="text-indent: 2in;">Text indentation: 2 inches.</p>
    <p style="text-indent: 20%;">Text indentation: 20%.</p>
</body>

</html>

Letter Spacing in CSS

To adjust the space between the letters of a text, you can use the letter-spacing property. The space can be increased or decreased between the letters.

Example

In this example, we have used the letter-spacing property to increase and decrease the space between the letters of the text.

<!DOCTYPE html>
<html>

<body>
    <h2>Letter spacing</h2>
    <p style="letter-spacing: normal;">
        Letter spacing normal.
    </p>
    <p style="letter-spacing: 5px;">
        Letter spacing increased.
    </p>
    <p style="letter-spacing: -1px;">
        Letter spacing decreased.
    </p>
</body>

</html>

Applying word-spacing in CSS

The word-spacing property is used to adjust the space between the words of a text. The space can be increased or decreased between the words.

Example

In this example, we have used the word-spacing property to increase and decrease the space between the words of the text.

<!DOCTYPE html>
<html>

<body>
    <h2>Word spacing</h2>
    <p style="word-spacing: normal;">
        Word spacing normal.
    </p>
    <p style="word-spacing: 100px;">
        Word spacing increased.
    </p>
    <p style="word-spacing: -2px;">
        Word spacing decreased.
    </p>
</body>

</html>

Wrapping Text with white-space Property

The white-space property controls how you can handle the white space inside an element. It allows you to manage the handling of spaces, tabs, and line breaks in the text.

Example

Here is an example of the white-space property using different values to control the white space inside the text.

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 2px solid;
            padding: 5px;
            width: 50%;
        }
    </style>
</head>

<body>
    <h2>White-space property</h2>
    <p style="white-space: normal;">
        This is a paragraph with the white-space property set 
        to normal. The text will wrap when necessary, and 
        extra    spaces and line breaks are    ignored.
    </p>

    <p style="white-space: nowrap;">
        This is a paragraph with the white-space property set
        to nowrap. The text will not wrap to the next line, even 
        if it overflows the container.
    </p>

    <p style="white-space: pre;">
        This is a paragraph with white-space property set to pre.
        The text will respect all   spaces and line breaks. Means,
        the   text will be displayed as it is in     HTML code.
    </p>

    <p style="white-space: pre-wrap;">
        This is a paragraph with the white-space property set to
        pre-wrap. The text will respect all spaces and line breaks,
        but will wrap when necessary.
    </p>

    <p style="white-space: pre-line;">
        This is a paragraph with the white-space property set 
        to pre-line. The text will collapse spaces and wrap when 
        necessary, but will respect line breaks.
    </p>
</body>

</html>

CSS Line-Break Property

To control how line breaks are handled in text, we use the CSS line-break property. This property is useful for handling line breaks in languages like Japanese, Chinese, or Korean. You can use values such as auto, loose, normal, strict, and anywhere with this property.

Example

In this example, we have used the line-break property with different values to control how the text breaks across lines based on language rules.

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 2px solid;
            padding: 5px;
            width: 50%;
        }
    </style>
</head>

<body>
    <h2>Line-break property</h2>
    <p style="line-break: auto;">
        This paragraph uses the line-break property set to auto.
        Line breaking is determined based on the default rules.
    </p>

    <p style="line-break: loose;">
        This paragraph uses the line-break property set to loose.
        Line breaking is done more frequently, typically used in 
        CJK (Chinese, Japanese, Korean) text.
    </p>

    <p style="line-break: normal;">
        This paragraph uses the line-break property set to normal.
        Line breaking follows the standard rules for the language 
        being used.
    </p>

    <p style="line-break: strict;">
        This paragraph uses the line-break property set to strict.
        Line breaking is restricted, typically preventing breaks 
        between characters that are normally kept together.
    </p>
    <p style="line-break: anywhere;">
        This paragraph uses the line-break property set to anywhere.
        Line breaks can happen at any point, even if it means 
        breaking words in unconventional places.
    </p>
</body>

</html>

CSS Word-Break Property

The word-break property controls the behavior of word breaking and word wrapping in text. It handles the words when they are too long to fit within their container. You can use values such as normal, break-all, keep-all, and break-word with this property.

Example

In this example, we have used the word-break property with different values to control how the word breaks to fit their container.

<!DOCTYPE html>
<html>

<body>
    <h2>Word-break property</h2>
    <p style="word-break: normal;">
        This paragraph uses the word-break property set to <strong>normal</strong>. 
        Words will break only at normal word boundaries (such as 
        spaces or hyphens).
    </p>

    <p style="word-break: break-all;">
        This paragraph uses the word-break property set to <strong>break-all</strong>.
        Words will break at any character to prevent overflow, 
        even in the middle of a word.
    </p>

    <p style="word-break: keep-all;">
        This paragraph uses the word-break property set to <strong>keep-all</strong>.
        Words will only break at normal word boundaries, but CJK text 
        characters will not break unless necessary.
    </p>

    <p style="word-break: break-word;">
        This paragraph uses the word-break property set to <strong>break-word</strong>.
        Words will break at normal boundaries or wherever necessary 
        to prevent overflow.
    </p>
</body>

</html>

CSS line-height Property

To specify the height of a line of a text, you can use the CSS line-height property . It controls the spacing between lines.

Example

In this example, we have used the line-height property to increase the space between lines.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 300px;
            line-height: 2;
        }
    </style>
</head>
<body>

    <h2>line-height property</h2>
    <p>This paragraph has a line height of 2, making the text more readable and spaced out.</p>

</body>
</html>

Creating Text Shadows with CSS

The text-shadow property is used to add a shadow effect to the text. It allows you to create a shadow behind the text by specifying the shadow's horizontal and vertical offsets, blur radius, and color.

You can apply multiple shadows by separating each shadow with a comma. The order of the shadows matters, with the first shadow being closest to the text.

Example

In this example, we have used the text-shadow property to apply different shadow effects to the paragraphs, including single and multiple shadows with different offsets, colors, and blur radii.

<!DOCTYPE html>
<html>
<head>
    <style>
        .txt1 {
            text-shadow: 2px 2px 5px grey;
        }
        .txt2 {
            text-shadow: -2px -2px 3px red;
        }
        .txt3 {
            text-shadow: 3px 3px 0px blue, -3px -3px 0px yellow;
        }
    </style>
</head>
<body>
    <h2>Text-shadow property</h2>
    <p class="txt1">
        This text has a grey shadow with a blur radius of 5px.
    </p>

    <p class="txt2">
        This text has a red shadow with a blur radius of 3px 
        and offset to the top-left.
    </p>

    <p class="txt3">
        This text has two shadows: a blue shadow offset to the 
        bottom-right and a yellow shadow offset to the top-left.
    </p>
</body>

</html>

CSS text-orientation Property

To control the text orientation in vertical writing modes, we use the text-orientation property.

Example

In this example, we have used the text-orientation property to rotate the text vertically.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
    </style>
</head>
<body>

    <h2>text-orientation property</h2>
    <p>This text is displayed in a vertical layout using text-orientation.</p>

</body>
</html>

Print Page