CSS Text Color
The color property is used to set the color of the text.
The color is specified by:
- a color name - like "red"
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- syntax:
h1{
Text Alignment and Text Direction
We have the following properties:
- text-align
- text-align-last
- direction
- Unicode-bidi
- vertical-align
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
Example: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
text-align: justify;
}
output:
As shown in the above example
Note: Center aligned, and left and right-aligned text (left alignment is the default if text direction is left-to-right, and right alignment is the default if text direction is right-to-left)
Note: When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight
Text Align Last
The text-align-last property specifies how to align the last line of a text
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<br>
<hr>
<h2>text-align-last: center:</h2>
<p class="cente">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<br>
<hr>
<h2>text-align-last: justify:</h2>
<p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p.right {
text-align-last: right;
}
p.center {
text-align-last: center;
}
p.justify {
text-align-last: justify;
}
output:
Text Decoration
We will learn the following properties:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
Shorthand Property:
The text-decoration property is used to add a decoration to the text.
Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.
syntax: text-decoration: underline red solid 5px;
example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<br>
<h2>text-align-last: center:</h2>
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<br>
<h2>text-align-last: justify:</h2>
<p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p.right {
text-align-last: right;
text-decoration: line-through yellow double 5px;
}
p.center {
text-align-last: center;
text-decoration: overline blue dotted 5px;
}
p.justify {
text-align-last: justify;
text-decoration: underline red solid 5px;
}
h1 {
text-decoration: overline underline;
}
output:
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text or capitalize the first letter of each word.
text-transform: uppercase;
text-transform: capitalize;
text-transform: lowercase;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Using the text-transform property</h1>
<p>A link with no underline: <a href="https://devjunctionpoint.blogspot.com/">devjunctionpoint.com</a></p>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p a {
text-transform: uppercase;
}
p {
text-transform: capitalize;
}
h1 {
text-transform: lowercase;
}
output:
Text Spacing
we will learn the following properties:
- text-indent - text-indent property is used to specify the indentation of the first line of a text
- letter-spacing - letter-spacing property is used to specify the space between the characters in a text
- line-height - line-height property is used to specify the space between lines
- word-spacing - word-spacing property is used to specify the space between the words in a text
- white-space - white-space property specifies how white-space inside an element is handled
Text Shadow
The text-shadow property adds shadow to the text
We can specify the horizontal shadow (2px) and the vertical shadow (2px)
syntax:
text-shadow: horizontal shadow vertical shadow add blur effect color:
text-shadow: 2px 2px 2px red;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-shadow: 2px 2px 4px red;
}
output:
Do leave your comments