CSS Text PART-2
CSS Text PART-2 (Text Decoration, Letter Spacing, Word Spacing, Line Height, and Text Direction)
In this part of the tutorial, we are going to learn all the left CSS Text’s properties in the Part-1 tutorial. Here we will learn CSS Text Decoration, CSS Letter Spading, White Space, Line Height and Text Direction with programming example of all properties with outputs.
If you not learned the PART-1 CSS Text Tutorial visit and learn the CSS Text important properties like (CSS Text colour, CSS Text Align, CSS Text Indent, CSS Text Transform and CSS Text Shadow) Learn CSS Text Part-1 Tutorial
CSS Text Decoration
In CSS text-decoration property, we use this property to set the different style and decorate the text, such as color, style and decoration line (stylish underline of text).
In CSS the text-decoration property is shorthand for text-decoration-style, text-decoration-line and text-decoration-color.
Now we learn valid value to use this decoration style and design in CSS Text.
Valid Value to use text-decoration-line –
- underline: This property is used to set decorative line beneath a text.
- none: Use to provide no decorative underline.
- overline: It us used to provide a decorative line above a text.
- line-through: It is used to set decorative line going through the middle of a text.
Now we see the Example of text-decoration-line.
Example of Text Decoration Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Text Decoration Line</title>
<style type="text/css">
body{background: bisque;}
#underline{text-decoration: underline;}
#line-through{text-decoration: line-through;}
#overline{text-decoration: overline;}
</style>
</head>
<body>
<h3 style="text-align: center;">StudyMuch
</h3> <p id="underline">Here we used the
underline value.</p>
<p id="line-through">Here we used
line-through value.</p>
<p id="overline">Here we used overline
value</p>
</body>
</html>
|
Output of above programming example.
 |
Above you can see the we used the text-decoration; underline, overline and line-through.
Valid Value to use text-decoration-color –
For using the colorful underline, we use only one value and this value is color.
- <color>
Example of Text Decoration Color;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Text Decoration Color</title>
<style type="text/css">
h3{text-align: center;}
body{background:aliceblue;}
#color-1{text-decoration:
underline darkviolet}
#color-2{text-decoration:
line-through red}
#color-3{text-decoration:
overline blue}
#color-4{text-decoration: underline
double green;}
</style>
</head>
<body>
<h3>StudyMuch</h3>
<p id="color-1">Here we used Color value.</p>
<p id="color-2">Here we used Color value.</p>
<p id="color-3">Here we used Color value</p>
<p id="color-4">Here we used color value.</p>
</body>
</html>
|
Output of above programming examples.
 |
Valid Value to use text-decoration-style –
- dotted: use to draw a dotted line.
- solid: use to draw a solid line.
- wavy: use to draw a wavy line.
- dashed: use to draw a dashed line.
-
double: use to draw a double line.
Example of Text Decoration Style;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Text Decoration Style </title>
<style type="text/css">
h3{text-align: center;}
body{background:aliceblue;}
#dotted{text-decoration: underline
wavy green}
#dashed{text-decoration: overline
dotted darkorange }
#double{text-decoration: overline
double red}
#wavy{text-decoration: underline
dashed blue}
</style>
</head>
<body>
<p id="dotted">Here we used Color value.</p>
<p id="dashed">Here we used Color value.</p>
<p id="double">Here we used Color value</p>
<p id="wavy">Here we used color value.</p>
</body>
</html>
|
Output of above programming example;
 |
Above you see the programming output, here we use the different – different underline and overline style.
CSS Letter Spacing
In CSS the letter-spacing property is used to sets the length and behavior of the space between the letter.
The valid value is used to this property is given below;
- <length>: set through the length.
- normal: It sets the normal spacing for the current using font.
Now we see the example of CSS Letter Spacing with output, so you understand better.
Example of CSS Letter Spacing;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Letter Spacing</title> <style type="text/css"> h3{text-align: center;} #normal{letter-spacing: normal color: red;} #length{letter-spacing: 6px; color: darkgreen;} #length-1{letter-spacing: 2pt; color:blue ;} </style> </head> <body> <p id="normal"> Hello Guys! Here we used <b>normal</b> value to set the letter spacing.</p> <p id="length"> Hello Guys! Here we used <b> length</b> value to set the letter spacing.</p> <p id="length-1"> Hello Guys! Here we used <b> length</b> value to set the letter spacing.</p> </body> </html> |
Output of above programming example;
 |
Above you see the output of programming example, we use the letter spacing property to set spacing between the letter.
CSS Text Direction
The CSS text-direction property is used to sets the direction of a text, writing direction with a block level element.
Valid value to set the text direction;
- rtl: This value is used to set the text and other element go from the right to left.
- ltr: This value is used to set the text and other element go from the left to right.
Example of CSS Text Direction;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS Text Direction</title>
<style type="text/css">
h3{text-align: center;}
#ltr{ direction: ltr;
color: red;}
#rtl{direction: rtl;
color: darkgreen;}
</style>
</head>
<body>
<p id="ltr">Here we uesd <b>ltr</b>
value.</p>
<p id="rtl">Here we used <b>rtl</b>
value</p>
</body>
</html>
|
Output of above programming example;
 |
Above you see the output of programming, first line is starting left side and second line is starting the right side.
CSS Word Spacing
In CSS the word-spacing property is used to sets the length of the space between the word.
Valid value is used to set CSS Word Spacing;
- <length>: Sets word spacing through length value.
- <percentage>: Sets word spacing through percentage value.
- normal: It is used to set the normal word spacing as defined by the browser.
Example of CSS Word Spacing;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS Word Spacing</title>
<style type="text/css">
#normal{word-spacing: normal;
color: darkgreen;}
#percent{word-spacing: 30%;
color: darkred;}
#length{word-spacing: 10px;
color:blue;}
</style>
</head>
<body>
<p id="normal">Hello Guys!Here we uesd
<b>normal</b> value.</p>
<p id="percent">Hello Guys!Here we used <b>
percentage</b> value to sets the word
spacing.</p>
<P id="length">Hello Guys! Here we used
the <b> length</b> vlaue to sets the
word spacing.</P>
</body>
</html>
|
Output of above programming example;
 |
You can see the above programming output, there word distancing is different because we use their word spacing property.
In this Tutorial you learned the CSS Text property such as CSS Text Decoration, CSS Letter Spading, Line Height and Text Direction with programming example and program’s output. I hope you all understand this Tutorial, if you have any doubt from this tutorial then ask on comment box and Contact Us section.
Read Also-
2 Comments
zoritoler imol · July 4, 2022 at 12:36 am
I think other website proprietors should take this internet site as an model, very clean and fantastic user genial layout.
Lavaris · May 13, 2023 at 8:09 pm
Woah! I’m really loving the template/theme of this site.
It’s simple, yet effective. A lot of times it’s
tough to get that “perfect balance” between usability and visual appearance.
I must say you’ve done a awesome job with this.
Also, the blog loads super quick for me on Firefox.
Excellent Blog!