CSS text
In addition to styling the text color and font family of your texts, CSS offers a wealth of other text styles to play with. In this tutorial we're going to have a hands-on look at the most important properties.
Font size
The font-size property gives you total control over the text size. You can use any valid CSS unit as value but keep in mind that it's best to use relative values for text size to allow for optimal text resizing by the user.
CSS font-size
em {font-size:x-small}
Output
The second example shows the use of pre-defined font sizes set by the browser: xx-small, x-small, small, medium, large, x-large and xx-large.
If you don't really care about the current font size and just want to make your text a bit bigger or smaller you can use larger or smaller.
Font weight
The font-weight property changes the boldness of the lettering. You can set it either to normal which is the standard value for regular text or bold which is the standard value for headings.
CSS font-weight
ul {font-weight:bold}
<ul>
<li>An unordered list</li>
<li>with font weight set to bold.</li>
</ul>
Output
You can also specify varying degrees of boldness using values from 100 to 900 (lightest to boldest), though the difference is not always very noticeable. 400 is equal to normal and 700 is equal to bold.
Text alignment
To set the text alignment of an element's containing text you can use the text-align property and one of the pre-defined values left (default), right, center and justify.
CSS text-align
h3 {text-align:center}
h4 {text-align:left}
p {text-align:justify}
<h3>h3 align center</h3>
<h4>h4 align left</h4>
<p>Text justified just like in a book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia sagittis hendrerit. Ut venenatis augue sed dui auctor at hendrerit lacus pellentesque. Aenean sodales lobortis pellentesque. Aliquam dapibus luctus pellentesque. Nam in nibh quis nibh fermentum adipiscing nec vestibulum nunc. Suspendisse potenti. Fusce massa ante, accumsan vel tristique sit amet, mattis in nunc. Nullam et lectus in diam rhoncus consequat. Nam id sem augue. Aliquam iaculis sem sed neque hendrerit iaculis. Vestibulum et bibendum tortor. Nam vel accumsan odio.</p>
Output
Line height
Normally browsers only add little space between text lines. By using the line-height property you can increase that spacing to make reading easier on the eyes. The default value is normal and can be set to any length.
CSS line-height
Output
Text decoration
With the text-decoration property you can set the underline style of text using the values underline, overline, line-through and none.
h4 {text-decoration:overline}
h5 {text-decoration:line-through}
a {text-decoration:none}
<h4>h4 with an overline</h4>
<h5>h5 with a line-through in the middle</h5>
<a href="/">A link without the default underline</a>
Output
As you can see in the last example it's entirely possible to create links without underlines. Many web designers abuse this to make their links "prettier" while breaking a fundamental usability rule of the internet: Users expect links to be underlined!
Before CSS links have always been underlined by default and people got used to it. Please spare your users the tedious guesswork of finding your links. If you absolutely have to remove the underline make at least sure that all links have the same clearly visible color throughout your site or are otherwise identifiable as links (such as in a navigation block). There's nothing worse than non-underlined links with the same color as normal text.
Italic text
If you want to make an element's whole text italic without using the <em> tag you can do so by setting the font-style property to italic instead of normal (default).
CSS font-style
Output
Text transformation
To modify the text case you can apply the text-transform property using capitalize, uppercase, lowercase or none (default).
CSS text-transform
h4 {text-transform:uppercase}
h5 {text-transform:lowercase}
<h4>I dreamed I had a good job and I got well paid. I blew it all at the penny arcade.</h4>
<h5>I dreamed I had a good job and I got well paid. I blew it all at the penny arcade.</h5>
Output
Text indent
You can achieve a book-like indent effect of the element's first text line by setting the text-indent property to a length value.
CSS text-indent
Output
White space
By default browsers will begin a new line of text at word spaces (white space) if the whole text doesn't fit on a single line. Sometimes, though, you may want to force the browser to display all text on a single line (unless you insert line breaks <br />). You can do this by setting the white-space property to nowrap instead of normal (default).