WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Text


text formatting

This content is styled with a portion of the content designing properties. The heading utilizes the content adjust, content change, and shading properties. The passage is indented, adjusted, and the space between characters is determined. The underline is expelled from this shaded "Try it yourself" link.


Text Color

The color property is utilized to set the shade of the text.

With CSS, a shading is frequently determined by:

  • a shading name - like "red"
  • a HEX esteem - like "#ff0000"
  • an RGB esteem - like "rgb(255,0,0)"

Look at CSS Color Values for a total rundown of conceivable shading values.

The default content shading for a page is characterized in the body selector.

Example

body {
    shading: blue;
}

h1 {
    shading: green;
}
Try it yourself »
F property.

Text Alignment

The text-align property determines the flat arrangement of content in an element.

A content can be left or right adjusted, focused, or justified.

The following precedent shows focus adjusted, and left and right adjusted content (left arrangement is default if content course is left-to-right, and right arrangement is default if content course is on the whole correct to-left):

Example

h1 {
    content adjust: center;
}

h2 {
    content adjust: left;
}

h3 {
    content adjust: right;
}
Try it yourself »

Text Decoration

The text-decoration property determines how the content will be decorated.

The esteem text-beautification: none; is frequently used to expel underlines from links:

Example

a {
    content enrichment: none;
}
Try it yourself »

The other text-decoration values are utilized to design text:

Example

h1 {
    content improvement: overline;
}

h2 {
    content improvement: line-through;
}

h3 {
    content beautification: 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-transform property determines how to underwrite a component's text.

It can be utilized to transform everything into underwrite the principal letter of each word:

Example


p.capitalize {
    content change: capitalize;
}
Try it yourself »

Text Indentation

The text-indent property is utilized to indicate the space of the primary line of a text:

Example

p {
    content 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-separating: 4px;
}

h2 {
    letter-separating: - 4px;
}

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

Line Height

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

Example

p.small {
    line-stature: 0.6;
}

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

Text Direction

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

Example

div {
    bearing: 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-separating: 10px;
}

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