CSS - Text

A text refers to a piece of written or printed information in the form of words or characters that can be read and understood. Texts can include content such as books, articles, emails, messages, web pages, etc.

Styling a text involves modifying its appearance to make it more visually appealing or to convey a particular message. This chapter demonstrates how to manipulate text using CSS properties.

There are several ways to style text. Following properties provided by CSS can be used for the styling purpose:

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 of an element.
text-indent: Sets the indentation of the first line of the text.
letter-spacing: Specifies the space between the letters or characters that make up a word or text.
word-spacing: Specifies the space between the words in a text.
white-space: Controls the white space flow inside the text in an element.
text-decoration: Adds an underline, overline, and strikethrough over a piece of text.
text-decoration-skip: Determines what part of the content of the element, where text decoration is affecting, needs to be skipped.
text-decoration-skip-ink: Specifies how the overline and underline text decoration lines are drawn around glyph ascenders and descenders.
text-transform: Converts text to uppercase or lowercase letters.
text-emphasis: Applies emphasis marks to text (except spaces and control characters).
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.

CSS Text - Text Color

Altering the color of the text can add visual interest or align with a specific design scheme.

The color property is used to set the color of the text. The possible values for this property are as follows:

Color Name: Example = red, blue, green.
Hexadecimal value: Example = #ff00ff.
RGB value: Example = rgb(125, 255, 0).

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Color</h2>
      <p style = "color: blueviolet;">
         Color Name
      </p>
      <p style = "color:#ff00ff;">
         Hexadecimal value
      </p>
      <p style = "color: rgb(255,124,100);">
         RGB value
      </p>
</body>
</html>

CSS Text - Text Alignment

The position or placement of text on a page is called its alignment. The text is aligned based on the left and right margins of the page.

The CSS property that defines the alignment of the text is text-align. It sets the horizontal alignment of the text.

Following are the possible values that this property can hold:

start: Same as left, if direction is LTR and right if direction is RTL.
end: Same as right, if direction is LTR and left if direction is RTL.
left: Aligned with the left-margin.
right: Aligned with the right-margin.
center: Aligned at the center of the page.
justify: Aligned with both the margins.
justify-all: Same as justify, making the last line justified as well.
match-parent: Similar to inherit. Values of start and right taken from parent's value and replaced by left and right.

When the direction is ltr, the default alignment is left-aligned and when the direction is rtl, the default alignment is right-aligned.

Here is an example:

<html>
<head>
</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>
      <p style="text-align: justify; border: 2px solid red; width: 200px; height: 100px;">
         Text Justify Alignment. This alignment aligns the text based on both the margins, left and right.
      </p>
</body>
</html>

CSS Text - Vertical Alignment

The vertical-align property is used to align the text vertically in an inline, inline-block and a table cell.

The vertical-align property can have one of the following values:

baseline: Baseline of the element is aligned with the baseline of the parent element.
sub: Baseline of the element is lowered to the point appropriate for subscripted text.
super: Baseline of the element is raised to the point appropriate for superscripted text.
top: Top of the element's box is aligned with the top of the line box, in the context of inline content, or with the top of the table cell in the context of tables.
text-top: Top of the element's box is aligned with the top of the highest inline box in the line.
middle: Baseline of the element is aligned with the point defined by the baseline of the parent element plus half the x-height of the parent element's font, in the context of inline content.
bottom: Bottom of the element's box is aligned with the bottom of the line box, in the context of inline content, or with the bottom of the table cell in the context of tables.
text-bottom: Bottom of the element's box is aligned with the bottom of the lowest inline box in the line.
percentage: Baseline of the element is raised or lowered by the given percentage of the value for the property line-height.
length: Baseline of the element is raised or lowered by the given length value. Negative length values are permitted for this property. A length value of 0 for this property has the same effect as the value baseline.

Here is an example:

<html>
<head>
<style>
   table,td {height:100px; width:400px; border:1px solid red;}
