HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Text Formatting

❮ Previous Next ❯

CSS offers many options to style text.

text formatting

This text looks a certain way because of some special text rules. The title is centered, changed to uppercase, and given a color.The paragraph is shifted to the right, centered, and the gap between letters is set. The colored line under the text is taken away "Try it Yourself" link.

Text Color

The color property changes the text's color. You can specify the color using this property.

a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Example

body {
color: blue;
}

h1 {
color: green;
}

Try it Yourself »

Text Color and Background Color

In this example given below, we have used both the background-color property and the color property:

Example

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

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

div {
background-color: blue;
color: white;
}

Try it Yourself »

Text Alignment and Text Direction

In this section, you'll discover information about these Properties:

text-align
text-align-last
direction
unicode-bidi
vertical-align

Text Alignment

The text-align property is used to decide how text should be positioned horizontally.

You can position text in different ways: on the left, right, in the center, or evenly spaced on both sides.

In this example, you can see text that is aligned in the center, to the left, and to the right. The default alignment is to the left when the text flows from left to right, and it's to the right when the text flows from right to left

Example

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

Try it Yourself »

When you set the text-align property to "justify," it makes every line in a text stretch to have the same width. This creates straight margins on the left and right, similar to how text appears in magazines and newspapers.

Example

div {
text-align: justify;
}

Try it Yourself »

Text Align Last

The text-align-last property tells us how to position the final line of a piece of text.

Example

p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}

Try it Yourself »

Text Direction

You can use the direction and unicode-bidi properties to alter the way text appears in an element. These properties control the text's directionality

Example

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

Try it Yourself »

Vertical Alignment

The vertical-align property controls how an element is positioned vertically.

Example

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

Try it Yourself »

Text Decoration

In this section, you'll discover information about these characteristics:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to include a line decoration in text.

Tip: You can use multiple values, such as 'overline' and 'underline,' to show lines both above and below a piece of text.

Example

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}

Try it Yourself »

Specify a Color for the Decoration Line

The text-decoration-color property changes the color of the decoration line.

Example

h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}

h3 {
text-decoration-line: underline;
text-decoration-color: green;
}

p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}

Try it Yourself »

Specify a Style for the Decoration Line

The text-decoration-style property is employed to determine how the decorative line appears.

Example

h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}

h2 {
text-decoration-line: underline;
text-decoration-style: double;
}

h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}

p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}

p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}

p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}

Try it Yourself »

Specify the Thickness for the Decoration Line

The text-decoration-thickness property is used to control how thick the line for decoration appears.

Example

h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}

h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}

h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}

Try it Yourself »

The Shorthand Property

The text-decoration property is a shorthand property for:

text-decoration-line (required)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)

Example

h1 {
text-decoration: underline;
}

h2 {
text-decoration: underline red;
}

h3 {
text-decoration: underline red double;
}

p {
text-decoration: underline red double 5px;
}

Try it Yourself »

A Small Tip

In HTML, links usually have lines under them. But sometimes, you might notice links without these lines. To make links without lines, we use the code text-decoration: none;. It looks like this:

Example

a {
text-decoration: none;
}

Try it Yourself »

Text Transformation

The text-transform property is used to control whether text should appear in uppercase (capital letters) or lowercase (small letters).

You can use this to change text in different ways:

Make everything UPPERCASE.
Make everything lowercase.
Capitalize the first letter of each word.

Example

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

Try it Yourself »

Text Spacing

In this section, you'll find information about these characteristics:

text-indent
letter-spacing
line-height
word-spacing
white-space

Text Indentation

The text-indent property helps decide how much the first line of a text should be moved in from the left margin.

Example

p {
text-indent: 50px;
}

Try it Yourself »

Letter Spacing

The letter-spacing property helps you control how much space is between the letters in a piece of text.

The given example shows how to increase or decrease the space between characters:

Example

h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}

Try it Yourself »

Line Height

The line-height property is used to determine how much space there should be between lines of text.

Example

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

Try it Yourself »

Word Spacing

The word-spacing property is used to set the gap between words in a text.

In this example, we show how to make the gap between words either bigger or smaller.

Example

p.one {
word-spacing: 10px;
}

p.two {
word-spacing: -2px;
}

Try it Yourself »

White Space

The white-space property tells us what happens to spaces and empty areas inside an element.

This example shows how to stop text from wrapping inside an element.

Example

p {
white-space: nowrap;
}

