CSS Text Styles (Color, Alignment, Decoration, Transformation)

CSS Text Styles (Color, Alignment, Decoration, Transformation) with Examples: The main content of the Web site is text. To enhance the beauty and get some special benefits, the style of text is created through CSS. There are several things to be mentioned in the declaration to create text styles.

CSS Text Styles

The CSS Text Styling is used to add special benefits to the web page. To get more attraction to your web pages then use CSS Text Styles. The following are used for styling CSS Text.

Text color
Text Alignment
Text Decoration
Text Transformation

CSS Text Color

We usually use some more tags including <P>,<h1>, <h2>, <a> to use text via HTML. To specify the color of these textures, Declaration must be done on either p {colour: # FC9} or similar. In other places of p, h1, h2, a, body, or tag of any tag can sit or class. There may be three types of Declaration for determining the text’s color. Such as

Text color Syntax

p{colour: # FC9}
p{colour: blue;}
p{colour: rgb(255,0,0);}

Text color Example

<html>
<head>
<title> www.tutorials.freshersnow.com</.title >
<style>
body {background: # 090}
h1 {colour: #C00;}
p{colour: blue;}
mar {colour: rgb(150,0,0); font-size: 25px;}
</style>
</head>
<body>
<h1> www.tutorials.freshersnow.com </h1>
<p>
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
</p>
</body>
</html>

Text color Example Output

Open a Notepad and enter the code at the top and save the file from the File menu by clicking on Save as type: Save as type: All files, save the index.html file with Mozilla Firefox or Google Chrome and check.

CSS Text Alignment

Text alignment is used to sort text on web pages. To keep the text on the left side of the page, Declaration must be text-align: left; Similarly to be placed on the right side, Declaration must be text-align: right; Declaration to be placed in the middle of the text-align: center; If you want to sort every line of text in the same shape, then you should declare text-align: justify.

Text Alignment Example

<html>
<head>
<title>www.tutorials.freshersnow.com </title>
<style>
body {background: # 090}
#right {text-align: right;}
#left {text-align: left;}
#center {text- align: center}
#justify {text-align: justify;}
</style>
</head>
<body>
<h2> Example of right align </h2>
<p id = "right">
The tutorials.freshersnow is one of  the best tutorial website. <br />
The tutorials.freshersnow <br /> is one of the best tutorial website.</p>
<h2> Example of left align </h2>
<p id ="left">
The tutorials.freshersnow  is the best tutorial website. <br />
The tutorials.freshersnow <br /> is one of the best tutorial website.</p>
<h2> Example of center align </h2>
<p id ="center"> 
The tutorials.freshersnow <br />is one of the best tutorial website. <br />
The tutorials.freshersnow <br />is one of the best tutorial website.</p>
<h2> Example of justify align </h2>
<pid ="justify">
The tutorials.freshersnow is one of the best tutorial website.
The tutorials.freshersnow is one of the best tutorial website.
The tutorials.freshersnow is one of the best tutorial website.
</p>
</body>
</html>

Text Alignment Example Output

CSS Text Decoration

Adding a link via HTML’s <a> tag to any text will bring the straight line below the text. To move the straight line, text-decoration is used. To place the straight line above the text, the Declaration must be text-decoration: overline; Declaration must be made to place the straight line in the middle of the text text-decoration: line-through; Declaration to be placed below the text of the straight line text-decoration: underline; To make the text visible and invisible, Declaration must be text-decoration: blink; Declaration must be done to completely remove the straight line text-decoration: none;

Text Decoration Example

<html>
<head>
<title> www.tutorials.freshersnow.com </ title>
<style>
body {background: # 090}
h3 {text-decoration: overline;}
h4 {text-decoration: line-through;}
h5 {text-decoration: underline;}
h6 {text-decoration: blink;}
#none {text-decoration: none}
</style>
</head>
<body>
<h3> This is an example of overline </h3>
<h4> This is an example of line-through </h4>
<h5> This is an example of underline </h5>
<h6> This is an example of blink </h6>
<a href="tutorials.freshersnow.com"id="none"> <h2> this is a link and an example of text-decoration none </h2> </a>
</body>
</html>

Text Decoration Example Output

CSS Text Transformation

Text transformation is used to convert text included letters to uppercase or lowercase letters or to convert uppercase letters into each first letter. The declaration must be made to convert all the characters included in the text to upper case text-transform: uppercase; Declaration to be converted to lowercase letters should be text-transform: lowercase; Declaration must be made to convert the first letter of each word to upper case text-transform: capitalize.

Text Transformation Example

<html>
<head>
<title> www.tutorials.freshersnow.com </title>
<style>
body {background: # 090}
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
</style>
</head>
<body>
<p class "uppercase"> This is an example of uppercase. </p>
<p class "lowercase"> This is an example of lowercase. </p>
<p class = "capitalize"> This is an example of capitalize. </p>
</body>
</html>