CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.
CSS Text Properties
CSS has several properties for defining the styles of text. These properties give you precise control over the visual appearance of the characters, spaces, words, paragraphs, etc.
You can set following text properties of an element:
Text Color
Text color is defined by the CSS color property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Setting Text Color Using CSS</title>
<style type="text/css">
h1 {
color: #ff0000;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Note:Although, the color of the text seems like it would be a part of the CSS text, but it is actually a standalone property in CSS.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Possible values for this property are: left, right, center, justify, and inherit.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS text alignment</title>
<style type="text/css">
h1 {
text-align: center;
}
p {
width: 400px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Text-align Effect</h1>
<p>CSS is a Style Sheet Language for formatting the document content
(written in HTML or other markup language). You might be interested
by the CSS Working Group wiki too.</p>
</body>
</html>
Note:When
text-alignis set tojustify, each line is stretched so that every line has equal width, and the left and right margins are straight.
Text Decoration
The text-decoration property is used to set or remove decorations from text.
Possible values of this property are: none, underline, overline, line-through, blink and inherit. You should avoid underline text that is not a link, as it might confuse the visitor.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS text decoration</title>
<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><strong>Note:</strong> The <code>blink</code> value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
Warning:The
blinkvalue for the CSStext-decorationproperty is not supported by the most of the browsers. You should avoid this value.
Removing the Links Default Underlines
The text-decoration property is commonly used to remove the default underlines from the hyperlinks. Removing the underline completely can confuse the visitor. Unless you provide some other visual cues to make it stands out, while styling the links.
For example, you can use dots to underline your links instead of a solid line.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Removing default underline from links</title>
<style type="text/css">
a {
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover {
border-bottom: none;
}
</style>
</head>
<body>
<p>Place your mouse pointer <a href="#">over me!</a></p>
</body>
</html>
Note:When you create an HTML link, browsers built in style sheet automatically underline it, so that the readers can see what text is clickable.
Text Transformation
The text-transform property is used to set the cases for a text.
It can be used to set the element’s text content into uppercase or lowercase letters, or capitalize the first letter of each word. Possible values for the text-transform property are:none, capitalize, uppercase, lowercase and inherit.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS text transformation</title>
<style type="text/css">
p.up {
text-transform: uppercase;
}
p.cap {
text-transform: capitalize;
}
p.low {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>Text-transform Effect</h1>
<p class="up">All characters of each word of this paragraph is transformed in uppercase.</p>
<p class="cap">The first character of each word of this paragraph is transformed in uppercase.</p>
<p class="low">All characters of each word of this paragraph is transformed in lowercase.</p>
<p>This is a normal paragraph.</p>
</body>
</html>
Text Indentation
The text-indent property is used to set the indentation of the first line of text of an element. Possible values for the text-indent property are: percentage (%), length(specifying indent space) or inherit.
The following example demonstrates how to indent the first line of a paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS text indentation</title>
<style type="text/css">
p {
text-indent: 100px;
}
</style>
</head>
<body>
<h1>Text-indentation Effect</h1>
<p>The first line of this paragraph is indent by 100px. Play with the value of <code>text-indent</code> property to see how it works. Negative values are allowed.</p>
</body>
</html>
Note:Whether the text is indented from the left or from the right depends on the direction of text inside the element, defined by the CSS
directionproperty.
Word Spacing
The word-spacing property used to sets the spacing between the words.
- Word spacing can be affected by text justification. See the
text-alignproperty. - When whitespace is preserved all space characters are affected by the word spacing. See the CSS
white-spaceproperty.
Possible values for the word-spacing property are: length (specifying the space to be inserted between words), normal and inherit.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS word spacing</title>
<style type="text/css">
p.one {
word-spacing: 20px;
}
p.two {
width: 150px;
word-spacing: 20px;
text-align: justify;
}
p.three {
word-spacing: 20px;
white-space: pre;
}
</style>
</head>
<body>
<p class="one">This is a normal paragraph.</p>
<p class="two">Note that spaces between the words of this paragraph are varying in order to justify the text even if the value of <code>word-spacing</code> property is set to 20px.</p>
<p class="three">
This
is a
paragraph
with preserved whitespace.
</p>
</body>
</html>
Letter Spacing
The letter-spacing property is used to set extra spacing between the characters of text.
Possible values for this property are: length (specifying the extra space to be inserted between characters in addition to the default inter-character space), normal and inherit.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS letter spacing</title>
<style type="text/css">
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Line Height
The line-height property defines height (also called leading) of a line of text.
Possible values for this property are: percentage (%), length, number, normal and inherit.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS line height</title>
<style type="text/css">
p.one {
line-height: 1.2;
border: 1px solid #00ff00;
}
p.two {
line-height: 200%;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<h1>Change the values to see how it works.</h1>
<p class="one">The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using number.</p>
<p class="two">The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using percentage.</p>
</body>
</html>
When the value is a number, the line height is calculated by multiplying the element’s font size by the number. While, percentage values are relative to the element’s font size.
Note:Negative values for this property are not allowed. This property is also a component of the font shorthand property.
If the value of the line-height property is greater than the value of the font-size for an element, this difference (called the “leading”) is cut in half (called the “half-leading”) and distributed evenly on the top and bottom of the in-line box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS line height</title>
<style type="text/css">
p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}
</style>
</head>
<body>
<h1>Change the values to see how it works.</h1>
<p>The <code>line-height</code> property sets the height between lines of text.<br> The line height of this paragraph is specified using pixels value.</p>
</body>
</html>