How to Change Text Style in CSS

See CSS: Tips and Tricks for similar articles.

Changing text style in CSS is achieved using the text-decoration and text-transform properties. The text-decoration property is used to add effects to text, such as underlines and line-throughs. The text-transform property is used to change the capitalization of text.

You can use the following values for the text-decoration property:

none
underline
overline
line-through

The none value of the text-decoration property can be used to remove the underline from links, as shown below:

<a href="http://www.webucator.com"
style="text-decoration: none;">Webucator</a>

The following shows this code in use:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Text-Align, Text-Decoration and Text-Indent</title>
</head>
<body>
<h1>Text-Decoration </h1>
	<div style="text-decoration: none;">text-decoration:none</div>
	<div style="text-decoration: overline;">text-decoration:overline</div>
	<div style="text-decoration: underline;">text-decoration:underline</div>
	<div style="text-decoration: line-through;">text-decoration:line-through</div>
<div><a href="http://www.webucator.com" 
	style="text-decoration: none;">Webucator</a></div>
</body>
</html>

This code renders the following: Text Decoration

You can use the following values for the text-transform property:

none
capitalize
uppercase
lowercase

The following code sample shows the effects of text-transform:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Text-Transform</title>
</head>
<body>
<h1>Text-Transform</h1>
	<div style="text-transform: none;">Text-Transform: None</div>
	<div style="text-transform: capitalize;">Text-Transform: Capitalize 
				- this is written in all lowercase letters but is capitalized</div>
	<div style="text-transform: lowercase;">Text-Transform: Lowercase</div>
	<div style="text-transform: uppercase;">Text-Transform: Uppercase</div>
</body>
</html>

This code renders the following: Text Transform

How to Change Text Style in CSS

Related Articles