CSS Text
Text
Color:
The color
property is used to set the color of the text. In CSS the text color is most often
specified by:
- Hex values like
"#fff"
- RGB values like
"RGB(30,40,50)"
- A color name
like "yellow"
The default
color for a page is defined in the body of the selector.
Example
<style type="text/css">
p{
/* Color name*/
color: red;
}
h1{
/* RGB values*/
color: RGB(100, 200, 100);
}
h2 {
/* HEX Code*/
color: #adbb;
}
</style>
<p> This Color value by color name</p>
<h1>This Color value by RGB values </h1>
<h2>This Color value by HEX Code </h2>
Text
Alignment:
The text-align
property is used to set the horizontal alignment of the text. Text can be
centered or aligned to the left or right, or justified. When text-align is set
to "justify" each line is stretched so that every line has equal
width and the left and the right margins are straight like newspapers.
Example
<style type="text/css">
p{
color: red;
text-align: center;
}
h1{
color:RGB(100, 200, 100);
text-align: left;
}
h2 {
color:#adbb;
text-align: right;
}
</style>
<p> Text Alignment Center</p>
<h1>Text Alignment Left </h1>
<h2>Text Alignment Right </h2>
Result:
Text
Decoration:
The text-decoration property is used to set or remove decorations
for the text. The text-decoration property is mostly used to remove underlines
for links for design purposes.
Example:
<style type="text/css">
a{
text-decoration: none;
}
p{
text-decoration: line-through
}
h1{
text-decoration: overline;
}
h2 {
text-decoration: underline;
}
</style>
<a href="">Text Decoration none</a>
<p> Text Decoration line-through</p>
<h1>Text Decoration overline</h1>
<h2>Text Decoration underline </h2>
Result:
Text
Transformation:
The txt-transformation property is used to specify uppercase and
lowercase in text. It can be used to turn everything into uppercase and
lowercase letters, or capitalize the first letter of the word.
Example
<style type="text/css">
p{
text-transform: uppercase;
}
h1{
text-transform: lowercase;
}
h2 {
text-transform: capitalize;
}
</style>
<p> text transformation uppercase</p>
<h1>TEXT TRANSFORMATION LOWERCASE</h1>
<h2>text transformation capitalize </h2>
Result:
Text
Indentation:
The text-indentation property is used to specify the indentation of the first
line of the text.
Example
p{
text-indent: 20px;
}
CSS Text Properties
Property | Description |
clolor | Set the color of the text. |
direction | specifies the text direction/writing direction. |
letter-spacing | Increases or decreases the space between characters in the text. |
line-hight | Set the line height. |
text-align | Specifies the horizontal alignment of text. |
text-decoration | Specifies the decoration add to the text. |
text-indent | Specifies the indentation of the first line in a text block. |
text-shadow | Specifies the shadow effect added to the text. |
text-transform | Controls the capitalization of text. |
vertical-align | Sets the vertical alignment of an element. |
white-space | Specifies how white space inside an element is handled. |
word-spacing | Increases or decreases the space between the word in a text. |
Leave a comment
No Cmomments yet