CSS - Text


Introduction to CSS Text

What is CSS Text?

CSS Text refers to the styling and formatting of text content within web pages using Cascading Style Sheets (CSS). It involves a set of CSS properties that allow web developers to control various aspects of text presentation, such as color, alignment, and spacing. With CSS Text, you can make your text visually appealing and readable across different devices and browsers.

CSS Text is an important part of web design because it impacts the user experience and readability of your website. By selecting text colors, aligning paragraphs, adjusting letter and word spacing, and applying other text styling techniques, you can create a professional look for your text content. Well-styled text improves the overall look of your website.

CSS Text also plays a role in typography. With CSS Text properties, you can choose fonts, set font sizes, and control line heights to improve the readability of your text. This is important for longer passages like articles or blog posts where proper formatting enhances the user's reading experience.

In the following sections, we will cover various CSS Text properties and techniques that will help you style your text. From setting colors to aligning text horizontally and vertically to applying decorations, transformations, and shadows—you will learn how to create visually appealing content for your web pages.

Example: This is a paragraph with extra spaces

<p>This    is   a   paragraph   with    extra   spaces.</p>

When a browser renders this code, it will display the text as:

This is a paragraph with extra spaces.

Example: Mismatched tags

<p>This is a paragraph.</div>

In this case, the opening <p> tag is closed with a </div> tag, which is incorrect. The right way to close the paragraph is:

<p>This is a paragraph.</p>

Text Color

Setting Text Color

