1. Home
  2. How-to Articles
  3. How to Change Text Style in CSS

How to Change Text Style in CSS

  • google plus

In Brief...

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.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  1. 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
  2. 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

Related Training

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss