CSS Text
What is Text?
Text actually the most important asset of any website so written content written any language is said to be a text and here we discuss css text with complete example.Syntax:
text-property:value;
Example:
text-align:center;
Important Properties of Text Are:
text-color
text-align
text-shadow
text-decoration
text-ident
text-transform
Now we use these properties one by one with example.
Examples:
text-color:red;
text-align:center;
text-decoration:underline;
text-transform:uppercase;
text-ident:30px;
text-shadow:2px 2px black;
What is text color property?
Text color property is used to change the color of text.
Syntax:
text-color:value;
value include=>>color names or color schemes like rgb or hexa code
Example:
text-color:red;
text-color:rgb(240,200,140);
text-color:#efff00;
How to use this property?
<html>
<head>
<style>
p{
text-color:green;
}
</style>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>
Outcome:
This program will show you written paragraph in green color.
Text Alignment
Text align property is used to set the direction of text.
Syntax:
text-align:value;
value includes=>>right,left,center
Example:
text-align:center;
How to use this property?
<html>
<head>
<style>
p{
text-color:green;
text-align:center;
}
</style>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>
Outcome:
This program will show you written paragraph in green color on the center of webpage.
Text Decoration
Text decoration property is used to apply decoration on text lines.
Syntax:
text-decoration:value;
value includes==>underline,overline,line-through
Example:
text-align:overline;
How to use this property?
<html>
<head>
<style>
p{
text-color:green;
text-align:center;
text-decoration:underline;
}
</style>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>
Outcome:
This program will show you written paragraph with underline decoration in green color on the center of webpage.
Text Transformation
Text transformation property is used to change the written text into uppercase and lower case letter.
Syntax:
text-transform:value;
value includes==>uppercase,lowercase,capitalize
Example:
text-transform:uppercase;
How to use this property?
<html>
<head>
<style>
p{
text-color:green;
text-align:center;
text-decoration:underline;
text-transform:uppercase;
}
</style>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>
Outcome:
This program will show you written paragraph with underline decoration in green color in capital alphabet letters on
the center of webpage.
Text Ident
The text-indent property is used to specify the indentation of the first line of a text.
Syntax:
text-ident:value;
value includes==>values + units like 40px or 10% etc
Example:
text-ident:45px;
How to use this property?
<html>
<head>
<style>
p{
text-color:green;
text-align:center;
text-decoration:underline;
text-transform:uppercase;
text-ident:50px
}
</style>
</head>
<body>
<p>
Hello World! this is a paragraph.
</p>
</body>
</html>
Outcome:
This program will show you written paragraph with underline decoration in green color in capital alphabet letters with first
line ident 50px on the center of webpage.
Text Shadow
Text shadow property is used to apply shadow effect on text.
Syntax:
text-shadow:x-axis y-axis shadow color;
Example:
text-shadow:2px 2px black;
How to use this property?
<html>
<head>
<style>
p{
text-color:green;
text-align:center;
text-decoration:underline;
text-transform:uppercase;
text-ident:50px;
text-shadow:2px 2px lightgrey;
}
</style>
</head>
<body>
<p>
Hello World! this is a paragraph.
</p>
</body>
</html>
Outcome:
This program will show you written paragraph with underline decoration in green color in capital alphabet letters with first line ident 50px with shadow effect on the center of webpage.