</style>
</head>
<body>
   <table>
   <tr>
      <td style="vertical-align: baseline">baseline</td>
      <td style="vertical-align: top">top</td>
      <td style="vertical-align: middle">middle</td>
      <td style="vertical-align: bottom">bottom</td>
      <td>
         <p>
            No vertical alignment
         </p>
      </td>
   </tr>
   </table>
   <p>
   top:         <img style="vertical-align: top" src="images/smiley.png" alt="star"/>
   middle:      <img style="vertical-align: middle" src="images/smiley.png" alt="star"/>
   bottom:      <img style="vertical-align: bottom" src="images/smiley.png" alt="star"/>
   super:       <img style="vertical-align: super" src="images/smiley.png" alt="star"/>
   sub:         <img style="vertical-align: sub" src="images/smiley.png" alt="star"/>
   </p>

   <p>
   text-top:    <img style="vertical-align: text-top" src="images/smiley.png" alt="star"/>
   text-bottom: <img style="vertical-align: text-bottom" src="images/smiley.png" alt="star"/>
   0.2em:       <img style="vertical-align: 0.3em" src="images/smiley.png" alt="star"/>
   -1em:        <img style="vertical-align: -2em" src="images/smiley.png" alt="star"/>
   20%:         <img style="vertical-align: 30%" src="images/smiley.png" alt="star"/>
   -100%:       <img style="vertical-align: -100%" src="images/smiley.png" alt="star"/>
   </p>
</body>
</html>

CSS Text - Direction

Text direction refers to the orientation of text characters within a document or element. It determines whether text should be displayed from left to right (LTR) or right to left (RTL) based on the writing system used.

In CSS, you can set the text direction using the direction property. The direction property accepts two main values:

LTR (Left-to-Right): Default value, used for languages that are written from left to right, like English. You don't need to specify this value explicitly unless you want to override an inherited right-to-left direction.
RTL (Right-to-Left): Used for languages that are written from right to left, such as Arabic or Hebrew. When using rtl, 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. The most common value for unicode-bidi is normal, which allows the browser to handle text direction automatically.

Here is an example:

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

CSS Text - With unicode-bidi

Let us see an example for usage of unicode-bidi:

<html>
<head>
<style>
   p.example {
      direction: rtl;
      unicode-bidi: bidi-override;
   }
</style>
</head>
<body>
   <h2>Text Direction</h2>
      <p>Check for the text direction.</p>
      <p class="example">Check for the text direction.</p>
</body>
</html>

CSS Text - Text Decoration

The property text-decoration helps in adding extra decoration to the text, such as, adding a line (underline, strikethrough, overline) and color, style and thickness to the line.

It is a shorthand property to the following properties:

text-decoration-line: Sets the type of decoration line (underline, strikethrough or overline).
text-decoration-color: Sets the color to the text decoration.
text-decoration-style: Sets the style to the text decoration (dotted, dashed, solid, wavy, double, etc.)
text-decoration-thickness: Sets the thickness to the text decoration.

Here is an example:

<html>
<head>
</head>
<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>

CSS Text - Text Decoration Skip

The text-decoration-skip property determines what part of the content of the element, where text decoration is affecting, needs to be skipped.

The text-decoration-skip property can have following values:

none: Skips nothing and text decoration is applied for all the text content.
objects: Skips the whole margin box of the element,such as for an image or inline-block.
spaces: Skips all spacing.
leading-spaces: Same as spaces, skipping only leading spaces.
trailing-spaces: Same as spaces, skipping only trailing spaces.
edges: Edges such as start and end of text insets slightly. Separate underlines for adjacent elements.
box-decoration: Skips the text decoration over margin, border and padding areas of a box.
initial: Sets the text-decoration-skip value to its default value (none).
inherit: Inherits the text-decoration-skip value from its parent element.
unset: Removes any previously set text-decoration-skip value.

This property is supported only on Safari as of now.

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Decoration Skip</h2>
      <p style="font-size:3em; text-decoration: underline solid red 5px; text-decoration-skip: edges;">Observe the edges of the line.</p>
      <p style="font-size:3em; text-decoration: underline solid green 5px; text-decoration-skip: spaces;">Its text decoration skip spaces.</p>
