WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Text


text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "Try it out" link.


Text Color

The color attribute is used to set the color of the text.

Color is most often specified via CSS:

  • Hex value-such as: # FF0000
  • An RGB value-such as: RGB (255,0,0)
  • The name of the color-for example: red

The background color of a web page refers to the choice within the body:

Example

body {
    color: blue;
}

h1 {
    color: green;
}
Try it yourself »
For W3C standard CSS: If you define color attributes, you must also define background color attributes.

Text Alignment

The text alignment property is used to set the horizontal alignment of the text.

The text can be centered or aligned to the left or right, justified.

When text-align is set to "justify", each line is expanded to equal width, and the left and right margins are aligned (such as magazines and newspapers).

Example

h1 {
    text-alignment : center;
}

h2 {
    text-alignment : left;
}

h3 {
    text-alignment : right;
}
Try it yourself »

Text Decoration

text-decoration attribute is used to set or delete the decoration of the text.

From a design perspective, the text-decoration attribute is mainly used to remove the underline of a link:

Example

a {
    text-decoration: none;
}
Try it yourself »

You can also decorate the text like this::

Example

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
Try it yourself »

inherit - Inherits this property from its parent component overline - Draws a flat line over the content underline - Draws a flat line underneath the content line-through - draws a flat line through the content (substitutes the HTML <s> tag)


Text Transformation

The text conversion attribute is used to specify uppercase and lowercase letters in a text.

Can be used to turn all words into uppercase or lowercase, or capitalize the first letter of each word.

Example


p.capitalize {
    text-transform: capitalize;
}
Try it yourself »

Text Indentation

The text indent property is used to specify the indentation of the first line of text.:

Example

p {
    text-indent: 50px;
}
Try it yourself »

Letter Spacing

The letter-spacing property determines the space between characters in a text.

The qualities can be set as the space between characters:

Example

h1 {
    letter-spacing: 4px;
}

h2 {
    letter-spacing: - 4px;
}

p {
    letter-spacing: 4px;
}
Try it yourself »

Line Height

The line-height property is utilized to indicate the space between lines:

Example

p.small {
    line-height: 0.6;
}

p.big {
    line-height: 1.6;
}
Try it yourself »

Text Direction

The direction property is utilized to alter the content course of an element:

Example

div {
    direction: rtl;
}
Try it yourself »

Word Spacing

The word-spacing property is utilized to determine the space between the words in a text.

The following precedent shows how to increment or reduction the space between words: 

Example

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: - 5px;
}
Try it yourself »