CSS Text
This tutorial helps you learn how to style text on your web pages using CSS.
Formatting Text with CSS
There are several properties in CSS that allows you to define various text styles like alignment, color, spacing, transformation, decoration, etc., very easily and effectively.
Text properties that are commonly used are text-transform, text-decoration, text-align, text-indent, letter-spacing, line-height, word-spacing, etc. With these properties, you can get precise control over the visual appearance of the characters, spaces, words, etc.
Let's see how you can set these text properties for an element
Text Color
The CSS color property defines the color of the text.
The style rule in the example here will define the page's default text color.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
body {
color: #434343;
}
</style>
</head>
<body>
<div>
<h1>Welcome to CSS Tutorial</h1>
<p>I am a CSS Developer!</p>
</div>
</body>
</html>Though the color property seems to be a part of the CSS text, on the contrary, it is a standalone property in CSS. You can refer to the tutorial on CSS color to know more about the color property.
Text Alignment
You can use the text-align property to set the text's horizontal alignment.
You can align the text in four ways: to the right, left, centre, or justified (straight left and right margins).
The example will help you understand how this property works.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
h1 {
text-align: center;
}
p {
text-align: justify;
}
</style>
</head>
<body>
<div>
<h1>Welcome to CSS Tutorial</h1>
<p>I am a CSS Developer!</p>
</div>
</body>
</html>Let's look at the following example to see what these values actually mean.
Text Decoration
You can use the text-decoration property for setting or removing decorations from a text.
The text-decoration property usually accepts one of the following values: overline, underline, line-through, and none. It is recommended to avoid underlining text that is not a link, as it may confuse a visitor.
Let's consider the example below to understand how it basically works:
Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>Welcome to CSS Tutorial</h1>
<h2>I am a CSS Developer!</h2>
<h3>Reading CSS Text styling</h3>
</div>
</body>
</html>
Removing the Default Underline from Links
The most extensive use of the text-decoration property is for removing the default underline from the HTML hyperlinks. However, some other visual cues can be further provided for making it stand out from the normal text. For illustration, use of dotted border rather than a solid underline.
Let's consider the example below to understand how it basically works:
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
a{
text-decoration: none;
border-bottom: 1px dotted;
}
</style>
</head>
<body>
<div>
<a href="http://readytocode.net/" target="_BLANK">Read Our Blog</a>
<h2>I am a CSS Developer!</h2>
<h3>Reading CSS Text styling</h3>
</div>
</body>
</html>Note: On creating an HTML link, the built-in style sheet of the browser automatically underlines it and applies blue color to it, so readers can know which text is clickable.
Text Transformation
You can use the text-transform property to set the cases for a text.
Text is often written in mixed cases. However, you may want to display your text in an entirely different case in certain situations. You can use this property to change an element's text content into uppercase or lowercase letters or for capitalizing each word's first letter without modifying the original text.
The example below helps you to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}
</style>
</head>
<body>
<div>
<h1>Welcome to CSS Tutorial</h1>
<h2>I am a CSS Developer!</h2>
<h3>Reading CSS Text styling</h3>
</div>
</body>
</html>
Text Indentation
You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.
The style rule mentioned below will indent the paragraphs' first line by 100 pixels.
Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
p {
text-indent: 100px;
}
</style>
</head>
<body>
<div>
<p>You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.</p>
</div>
</body>
</html>Note: Whether the text will be indented from the left or the right is dependent on the text's direction inside the element, specified by the CSS direction property.
Letter Spacing
You can use the letter-spacing property for setting extra spacing between the text's characters.
You can define the length value for this property in ems, pixels, etc. Negative values are also accepted by this property. When you set the letter spacing, a length value implies spacing in addition to the default inter-character space.
The example below helps you to understand how it works:
Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}
</style>
</head>
<body>
<div>
<h1>CSS Letter Spacing Example</h1>
<p>You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.</p>
</div>
</body>
</html>
Word Spacing
You can use the word-spacing property for specifying the additional spacing between the words.
The word-spacing property can accept a length value in ems, pixels, etc. You can also specify negative values.
The example below helps you to understand how this property works:
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
p.normal {
word-spacing: 20px;
}
p.justified {
word-spacing: 20px;
text-align: justify;
}
p.preformatted {
word-spacing: 20px;
white-space: pre;
}
</style>
</head>
<body>
<div>
<h1>CSS Letter Spacing Example</h1>
<p class="normal">You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.</p>
<p class="justified">You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.</p>
<p class="preformatted">You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.</p>
</div>
</body>
</html>Note: Text justification affects the word spacing. Although whitespace is preserved, the word-spacing property affects the spaces between words.
Line Height
You can use the line-height property for setting the text line's height.
It is also known as leading and is generally used for setting the distance between text lines.
The line-height property's value can be a number, a length in pixels, ems, or a percentage (%), etc.
Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
p {
line-height: 1.2;
}
</style>
</head>
<body>
<div>
<h1>CSS Line Height Example</h1>
<p>You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.</p>
</div>
</body>
</html>If the value is specified in a number, the element's font size is multiplied by the number to calculate the line-height. In contrast, values in percentage are relative to the font size of the element.
Note: Negative values cannot be specified for the line-height property. The line-height property is also the CSS font shorthand property's component.
If the line-height property's value is greater than the element's font-size value, then the difference (called the "leading") is divided in half (called the "half-leading") and distributed evenly on the top and bottom of the in-line box. Let's see an example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
<style>
p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}
</style>
</head>
<body>
<div>
<h1>CSS Line Height Example</h1>
<p>You can use the text-indent property to set the indentation of the first line of text within a text block.
To do this, insert an empty space before the text's first line. You can specify the indentation size using percentage (%), length values in ems, pixels, etc.</p>
</div>
</body>
</html>