With CSS you can style and format text in a variety of ways.
This includes text color, font size, alignment, line-height, and other properties.
Text that is styled with four different CSS properties.
Text styled in a variety of ways
<p style="font-size: 18px;
color: purple;
font-style: italic;
text-decoration:underline;">
Text styled in a variety of ways
</p>
The color property specifies the color of the text.
The color value can one of the following:
If no color is specified, the element will inherit the parent's text color.
An element with a custom color for text.
A paragraph with a text color
<p style="color:salmon;">
A paragraph with a text color
</p>
For details on the color property, see our CSS color Property Reference.
The text-align property sets the horizontal text alignment
Text can be aligned left, right, center, or justified
Aligned text: left, center, and right.
Left-aligned text
Centered text
Right-aligned text
<style>
.text-align {
border: 3px solid lightblue;
padding: 25px;
}
</style>
<p class="text-align" style="text-align: left">Left-aligned text</p>
<p class="text-align" style="text-align: center">Centered text</p>
<p class="text-align" style="text-align: right">Right-aligned text</p>
The justify value for text-align stretches each line to the element's width.
Both left and right margins are perfectly aligned.
An element with justify text alignment.
Monet was raised in Le Havre, Normandy, and became interested in the outdoors and drawing from an early age. Although his mother, Louise-Justine Aubrée Monet, supported his ambitions to be a painter, his father, Claude-Adolphe, disapproved and wanted him to pursue a career in business. He was very close to his mother, but she died in January 1857 when he was sixteen years old, and he was sent to live with his childless, widowed but wealthy aunt, Marie-Jeanne Lecadre.
<style>
.text-justify {
padding: 20px;
border: 5px solid lightblue;
max-width: 400px;
text-align: justify;
}
</style>
<p class="text-justify">
Monet was raised in Le Havre, Normandy, and became
interested in the outdoors and drawing from an early age.
Although his mother, Louise-Justine Aubrée Monet,
supported his ambitions to be a painter, his father,
Claude-Adolphe, disapproved and wanted him to pursue
a career in business. He was very close to his mother,
but she died in January 1857 when he was sixteen years
old, and he was sent to live with his childless,
widowed but wealthy aunt, Marie-Jeanne Lecadre.
</p>
For details on text-align, see our CSS text-align Property Reference.
The text-decoration property adds a line to text.
The line type can be underline, overline, line-through, and none.
Text decorations: underline, line-through, and overline.
Underline
Line Through
Overline
<p style="text-decoration: underline">Underline</p>
<p style="text-decoration: line-through">Line Through</p>
<p style="text-decoration: overline">Overline</p>
A none value removes underlines from an HTML element.
This link is rendered without an underline.
A link with no underline:
Google.com
<p>
A link with no underline: <br />
<a href="https://google.com"
style="text-decoration: none; color: darkslateblue;">Google.com</a>
</p>
For details on text-decoration, see our CSS text-decoration Property Reference.
The text-tranform property specifies the case of the text.
Possible values include uppercase, lowercase, or capitalize.
Text transforms: uppercase, lowercase, and capitalize.
Van Gogh is a well-known post-impressionist artist.
Van Gogh is a well-known post-impressionist artist
Van Gogh is a well-known post-impressionist artist
<p style="text-transform: uppercase">
Van Gogh is a well-known
post-impressionist artist.
</p>
<p style="text-transform: lowercase">
Van Gogh is a well-known
post-impressionist artist
</p>
<p style="text-transform: capitalize">
Van Gogh is a well-known
post-impressionist artist
</p>
For details on text-transform, see our CSS text-transform Property Reference.
The text-indent property specifies the indentation of the first line of text.
The value can be any valid length value, such as, px, pt, cm, etc.
The first line in this text block is left-indented.
Van Gogh suffered from psychotic episodes and delusions and though he worried about his mental stability, he often neglected his physical health, did not eat properly and drank heavily. His friendship with Gauguin ended after a confrontation with a razor when, in a rage, he severed part of his own left ear.
<p style="text-indent: 30px">
Van Gogh suffered from psychotic episodes
and delusions and though he worried about
his mental stability, he often neglected
his physical health, did not eat properly
and drank heavily. His friendship with
Gauguin ended after a confrontation with
a razor when, in a rage, he severed part
of his own left ear.
</p>
For details on text-indent, see our CSS text-indent Property Reference.
The letter-spacing property sets the space between the characters in text.
Its value can be positive or negative.
Two paragraphs with increased and decreased letter spacing respectively.
Van Gogh is a well-known post-impressionist artist
Van Gogh is a well-known post-impressionist artist
<p style="letter-spacing: 1.5px">
Van Gogh is a well-known
post-impressionist artist
</p>
<p style="letter-spacing: -1.5px">
Van Gogh is a well-known
post-impressionist artist
</p>
For details on letter-spacing, see our CSS letter-spacing Property Reference.
The line-height property specifies the space between each line of text.
Its value is auto, or any valid length value, such as px, em, etc.
Two paragraphs with different line heights.
Van Gogh suffered from psychotic episodes and delusions and though he worried about his mental stability, he often neglected his physical health, did not eat properly and drank heavily. His friendship with Gauguin ended after a confrontation with a razor when, in a rage, he severed part of his own left ear.
Van Gogh suffered from psychotic episodes and delusions and though he worried about his mental stability, he often neglected his physical health, did not eat properly and drank heavily. His friendship with Gauguin ended after a confrontation with a razor when, in a rage, he severed part of his own left ear.
<p style="line-height: 1.9em;">
Van Gogh suffered from psychotic episodes
and delusions and though he worried about
his mental stability, he often neglected
his physical health, did not eat properly
and drank heavily. His friendship with
Gauguin ended after a confrontation with
a razor when, in a rage, he severed part
of his own left ear.
</p>
<p style="line-height: 1em;">
Van Gogh suffered from psychotic episodes
and delusions and though he worried about
his mental stability, he often neglected
his physical health, did not eat properly
and drank heavily. His friendship with
Gauguin ended after a confrontation with
a razor when, in a rage, he severed part
of his own left ear.
</p>
For details on line-height, see our CSS line-height Property Reference.
The word-spacing property sets the space between the words in text.
Its value can be any valid length value, such as, px, pt, cm, etc.
A paragraph with increased word spacing.
Van Gogh is a well-known post-impressionist artist
<p style="word-spacing: 8px">
Van Gogh is a well-known
post-impressionist artist
</p>
For details on word-spacing, see our CSS word-spacing Property Reference.
The text-shadow property adds shadow to text.
This property accepts up to 4 values: x-offset, y-offset, blur, and color.
Text with a shadow.
Van Gogh is a well-known post-impressionist artist
<p style="font-size: 20px; text-shadow: 2px 2px #ccc;">
Van Gogh is a well-known
post-impressionist artist
</p>
For details on the text-shadow property, see our CSS text-shadow Property Reference.
By using negative x-offset and y-offset values, text can get an inner-shadow effect with text-shadow. Below is an example.
<style>
.inner-shadow {
font-size: 24px;
color: lightblue;
font-weight: bold;
text-shadow: 1px 1px white, -1px -1px #000;
}
</style>
<h3 class="inner-shadow">
Van Gogh is a well-known post-impressionist artist
</h3>
This table lists all text properties.
| Property | Description |
|---|---|
| color | Sets the color of the text |
| direction | Sets the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line-height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies a line-decoration for the text |
| text-indent | Specifies the indentation of the first line in a text block |
| text-shadow | Specifies a shadow effect for the text |
| text-transform | Sets the capitalization of text |
| text-overflow | Specifies how text that that does not fit in a container is displayed |
unicode-bidi |
Used together with the direction property. Specifies how bi-directional text is handled in a multi-language text document. Hence the name 'bidi'. |
| vertical-align | Sets the vertical alignment of text inside an element. |
| white-space | Specifies how white-space in text is handled. |
| word-spacing | Increases or decreases the space between words in a text |
