CSS Text
CSS has many properties for formatting text. With the help of CSS we can style a text with any color, we can set the background color of a text, change the text alignment and more.
Text Color
We can set the color of the text by using the color property. We can specify the color by the following ways:
- color name – like “green”
- an RGB value – like “rgb(0, 255, 0)”
- a HEX value – like “#00ff00”
In an example below let’s write a code and set the color of the text.
Example
<html>
<head>
<style>
h1 {
color: green;
}
h2 {
color: rgb(0, 255, 0);
}
h3 {
color:#00ff00;
}
</style>
</head>
<body>
<h1>Green color text, specified by using a color name.</h1>
<h2>Green color text, specified by using RGB value.</h2>
<h3>Green color text, specified by using HEX value.</h3>
</body>
</html>
Background color
The background color of a text can be defined by using the background-color property.
In an Example below let’s write a code and define the background color of a text.
Example
<html>
<head>
<style>
h1{
background-color:blue;
}
</style>
</head>
<body>
<h1>This text has blue background.</h1>
</body>
</html>
Set the background color of the whole page
<html>
<head>
<style>
body{
background-color:lightblue;
}
</style>
</head>
<body>
<h1>This whole page has lightblue background color.</h1>
</body>
</html>
Text Alignment
The CSS text-align property is used to change the position of the text. A text can be aligned to left, right or centered.
In an example below let’s write a code and align the text at left, right and center.
Example
<html>
<head>
<style>
h1 {
text-align:center;
}
h2 {
text-align:right;
}
h3{
text-align:left;
}
</style>
</head>
<body>
<h1>This text is aligned to center.</h1>
<h2>This text is aligned to right.</h2>
<h3>This text is aligned to left.</h3>
</body>
</html>
NOTE:- By default the text is aligned to left.
CSS Text Decoration
In CSS we have lot of properties to decorate the text. Like we can use text-decoration-line property to add a decoration line to text. text-decoration-color property to change or set the color of the decoration line. And text–decoration-style property to set the style of the decoration line.
In an Example below let’s write a code to add a decoration line to text.
Example
<html>
<head>
<style>
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h1>An overline text decoration.</h1>
<h2>A line through text decoration.</h2>
<h3>An underline text decoration.</h3>
</body>
</html>
Now let’s set the color and style the decoration line with text-decoration-color and text-decoration-style property.
Example
<html>
<head>
<style>
h1 {
text-decoration-line: overline;
text-decoration-color: red;
text-decoration-style: dotted;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: green;
text-decoration-style: dashed;
}
h3 {
text-decoration-line: underline;
text-decoration-color: blue;
text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>A red color dotted overline text decoration.</h1>
<h2>A green color dashed line through text decoration.</h2>
<h3>A blue color wavy underline text decoration.</h3>
</body>
</html>