</body>
</html>

CSS Text - Text Decoration Skip Ink

The text-decoration-skip-ink property specifies how the overline and underline text decoration lines are drawn around glyph or character ascenders and descenders.

The text-decoration-skip-ink property can have following values:

none: Skips nothing and text decoration is applied for all the text content.
auto: Skips the whole margin box of the element,such as for an image or inline-block.
all: Skips all spacing. (Supported only on Firefox and Safari)

In the following example observe how the descenders of letters (p,g) and ascender (h) get affected with this property:

<html>
<head>
</head>
<body>
   <h2>Text Decoration Skip Ink</h2>
      <p style="font-size:3em; text-decoration: underline solid red 5px; text-decoration-skip-ink: auto;">paragraph.</p>
      <p style="font-size:3em; text-decoration: underline solid green 5px; text-decoration-skip-ink: none;">paragraph.</p>
</body>
</html>

CSS Text - Text Transform

The text-transform property is used to change the appearance of text by transforming it in various ways. It can be used to convert text to uppercase, lowercase, capitalize the first letter of each word, or even capitalize all letters.

The text-transform property can have one of the following values:

lowercase: Transforms all text to lowercase.
uppercase: Transforms all text to uppercase.
capitalize: Capitalizes the first character of each word.
none: No text transformation is applied.
full-width: Transforms all characters to their full-width variant.
full-size-kana: Transforms all the small Kana characters to full-size Kana characters. This is specifically used for <ruby> annotation text.
initial: Sets the text-transform value to its default value (none).
inherit: Inherits the text-transform value from its parent element.
unset: Removes any previously set text-transform value.

It is important to note that text-transform affects the visual rendering of text without altering the actual HTML content.

Here is an example:

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px;}
   span {text-transform: full-width;}
   strong {width: 100%;}
</style>
</head>
<body>
   <h2>Text Transform</h2>
   <div>
      <p style="text-: capitalize;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: lowercase;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: uppercase;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: none;">Text transformed.</p>
   </div>
   <div>
      <strong>
      <span>TRANSFORMATION OF TEXT AS FULL-WIDTH.</span>
      </strong>
   </div>
</body>
</html>

CSS Text - Text Emphasis

CSS provides a property to apply emphasis marks on a block of text using the property text-emphasis. These marks are typically used to highlight specific content or to indicate pronunciation or stress in certain languages.

It allows the designer to apply emphasis to individual characters or phrase within a block of text.

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

The text-emphasis property can have one of the following values:

none: Sets no emphasis mark.
filled: Fills the element with solid color. Default value.
open: Sets the shape as hollow.
dot: Marks displayed as small circles, either open or filled dot.
circle: Marks displayed as large circles, either open or filled circle. Default shape in horizontal writing.
double-circle: Marks displayed as double circles, either open or filled double circle.
triangle: Marks displayed as triangles, either open or filled triangle.
sesame: Marks displayed as sesames (~), either open or filled sesame. Default shape in vertical writing.
<string>: Marks displayed as the passed string value.
<color>: Sets the color of the mark.

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Emphasis</h2>
      <p style="text-emphasis: dot;">The emphasis is a dot.</p>
      <p style="text-emphasis: circle red;">The emphasis is a circle.</p>
      <p style="text-emphasis: triangle;">The emphasis is a triangle.</p>
      <p style="text-emphasis: none;">No emphasis to the text.</p>
      <p style="text-emphasis: double-circle green;">The emphasis is a double-circle.</p>
      <p style="text-emphasis: open;">The emphasis is open.</p>
      <p style="text-emphasis: sesame;">The emphasis is a sesame.</p>
      <p style="text-emphasis: 'u' #00ff00;">The emphasis is a string.</p>
</body>
</html>

CSS Text - Text Indentation

Indentation is the space between the margin and the first line of text. Proper indentation enhances the readability and clarity of text on a page.

CSS also provides a property to set the text indentation and that is text-indent. The following values can be passed to this property:

