CSS Text

Here we look at properties that can assist in styling your text

Text Color

Color property is used to set the color of the text. To specify the color you can use a color name (red), a HEX value (#ff0000) or an RGB value (rgb (255,0,0) ).

Let's see an example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>

Text Alignment

Alignment property is used for aligning text inside an element left, right, center, etc.

Text alignment has four values:

  • Left (text-align: left) - aligns the text to the left
  • Right (text-align: right) - aligns the text to the right
  • Center (text-align: center) - puts the text in center of the page
  • Justify (text-align: justify) - stretches the line of text to align both the left and right ends (like in magazines and newspapers)

Browsers by default align text to the left, and if there is need to align text to the right or put it in the center, we should use the corresponding value.

Let's see an example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>

Text Decoration

Decoration property is used to specify line decorations added to the text. The following values are valid for text decoration property.

  • Overline (text-decoration:overline) - each line of text has a line over it
  • Underline (text-decoration:underline) - each line text is underlined
  • Line-through (text-decoration:line-through) - each line of text has a line going through it
  • None (text-decoration:none) - no text decoration is applied

Let's see an example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>

Text Transform

Transform property is used for controlling text capitalization. It means that you can set your text to be uppercase, lowercase, or capitalized (title case).

Transform property has the following values:

  • Uppercase (text-transform: uppercase) - converts all characters to uppercase
  • Lowercase (text-transform: lowercase) - converts all characters to lowercase
  • Capitalize (text-transform: capitalize) - converts the first character of each word to uppercase

Let's see the example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>

Text Shadow

We use the text-shadow property when we want to give shadow to our text.

Shadow property is used to apply various shadow effects to the text. It accepts a list of values. Each item in the list can have two and more comma-separated values.

The text shadow property syntax can look like

text-shadow: h-shadow v-shadow blur color

Here you can see examples of text shadow.