Selected Reading
Q&A

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.

Text Formatting using CSS

CSS provides a number of properties to format text in beautiful way. This tutorial demonstrates how to format text using CSS properties. Following properties provided by CSS can be used to format the text:

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 - Setting Text Color

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

The CSS 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).

Example

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 - Setting 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 text-align defines the alignment of the text on a web page. The text-align property is used to set the horizontal alignment of the text.

Following are the possible values which can be used to set text-align property.

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 value of direction is ltr, the default alignment is left-aligned and when the value of direction is rtl, the default alignment is right-aligned.

Example

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Setting Text Alignment using CSS</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 - Setting Vertical Alignment

The CSS vertical-align property sets Vertical Alignment of an inline, inline-block or table-cell box.

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

baseline: Baseline of the element is aligned with the baseline of its 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.

Example

Here is an example. You can try this example using different values for vertical-align:

<html>
<head>
<style>
   table, td {
      height:100px; 
      width:400px; 
      border:1px solid red;
   }
</style>
</head>
<body>
   <h4>Setting Text Vertical Alignment</h4>
   <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>
</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.

Example

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>

Example

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

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

CSS - Text Decoration

The CSS text-decoration property 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.

Example

Here is an example:

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

CSS - 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.

Example

Here is an example. You can try this example using different values of text-decoration-skip property:

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

CSS - 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)

Example

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

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

CSS - Text Transform

The CSS 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.

Example

Here is an example:

<html>
<body>
   <h2>Text Transform Examples</h2>
   <p style="text-transform: capitalize;">This text will be capitalized.</p>

   <p style="text-transform: lowercase;">This text will be in lowercase.</p>

   <p style="text-transform: uppercase;">This text will be in upercase.</p>

   <p style="text-transform: none;">This text will not have any transformation.</p>

   <p style="text-transform: full-width;">TRANSFORMATION OF TEXT AS FULL-WIDTH.</p>
</body>
</html>

CSS - 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.

Example

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text Emphasis Examples</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 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.

Example

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Text indentation Examples</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

The CSS 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.

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

Example

Here is an example:

<html>
<body>
   <h2>Letter Spacing Examples</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 any of the 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.

Example

Here is an example:

<html>
<head>
</head>
<body>
   <h2>Word Spacing Examples</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.

CSS provides white-space property to set text white space. 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.

Example

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 Examples</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 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. Following is the syntax of text-shadow:

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

The CSS 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 Examples</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.

Example

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 Examples</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 CSS 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.

Example

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 Examples</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>