CSS Tutorial - CSS Text Formatting

Posted by Ridwan Fadilah on Aug 16, 2020 - 02:27 pm

CSS Text. Learn how to change the text style, alignment, color, and all about text formatting with CSS3 by examples.

The text formatting use on a website can improve your web appearance. The right choice of the text format is also can make the users easy to read each content on a page they visited.

By using CSS, you can change the style of the text with some of the text formatting properties, such as the text-align, text-transform, and color properties.

Now, in this tutorial, I'll show you how to change the text format with CSS3 text formatting properties.

Text Color
Text Background Color
Text Alignment
- Text Direction
- Vertical Alignment
Text Decoration
Text Transformation
Text Spacing
CSS Text Shadow
- Adding a Color
- Adding a Blur Effect

Text Color

If you want to change the text color, you can use the CSS color property to set the color of the text. The color is specified by:

a color name, like - red
a HEX value, like - #ffffff
and RGB value, like - rgb(255,0,0)

The default text color for a page is defined in the body element. That will set all the text colors inside the body element, except you change a different color for a certain HTML element.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

- The CSS


body {
  color: blue;
}

h1 {
  color: green;
}

Here's the result of the example above:

Text Background Color

Just add the CSS background-color property to set the text background color and fill the value with the name or color code like the example before.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

- The CSS


body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: green;
}

It's no problem if the CSS color property used with the background-color property.

The example above will display by the browser like this:

Text Alignment

In CSS text formatting, you can set the text left or right-aligned, centered, or justified.

Use the CSS text-align property to set the horizontal alignment of a text.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>This is a heading 1</h1>
  <h2>This is a heading 2</h2>
  <h3>This is a heading 3</h3>
</body>

</html>

- The CSS


h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

The following example shows center-aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

If the value is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Example</h1>
  <p>Change the text align to justify.</p>
  <p>If the value is set to "justify", each line is stretched so that every line has equal width, and the left and
    right margins are straight.</p>
</body>

</html>

- The CSS


div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}

For this example, also add the border, padding, and specify the height and width of the element to see how it works. The text will look like in magazines and newspapers.

Text Direction

Changing the direction of the text is also one of the CSS text formatting parts.

Use the CSS direction and unicode-bidi properties to change the text direction of an element.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Example</h1>
  <p>Text direction Right to Left</p>
</body>

</html>

- The CSS


p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

The code above will display by the browser like this:

Vertical Alignment

Use the CSS vertical-align property to set the vertical alignment of an element.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Example</h1>
  <p>An <img src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a default alignment.</p><br>

  <p>An <img class="top" src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a top alignment.</p><br>

  <p>An <img class="middle" src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a middle alignment.</p><br>

  <p>An <img class="bottom" src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a bottom alignment.</p>
</body>

</html>

- The CSS


img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

Here's the result of the example above:

Text Decoration

Use CSS text-decoration property to add or remove decorations of the text.

The value text-decoration: none; is often used to remove underlines from links.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Example</h1>
  <a href="go-somewhere">Go Somewhere</a><br>
  <a class="link-2" href="go-somewhere">Go Somewhere</a>
</body>

</html>

- The CSS


a.link-2 {
  text-decoration: none;
}

Here are the differences of the HTML link with and without text decorations:

CSS link text with and without text decorations

The other CSS text-decoration values are used to decorate text.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>This is a heading 1</h1>
  <h2>This is a heading 2</h2>
  <h3>This is a heading 3</h3>
</body>

</html>

- The CSS


h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

The example above will display by the browser like this:

Text Transformation

Use the text-transform to specify uppercase and lowercase letters in a text.

You can use it to turn everything into uppercase or lowercase letters or set the capitalize the first letter of each word.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <p class="uppercase">This is a paragraph</p>
  <p class="lowercase">This is a paragraph</p>
  <p class="capitalize">This is a paragraph</p>
</body>

</html>

- The CSS


p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

The example above will display by the browser like this:

Text Spacing

Adding some space to text is another text formatting. You are allowed to add the text spacing on a web page by using CSS.

Text Indentation

Use the CSS text-indent property to specify the indentation of the first line of a text:

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum maiores blanditiis impedit veniam, quasi porro
    asperiores recusandae ab soluta minus aliquid cumque molestias in quibusdam, quae voluptatibus eum nostrum obcaecati
    est eos? Recusandae voluptates totam facilis libero sapiente assumenda officiis!</p>
</body>

</html>

- The CSS


p {
  text-indent: 40px;
}

The example above will display by the browser like this:

Letter Spacing

Use the CSS letter-spacing property to specify the space between the characters in a text.

Here's the example of how to increase or decrease the space between characters:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Lorem ipsum dolor sit amet.</h1>
  <h2>Lorem ipsum dolor sit amet.</h2>
</body>

</html>

- The CSS


h1 {
  letter-spacing: 4px;
}

h2 {
  letter-spacing: -4px;
}

The example above will display by the browser like this:

Line Height

Use the CSS line-height property to specify the space between lines:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <p class="small">Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br>Dolorem tempore quibusdam itaque.
    Impedit veniam odio necessitatibus eos officia modi voluptatem delectus illo.</p>

<p class="big">Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br>Dolorem tempore quibusdam itaque.
    Impedit veniam odio necessitatibus eos officia modi voluptatem delectus illo.</p>
</body>

</html>

- The CSS


p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

The example above will display by the browser like this:

Word Spacing

Use the CSS word-spacing property to specify the space between the words in a text.

Example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Lorem ipsum dolor sit amet.</h1>
  <h2>Lorem ipsum dolor sit amet.</h2>
</body>

</html>

- The CSS


h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

The example above will display by the browser like this:

White Space

Use the CSS white-space property to specify how white-space inside an element is handled.

Here's the example:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo neque dolores dignissimos doloremque? Amet eum
    voluptatibus assumenda consequatur soluta facilis.</p>

  <p>Try to remove the white-space property to see the different.</p>
</body>

</html>

- The CSS


p {
  white-space: nowrap;
}

The example above will display by the browser like this:

CSS Text Shadow

Use the CSS text-shadow property to adds shadow effect to text.

Here's the simple example of adding a shadow:

- The HTML


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Lorem ipsum dolor sit amet.</h1>

  <p>Try to remove the white-space property to see the different.</p>
</body>

</html>

- The CSS


h1 {
  text-shadow: 2px 2px;
}

The example above will display by the browser like this:

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Adding a Color

Here's the example of how to add color to the shadow:


h1 {
  text-shadow: 2px 2px blue;
}

and here's the result:

Adding a Blur Effect

You can also add the blur effect to the text with shadow effect:


h1 {
  text-shadow: 2px 2px 5px blue;
}

Here's the result:

Okay, that's the CSS text formatting tutorial. You will learn more about the CSS basics in the next chapter.

You can read another CSS basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.

Thanks for reading.

CSS Backgrounds CSS Fonts CSS Introduction

HTML5 Tutorial

CodeIgniter 4

Bootstrap Tutorial

Installation Guide

CSS Tutorial

JavaScript Tutorial

CSS Tutorial - CSS Text Formatting

Table of Contents

Text Color

Text Background Color

Text Alignment

Text Direction

Vertical Alignment

Text Decoration

Text Transformation

Text Spacing

Text Indentation

Letter Spacing

Line Height

Word Spacing

White Space

CSS Text Shadow

Adding a Color

Adding a Blur Effect

Related Articles