Try it Yourself »

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: blue;
      }

      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
    <p>Another paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightgrey;
        color: blue;
      }

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

      div {
        background-color: blue;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
    <div>This is a div.</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        text-align: center;
      }

      h2 {
        text-align: left;
      }

      h3 {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <h1>Heading 1 (center)</h1>
    <h2>Heading 2 (left)</h2>
    <h3>Heading 3 (right)</h3>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
        width: 200px;
        height: 200px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Example text-align: justify</h1>
    <p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>
    <div> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur. </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.a {
        text-align-last: right;
      }

      p.b {
        text-align-last: center;
      }

      p.c {
        text-align-last: justify;
      }
    </style>
  </head>
  <body>
    <h1>The text-align-last Property</h1>
    <h2>text-align-last: right:</h2>
    <p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
    <h2>text-align-last: center:</h2>
    <p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
    <h2>text-align-last: justify:</h2>
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.ex1 {
        direction: rtl;
        unicode-bidi: bidi-override;
      }
    </style>
  </head>
  <body>
    <p>This is the default text direction.</p>
    <p class="ex1">This is right-to-left text direction.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img.a {
        vertical-align: baseline;
      }

      img.b {
        vertical-align: text-top;
      }

      img.c {
        vertical-align: text-bottom;
      }

      img.d {
        vertical-align: sub;
      }

      img.e {
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h1>The vertical-align Property</h1>
    <h2>vertical-align: baseline (default):</h2>
    <p>An <img class="a" src="/assets/files/small-square.png" width="9" height="9"> image with a default alignment. </p>
    <h2>vertical-align: text-top:</h2>
    <p>An <img class="b" src="/assets/files/small-square.png" width="9" height="9"> image with a text-top alignment. </p>
    <h2>vertical-align: text-bottom:</h2>
    <p>An <img class="c" src="/assets/files/small-square.png" width="9" height="9"> image with a text-bottom alignment. </p>
    <h2>vertical-align: sub:</h2>
    <p>An <img class="d" src="/assets/files/small-square.png" width="9" height="9"> image with a sub alignment. </p>
    <h2>vertical-align: sup:</h2>
    <p>An <img class="e" src="/assets/files/small-square.png" width="9" height="9"> image with a super alignment. </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        text-decoration: overline;
      }

      h2 {
        text-decoration: line-through;
      }

      h3 {
        text-decoration: underline;
      }

      p.ex {
        text-decoration: overline underline;
      }
    </style>
  </head>
  <body>
    <h1>Overline text decoration</h1>
    <h2>Line-through text decoration</h2>
    <h3>Underline text decoration</h3>
    <p class="ex">Overline and underline text decoration.</p>
    <p>
      <strong>Note:</strong> Avoid underlining non-link text because it can confuse readers.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        text-decoration-line: overline;
        text-decoration-color: red;
      }

      h2 {
        text-decoration-line: line-through;
        text-decoration-color: blue;
      }

      h3 {
        text-decoration-line: underline;
        text-decoration-color: green;
      }

      p {
        text-decoration-line: overline underline;
        text-decoration-color: purple;
      }
    </style>
  </head>
  <body>
    <h1>Overline text decoration</h1>
    <h2>Line-through text decoration</h2>
    <h3>Underline text decoration</h3>
    <p>Overline and underline text decoration.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        text-decoration-line: underline;
        text-decoration-style: solid;
        /* this is default */
      }

      h2 {
        text-decoration-line: underline;
        text-decoration-style: double;
      }

      h3 {
        text-decoration-line: underline;
        text-decoration-style: dotted;
      }

      p.ex1 {
        text-decoration-line: underline;
        text-decoration-style: dashed;
      }

      p.ex2 {
        text-decoration-line: underline;
        text-decoration-style: wavy;
      }

      p.ex3 {
        text-decoration-line: underline;
        text-decoration-color: red;
        text-decoration-style: wavy;
      }
    </style>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <p class="ex1">A paragraph.</p>
    <p class="ex2">Another paragraph.</p>
    <p class="ex3">Another paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;  /* this is default */
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;  
  text-decoration-style: double;
  text-decoration-thickness: 5px;  
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>A paragraph.</p>

</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        text-decoration: underline;
      }

      h2 {
        text-decoration: underline red;
      }

      h3 {
        text-decoration: underline red double;
      }

      p {
        text-decoration: underline red double 5px;
      }
    </style>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <p>A paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <h1>Using text-decoration: none</h1>
    <p>A link with no underline: <a href="https://propertutorials.com/" target="_blank">Propertutorials.com</a>
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.uppercase {
        text-transform: uppercase;
      }

      p.lowercase {
        text-transform: lowercase;
      }

      p.capitalize {
        text-transform: capitalize;
      }
    </style>
  </head>
  <body>
    <h1>Using the text-transform property</h1>
    <p class="uppercase">This text is transformed to uppercase.</p>
    <p class="lowercase">This text is transformed to lowercase.</p>
    <p class="capitalize">This text is capitalized.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-indent: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Using text-indent</h1>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        letter-spacing: 5px;
      }

      h3 {
        letter-spacing: -2px;
      }
    </style>
  </head>
  <body>
    <h1>Using letter-spacing</h1>
    <h2>This is heading 1</h2>
    <h3>This is heading 2</h3>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.small {
        line-height: 0.7;
      }

      p.big {
        line-height: 1.8;
      }
    </style>
  </head>
  <body>
    <h1>Using line-height</h1>
    <p> This is a paragraph with a standard line-height. <br> The default line height in most browsers is about 110% to 120%. <br>
    </p>
    <p class="small"> This is a paragraph with a smaller line-height. <br> This is a paragraph with a smaller line-height. <br>
    </p>
    <p class="big"> This is a paragraph with a bigger line-height. <br> This is a paragraph with a bigger line-height. <br>
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.one {
        word-spacing: 10px;
      }

      p.two {
        word-spacing: -2px;
      }
    </style>
  </head>
  <body>
    <h1>Using word-spacing</h1>
    <p>This is a paragraph with normal word spacing.</p>
    <p class="one">This is a paragraph with larger word spacing.</p>
    <p class="two">This is a paragraph with smaller word spacing.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h1>Using white-space</h1>
    <p> This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. </p>
    <p>Try to remove the white-space property to see the difference!</p>
  </body>
</html>

❮ Previous Next ❯

Web Development