Study Smart, Not Hard. - StudyMuch

CSS Text PART-2

Published by StudyMuch on

StudyMuch 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.

CSS Text Underline

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.

CSS Underline Color


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;

CSS underline style

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;

CSS Letter Spacing

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;

CSS Text Direction

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;

CSS Text

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-

Categories: CSS

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!

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *