Author: MDBootstrap
Text Color
The color
property is used to set the color of the text.
.blue-text {
color: blue;
}
<p class="blue-text">I am a paragraph</p>
Live preview
I am a paragraph
Note: If you set a color value to the parent element, all the children elements will inherit the color.
.blue-text {
color: blue;
}
<div class="blue-text">
<h3>I am a heading and my parent element has a class <code>blue-text
Live preview
I am a heading and my parent element has a class blue-text
, so I am blue
I am a paragraph and my parent element has a class blue-text
, so I am blue
Text Alignment
The text-align
property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):
Live preview
I am centered
I am left-aligned
I am right-aligned
Text Transformation
The text-transform
property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:
.uppercase-example {
text-transform: uppercase;
}
.lowercase-example {
text-transform: lowercase;
}
.capitalize-example {
text-transform: capitalize;
}
<p class="uppercase-example">I am an uppercase example</p>
<p class="lowercase-example">I am an lowercase example</p>
<p class="capitalize-example">I am an capitalize example</p>
Live preview
I am an uppercase example
I am an lowercase example
I am an capitalize example
Note: There are many more ways to modify the text, but you will learn about them in future lessons.
Previous lesson Next lesson
Spread the word: