Conquer CSS Episode[7]:- CSS Text and CSS Links

You are currently viewing Conquer CSS Episode[7]:- CSS Text and CSS Links

Welcome to the 7th amazing episode of Conquer CSS series, In this post, we are going to learn about what are the CSS text properties how we can use them, and how we can add links in CSS

CSS – Text

There are various text properties that you can use, here I have explained the most used properties. These properties are as mentioned below:-

  • The color property is used to set the color of a text.
  • The direction property is used to set the text direction.
  • The text-align property is used to align the text of a document.
  • The text-decoration property is used to underline, overline, and strikethrough text.
  • The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
  • The text-shadow property is used to set the text-shadow around a text.

Text Color

A possible value could be any color name in any valid format which we have seen in episode 6 of CSS series. The following example demonstrates how to set the text color. 

   <p style = color:red;>

      This text will be written in red.

   </p>

 

Text Direction

The following example demonstrates how to set the direction of a text. Possible values are ltr(left to right) or rtl (right to left).

   <p style = direction:rtl;>

      This text will be rendered from right to left

   </p>

Also read:- Conquer CSS Sries

Text Alignment

The following example demonstrates how to align a text. Possible values are left, right, center, justify.

p{
text-align:right;
}
p{
text-align:center;
}
p{
text-align:left;
}

Decorating the Text

The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.

p{
text-decoration:underline;
}
p{
text-decoration:line-through;
}
p{
text-decoration:overline;
}

Text Cases

The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.

p{
text-transform:capitalize;
}
p{
text-transform:uppercase;
}
p{
text-transform:lowercase;
}

Text Shadow

The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.

<p style=”text-shadow:4px4px8px blue;”>

CSS – Links

In this section, I have listed all the different properties which you can set to the hyperlink using CSS. You can set the following properties of a hyperlink −

We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

  • The: link signifies unvisited hyperlinks.
  • The: visited signifies visited hyperlinks.
  • The: hover signifies an element that currently has the user’s mouse pointer hovering over it.
  • The: active signifies an element on which the user is currently clicking.

Usually, all these properties are kept in the header part of the HTML document.

Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Color of Links

The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.

a:link {

color:#000000

}

Color of Visited Links

The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.

a:visited {

color: #006600

}

Change the Color of Links when Mouse is Over

The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.

a:hover {

color: #FFCC00

}

Now, you bring your mouse over this link and you will see that it changes its color to yellow.

Change the Color of Active Links

The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.

a:active {

color: #FF00CC

}

Leave a Reply