Text Styling in CSS

CSS Text Styling

Text Styling: There on Many texts and images are the website, isn’t it? The more beautiful the text, the more beautiful the website. To give CSS we have given below all the features / rules of the text. There is no problem if not understanding anything by reading, everything will be easily understood when we look at the example.

color Used to give color to writing.
direction We write English and Bengali from left to right, some countries have to write like Arabic from right to left. This will be from right to left or from left to right so the direction is set with CSS rule.
letter-spacing This property is used to set the distance from one letter to another.
line-height The height of a line is set by that.
text-align How to format / align the text, right or left or center is set.
text-decoration Used to give a line in the middle of a writing or above or in the middle.
text-indent In newspapers we often see that there is a little gap before the word in the first line. Such a gap is given in the HTML file with text-indent.
text-transform Used to change text in lowercase or uppercase letters.
word-spacing Used to give space between each word in the text.

In addition to these, there are some other properties of CSS text styling.

CSS Text Color:

In the meantime, we’ve seen the text-color change . Let’s see again

p{
  color:red;
}

Which will change the text of all the ‘P’ tags to red. Instead of the name of the color, the color code can also be given.

CSS Text Direction:

We write English and others from left to right, some countries have to write like Arabic from right to left. This will be from right to left or from left to right so the direction is set with CSS rule. Left-to-right is set by default. The way we write. If you create a web site for a country that writes from right to left, you need to set it right-to-left. And it sets:

body{
  direction:rtl;
}

rtl means right-to-left;

CSS Letter Spacing:

letter-spacing: This property is used to set the distance from one letter to another.

body{
  letter-spacing:5px;
}

The more pixels I give, the more space there will be between the two characters. Again if letter-spacing: -5px; Di, then one color will fall on another color.

For example, paste the following code into an HTML file and then look in the browser:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {letter-spacing:5px;}
      h1 {letter-spacing:-3px;}
    </style>
  </head>

  <body>.
    <h1>This is a heading </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.     Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>

  </body>
</html>

CSS Text Align

How the text-align texts are set / aligned is set to right or left or center. Three types can be aligned, center, left & right. Normally all the text is left aligned. For example, paste the following code into an HTML file and then look in the browser:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .center{text-align:center}
      .left {text-align:left}
      .right {text-align:right}
    </style>
  </head>

  <body>
    <h1 class="center">This is centered text</h1>
    <h1 class="left">This is left aligned text</h1>
    <h1 class="right">This is right aligned text</h1>
  </body>
 </html>

CSS Text Decoration

Used to take a text with text-decoration or to give a line above or in the middle. Three types of text-decoration can be done, underline, overline and line-through. For example, paste the following code into an HTML file and then look in the browser:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #underline {text-decoration:underline;}
      #overline {text-decoration:overline;}
      #line_through{text-decoration:line-through;}

    </style>
  </head>

  <body>
    <h1 id="underline">a text with underline</h1>
    <h1 id="overline">a text with overline </h1>
    <h1 id="line_through">a text with line-through with it</h1>
  </body>

 </html>

Read full article about CSS Text Styling properties continue reading on...

For more exciting tips and tricks about programming and coding please read our others articles

Find My page on Instagram: @stack.content

Find Me on Twitter: @mrezaulkarim_