length: Any specific length {pixels (px), points (pt), ems (em), etc}. Default value is 0.
percentage (%): The value passed is in relation to the percentage of the width of the parent element.
each-line: Affects the first line of a block of text along with each line after a forced line break.
hanging: Indentation is inverted, except for the first line.
initial: Sets the text-indent to its default value.
inherit: Allows to inherit the text-indent value from its parent element.

Note: As of the now, the values each-line and hanging are not supported by any of the browsers.

Here is an example:

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

CSS Text - Letter Spacing

Adjusting the space between the letters in a text, impacts the readability and overall aesthetics of the webpage.

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

Following are the possible values that this property can have:

normal: Default value and represents the normal amount of space between letters.
length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.
initial: Sets the letter-spacing to its default value.
inherit: Allows to inherit the letter-spacing value from its parent element.

Note: The actual spacing between letters may vary depending on the font being used.

Here is an example:

<html>
<head>
</head>
<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>

CSS Text - Word Spacing

CSS provides property to adjust the spacing between the words in a piece of text, just like letter-spacing. The property to adjust the space between words is word-spacing.

This property can take following values:

normal: Default value and represents the normal amount of space between words.
length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.
initial: Sets the word-spacing to its default value.
inherit: Allows to inherit the word-spacing value from its parent element.

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Word spacing</h2>
      <p style="word-spacing: normal;">Word spacing normal.</p>
      <p style="word-spacing: 15pt;">Word spacing increased.</p>
      <p style="word-spacing: -1px;">Word spacing decreased.</p>
</body>
</html>

CSS Text - White Space

In text, white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text's meaning.

Here are some scenario where you can encounter a white space:

Leading white spaces are those appearing before the first visible character of a line, while trailing white spaces appear after the last visible character.
White space, often in the form of line breaks or paragraph breaks.
White space is frequently used for indentation purposes, particularly in programming languages or when writing structured text.
Non-breaking white space characters, such as the HTML entity nbsp ( ), can be used.
Consecutive white spaces in text are treated as a single space. For example, pressing of spacebar multiple times.

The different values for white-space are as follows:

normal: Default value, where sequences of white spaces are collapsed, and text wraps to the next line when it reaches the available width.
nowrap: White spaces are collapsed, and text does not wrap to the next line. It continues on the same line, overflowing the available width.
pre: Preserves white spaces exactly as they are in the HTML code. Line breaks and multiple white spaces are displayed as they are.
pre-wrap: Preserves line breaks and white spaces as they are in the HTML code.
pre-line: Collapses white spaces, but preserves line breaks. Text wraps when it reaches the available width.
break-spaces: Collapses sequences of white spaces, but preserves line breaks and wrap opportunities. This is an experimental value and may not be supported in all browsers.
initial: Sets the value to its default value, which is normal.
inherit: Inherits the value from its parent element.

These values can be combined with other CSS properties, such as overflow and text-overflow, to control the behavior of white spaces.

Here is an example:

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;}
</style>
</head>
<body>
   <h2>White Space</h2>
   <h4>normal</h4>
   <div>
      <p style="white-space: normal;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre</h4>
   <div>
      <p style="white-space: pre;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>nowrap</h4>
   <div>
      <p style="white-space: nowrap;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre-wrap</h4>
   <div>
      <p style="white-space: pre-wrap;">white space refers to any empty space or characters that do not display
   a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre-line</h4>
   <div>
      <p style="white-space: pre-line;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>break-spaces</h4>
   <div>
      <p style="white-space: break-spaces;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
</body>
</html>

CSS Text - White Space Collapse

The white-space-collapse property checks how to collapse the white space inside an element.

The white-space property is a shorthand for white-space-collapse and text-wrap properties.

The different values for white-space-collapse are as follows:

collapse: Sequences of white space are collapsed.
preserve: Sequences of white space and characters of segment break are preserved.
preserve-breaks: Sequences of white space are collapsed and characters of segment break are preserved.
preserve-spaces: Sequences of white space are preserved and characters of segment break and tabs are converted to spaces.
break-spaces: Similar to 'preserve'. Consecutive spaces, tabs, and line breaks will collapse into a single space, but a single space will remain as is.

white-space-collapse property is partially supported by the browsers as of now, as its still in experiment mode.

CSS Text - With Shadow

The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.

By using this property, you can create various text effects like giving the text a 3D or glowing appearance, or adding emphasis and depth to the text.

The property specifies the combination of X and Y offsets, blur radius and color values. No fixed order of values is mandated. It is specified as a comma-separated list of shadow values.

text-shadow property accepts following values:

<color>:
- Sets the color of the shadow.
- It is optional.
- It can be specified either before or after the offset values.
- Any value for color can be specified, such as, name, HEX or RGB value.
<offset-x><offset-y>:
- Any length value, specifying the x and y values.
- x value represents the shadow's horizontal distance from text.
- y value represents the shadow's vertical distance from text.
- If x and y values equal 0, the shadow appears behind the text.
<blur-radius>
- Any length value, specifying the value of blur-radius.
- It is optional.
- To make the blur look bigger, you need to provide higher value.
- If no value is passed, it is taken as 0.

Example

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Shadow</h2>
      <p style="text-shadow: 2px 5px yellow;"> Simple Text shadow </p>
      <p style="text-shadow: 5px 5px 2px #ff00ff;">Text shadow with blur radius</p>
      <p style="text-shadow: 1px 1px 2px green, 0 0 1em yellow, 0 0 0.2em red;">Multiple shadows</p>
      <p style="text-shadow: 0px 0px 10px rgb(26, 69, 105); ">Text shadow with RGB colors</p>
</body>
</html>

CSS Text - Line Break

CSS provides property line-break that is useful in determining how to break lines in a block of text.

Following are the values that this property can have:

auto: Default line break rule applied.
loose: Least restrictive line break rule applied.
normal: Most common line break rule applied.
strict: Most stringent line break rule applied.
anywhere: Allows the browser to apply line break rule anywhere, at any character.
initial: Set the initial value.
inherit: Inherits the value of the parent element.

Here is an example:

<html>
<head>
<style>
   p {
      border: 2px solid blue;
      width: 200px;
   }
   .normal {
      line-break: normal;
   }
   .loose {
      line-break: loose;
   }
   .strict {
      line-break: strict;
   }
   .auto {
      line-break: auto;
   }
   .anywhere {
      line-break: anywhere;
   }
</style>
</head>
<body>
   <h2>Line Break</h2>
      <p class="normal">Normal - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text.</p>
      <p class="loose">Loose - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="strict">Strict - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="auto">Auto - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="anywhere">Anywhere - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
</body>
</html>

CSS Text - Word Break

The word-break property in CSS is used to specify how words should be broken or wrapped in case they exceed the available width of an element. It determines if the browser should allow the words to break at any point or if they should be kept together.

Following are the values that this property can have:

normal: Uses default line break rule.
break-all: Word breaks to be applied between any two characters, in order to prevent overflow.
keep-all: Word breaks not to be used for Chinese, Japanese and Korean (CJK) text; and for other languages or non-CJK text behavior is the same as for normal.
break-word: This behaves same as overflow-wrap: anywhere, i.e. word break at any word is applied. But this value is deprecated.

Here is an example:

<html>
<head>
<style>
   p {
      border: 2px solid green;
      width: 200px;
   }
   .normal {
      word-break: normal;
   }
   .all {
      word-break: break-all;
   }
   .keep {
      word-break: keep-all;
   }
   .wordbreak {
      word-break: break-word;
   }
</style>
</head>
<body>
   <h2>Word Break</h2>
      <p class="normal">normal - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="all">break-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="keep">keep-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="wordbreak">break-word - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
</body>
</html>

CSS Text - Related Properties

Following is the list of CSS properties of 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.
vertical-align	Sets the vertical alignment of the 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-transform	Transforms the text in either uppercase, lowercase or capitalize.
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-effects	Adds special visual effects to the text.
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.

Print Page