Hello

» Web Development   »   C.S.S   »   Styling Text

Styling Text

Post date: 2010-06-27

Text Color

The color property is used to set the color of the text. The color can be specified by:

  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • Hex - a hex value, like "#ff0000"

The default color for a page is defined in the body selector.

Example


<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}

</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

For W3C compliant CSS: If you define the color property, you must also define the background-color property.

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

Text can be centered, or aligned to the left or right, or justified.

When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Example


<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Try to resize the browser window to see how justify works.</p>
</body>

</html>


Text Decoration

The text-decoration property is used to set or remove decorations from text.

The text-decoration property is mostly used to remove underlines from links for design purposes:

Example

<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>

<body>
<p>Link to: <a href="http://www.ict-kh.com">ict-kh.com</a></p>
</body>

</html>

It can also be used to decorate text:

Example

<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>

</html>

It is not recommended to underline text that is not a link, as this often confuses users.

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Example

<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>


Text Indentation

The text-indentation property is used to specify the indentation of the first line of a text.

Example

<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>


Previous 1 2 3 Next

Related Tutorials

Styling Backgrounds
Post: 2010-06-26
Styling Text
Post: 2010-06-27
Styling Font
Post: 2010-06-27