In CSS, you can set the color of text using the color property. There are several ways to specify the desired color:

  1. Using color names: CSS provides a set of predefined color names that you can use to set the text color. For example, you can use color: red; to set the text color to red. Other common color names include blue, green, yellow, purple, and black. However, the list of color names is limited.

  2. Using hexadecimal values: Hexadecimal values are a popular way to represent colors in CSS. They start with a hash symbol (#) followed by six hexadecimal digits (0-9 and A-F). Each pair of digits represents the intensity of red, green, and blue (RGB) respectively. For example, color: #FF0000; sets the text color to bright red.

  3. Using RGB values: RGB stands for Red, Green, Blue, and it represents colors by specifying the intensity of each component. In CSS, you can use the rgb() function to set colors using RGB values. For example, color: rgb(255, 0, 0); sets the text color to red.

  4. Using HSL values: HSL stands for Hue, Saturation, and Lightness. It is another way to represent colors in CSS. The hsl() function allows you to specify colors using HSL values. Hue represents the color wheel and ranges from 0 to 360 degrees while saturation and lightness are represented as percentages.

Example: Setting text color using different methods

<p style="color: blue;">This text is blue using a color name.</p>
<p style="color: #00FF00;">This text is green using a hexadecimal value.</p>
<p style="color: rgb(255, 0, 255);">This text is magenta using RGB values.</p>
<p style="color: hsl(60, 100%, 50%);">This text is yellow using HSL values.</p>

By using different value formats with the 'color' property in your web page elements' stylesheets or inline stylesheets like in the above examples will help achieve desired results.

Text Alignment

Aligning Text Horizontally

CSS provides properties to align text horizontally within an element. The most commonly used property is text-align, which allows you to set the alignment of text. Here are the different values you can use with text-align:

  1. Left alignment: By default, text is aligned to the left side of its container. You can explicitly set the alignment to left using:

Example: Left alignment

   text-align: left;

This makes sure that the text starts from the left edge of the element and continues towards the right.

  1. Center alignment: To center the text within its container, you can use:

Example: Center alignment

   text-align: center;

This will horizontally center the text, making it equally spaced from the left and right edges of the element.

  1. Right alignment: To align the text to the right side of its container, you can use:

Example: Right alignment

   text-align: right;

This will make sure that the text starts from the right edge of the element and continues towards the left.

Text Decoration

Text decoration in CSS lets you add visual elements to your text, such as underlines, overlines, and line-throughs. You can use the text-decoration property to control these decorations.

Underlining Text

One common use of text decoration is underlining text. By default, links in HTML are underlined to indicate that they are clickable. However, you can also underline regular text using the text-decoration property:

Example: Underlining Text

p {
  text-decoration: underline;

This will add an underline to all paragraphs on your web page.

If you want to remove the default underline from links, you can use the following CSS:

Example: Removing Underline from Links

a {
  text-decoration: none;

This will remove the underline from all links, giving you more control over their appearance.

Overline and Line-through

In addition to underlines, you can also add overlines and line-throughs to your text using the text-decoration property.

To add an overline to your text, you can use:

Example: Adding an Overline

h1 {
  text-decoration: overline;

This will draw a line above the text of all <h1> elements.

To strike through text, you can use:

Example: Strikethrough Text

span {
  text-decoration: line-through;

This will draw a line through the middle of the text within <span> elements.

You can also combine multiple decorations by separating them with spaces:

Example: Combining Decorations

p {
  text-decoration: underline overline;

This will add both an underline and an overline to paragraphs.

Use decorations purposefully to convey meaning or draw attention without cluttering your content.

Text Transformation

Text transformation in CSS allows you to change the capitalization of text without modifying the actual content. You can convert text to uppercase, lowercase, or capitalize the first letter of each word using the text-transform property.

Uppercase and Lowercase

To convert text to uppercase, you can use the following CSS:

Example: Uppercase transformation

h1 {
  text-transform: uppercase;

This will transform all the text within <h1> elements to uppercase, regardless of how it is originally written in the HTML.

Similarly, you can convert text to lowercase using:

Example: Lowercase transformation

p {
  text-transform: lowercase;

This will transform all the text within <p> elements to lowercase.

Capitalizing Words

If you want to capitalize the first letter of each word in a text, you can use the capitalize value for the text-transform property:

Example: Capitalize transformation

h2 {
  text-transform: capitalize;

This will capitalize the first letter of each word within <h2> elements, leaving other letters in their original case.

Example of Different Text Transformations

Example text transformations

<h1>this is a heading</h1>
<p>This Is A Paragraph.</p>
<h2>another heading goes here</h2>
h1 {
  text-transform: uppercase;

p {
  text-transform: lowercase;

h2 {
  text-transform: capitalize;
  • The <h1> element will display as "THIS IS A HEADING" (all uppercase).
  • The <p> element will display as "this is a paragraph." (all lowercase).
  • The <h2> element will display as "Another Heading Goes Here" (first letter of each word capitalized).

Text transformation helps maintain consistent capitalization style across certain elements or sections of your web page.

Text Spacing

CSS provides properties to control the spacing between characters, words, and lines of text. These properties help improve readability and create visually appealing text layouts.

Letter Spacing

The letter-spacing property in CSS allows you to adjust the space between individual characters in a text. By default, the browser sets the letter spacing based on the font being used. However, you can override this spacing to create a desired effect.

To increase or decrease the letter spacing, you can use a positive or negative length value:

Example: Letter Spacing

p {
  letter-spacing: 2px;

This will add 2 pixels of space between each character in all <p> elements. Negative values will bring the characters closer together.

Word Spacing

You can also control the space between words using the word-spacing property. This property accepts a length value that represents additional space added between words.

Example: Word Spacing

h2 {
  word-spacing: 1em;

An additional space of 1em (relative to the font size) is added between each word within <h2> elements.

Line Height

The line-height property sets the height of each line of text. It determines vertical spacing between lines. You can specify line height using length values, percentages, or unitless numbers.

Example: Line Height

p {
  line-height: 1.5;

Paragraphs have a line height set to 1.5 times their font size. If the font size is 16px, then line height will be 24px (16px * 1.5). Adjusting line height improves readability by preventing lines from being too close together or too far apart.


Indentation refers to space at beginning of a line of text. In CSS, you can indent the first line of a paragraph using the text-indent property, which accepts a length value specifying the amount of indentation:

Example: Indentation

p {
  text-indent: 20px;

This rule indents the first line of each paragraph by 20 pixels.

Text Shadow

Text shadow is a CSS property that lets you add shadow effects to text elements. It can create depth by simulating the appearance of text being slightly raised or recessed. The text-shadow property takes multiple values to define the shadow's position, blur radius, and color.

Adding Shadow to Text

To add a shadow to text, use the text-shadow property followed by a set of values:

Example: Adding shadow to <h1> element

h1 {
  text-shadow: 2px 2px 4px #000000;

The <h1> element will have a shadow with these properties:

  • The first value (2px) specifies the horizontal shadow offset. A positive value moves the shadow to the right; a negative value moves it to the left.
  • The second value (2px) specifies the vertical shadow offset. A positive value moves the shadow down; a negative value moves it up.
  • The third value (4px) sets the blur radius of the shadow. A larger value results in a more blurred and softer shadow.
  • The fourth value (#000000) defines the color of the shadow.

You can adjust these values for different effects:

Example: Adjusting shadow for <p> element

p {
  text-shadow: -1px -1px 2px #FF0000;

This will create a red shadow that is offset 1 pixel up and to the left, with a blur radius of 2 pixels.

You can also apply multiple shadows to one piece of text by separating each definition with a comma:

Example: Applying multiple shadows to <h2> element

h2 {
  text-shadow: 1px 1px 2px #000000, 0 0 10px #0000FF;

The <h2> element has two shadows:

  • The first is black, offset by one pixel down and right, with a blur radius of two pixels.
  • The second is blue without any offset and has a blur radius of ten pixels.

By combining different values and colors, you can create appealing shadows for your text content.