CSS text properties
With CSS text properties, you can define how text is displayed. You can specify the color of text, alignment of text, and more.
This tutorial focuses on:
- Setting text color
- Aligning text
- Decorating text
- Setting letter spacing
Setting text color
Text color is set with the color property. You can specify the color of text with a color name, an RGB value, or a hexadecimal value.
Example:<html>
<head>
<title>Background properties</title>
<style type="text/css">
h1 {color: green;}
p {color: #00008b;}
p.text{color: rgb(47, 49, 49);}
</style>
</head>
<body>
<h1>This text is green</h1>
<p>This text is darkblue</p>
<p class="text">This text is darkslategray</p>
</body>
</html>
Output:This text is green
This text is darkblue
This text is darkslategray
Aligning text
The alignment of text in an element is set with the text-align property. With this property, you can set text to align to the left, right, or center.
Example:<html>
<head>
<title>Background properties</title>
<style type="text/css">
h1 {text-align: left;}
h2 {text-align: right;}
p {text-align: center;}
</style>
</head>
<body>
<h1>This text is aligned to the left</h1>
<h2>This text is aligned to the right</h2>
<p>This text is aligned to the center</p>
</body>
</html>
Output:This text is aligned to the left
This text is aligned to the right
This text is aligned to the center
Decorating text
Text decoration is set with the text-decoration property. With this property, you can set text to be underlined, have an overline, and more.
Example:<html>
<head>
<title>Background properties</title>
<style type="text/css">
p {text-decoration: underline;}
a {text-decoration: overline;}
h2 {text-decoration: line-through;}
h1 {text-decoration: blink;}
</style>
</head>
<body>
<p>This text is underlined</p>
<a href="http://www.landofcode.com">Landofcode.com main page</a>
<h2>This text has a line through it</h2>
<h1>This text is blinking</h1>
</body>
</html>
Setting letter spacing
Letter spacing is set with the letter-spacing property. You can increase or decrease the letter spacing between text with this property. The letter-spacing property takes the value "normal" for normal spacing between text characters or a numeric attribute specified by pixels followed by "px" for a fixed space between text characters.
Example:<html>
<head>
<title>Background properties</title>
<style type="text/css">
p {letter-spacing: normal;}
p.two {letter-spacing: 5px;}
p.three {letter-spacing: 10px;}
p.four {letter-spacing: 15px;}
</style>
</head>
<body>
<p>The characters in this paragraph have normal spacing</p>
<p class="two">The characters in this paragraph have a spacing of 5 pixels</p>
<p class="three">The characters in this paragraph have a spacing of 10 pixels</p>
<p class="four">The characters in this paragraph have a spacing of 15 pixels</p>
</body>
</html>
Output:The characters in this paragraph have normal spacing
The characters in this paragraph have a spacing of 5 pixels
The characters in this paragraph have a spacing of 10 pixels
The characters in this paragraph have a spacing of 15 pixels