2.8 KiB
title |
---|
Text |
Text
Several properties are provided by CSS to change the look and feel of the text. Various text properties are explained below.
Text Color
<html>
<body>
<p>This is an example of CSS text property.</p>
</body>
</html>
p {
color:red;
}
In the above example, the text color
of <p>
element is changed to red. You can also specify the color as RGB values, HLS values, and hex codes (For more information about colors, click here).
Text Alignment
text-align
property is used to set horizontal alignment of text. It can take values left
,right
,center
,and justify
.
p {
text-align: center;
}
Here the text is aligned to the center
(example).When text-align
is set to justify
,each line is stretched so that every line has equal width, and the left and right margins are straight (example).
Text Decoration
p {
text-decoration: underline;
}
The text-decoration
property is used to set or remove decorations from text. The value text-decoration: none;
is often used to remove underlines from links. Other text-decorations
include overline
,line-through
,and underline
(example).
Text Transformation
p {
text-transform: capitalize;
}
The text-transform
property is used to convert the entire text to uppercase
,lowercase
or to capitilize
each word(example).
Text Shadow
.header {
text-shadow: 5px 5px 5px red;
}
The text-shadow
property is used to add shadow to the text. The h-shadow
(horizontal shadow, the first value) and v-shadow
(vertical shadow, the second value) are required values. Then you can add blur-radius
and color
as optional values.
In the example provided above, the first value represents the horizontal value, the second is the vertical value, the third value is the blur value and the last one represents the color value.
Letter Spacing
The letter-spacing
property sets the space between characters in a text.
p {
letter-spacing: 5px;
}
Line Height
The line-height
property sets the space between two lines of text.
p {
line-height: 5px;
}
Word Spacing
The word-spacing
sets the space between words in a text.
p {
word-spacing: 5px;
}