The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 2 - Text Styling and Other Basics

How do I style a horizontal rule?

Solution

You can change the color, height and width of a horizontal rule. Note that, in the CSS below, I've used the same values for color and background-color because Mozilla-based browsers color the rule using background-color, while IE uses color.

Example 2.19. hrstyle.css (excerpt)

hr {    
 border: none;    
 background-color: #ADD8E6;    
 color: #ADD8E6;    
 height: 1px;    
 width: 80%;    
}

The result can be seen in Figure 2.18.

Figure 2.18. Change the color, height and width of a horizontal rule.

How do I indent text?

Solution

You can indent text by applying a rule to the container that sets a padding-left value.

Example 2.20. indent.html (excerpt)

<p class="indent">Lorem ipsum dolor sit amet, consectetuer    
 adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices    
 justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh.    
 Nam erat lectus, dapibus id, congue vel, cursus a, tellus.    
 Sed turpis ante, condimentum at, accumsan eget, pulvinar    
 vitae, nibh.</p>

Example 2.21. indent.css (excerpt)

.indent {    
 padding-left: 30px;    
}

You can see the indented paragraph in Figure 2.19.

Figure 2.19. Indent text using CSS.

Discussion

You should not use the HTML tag <blockquote> to indent text, unless the text is actually a quote. Although visual editing environments such as Macromedia Dreamweaver frequently refer to <blockquote> as "indent text," resist the temptation to use it for this purpose; instead, set up a CSS rule to indent the appropriate blocks. <blockquote> is designed to mark up a quote, and devices such a screen readers for the visually impaired will read this text in a way that helps users understand that what they're hearing is a piece of quoted text. If you use <blockquote> to indent regular paragraphs, it will be very confusing for users to whom the content is read as a quote.

A One-Liner

A related technique enables the indentation of just the first line of each paragraph. To do this, use the CSS property text-indent applied either to the paragraph, or to a class that's applied to paragraphs you wish to display in this way.

p {    
 text-indent: 20px;    
}

How do I center text?

Solution

You can center text, or any other element, using the text-align property with a value of center.

Example 2.22. center.html (excerpt)

<p class="centered">Lorem ipsum dolor sit amet, consectetuer    
 adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices    
 justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam    
 erat lectus, dapibus id, congue vel, cursus a, tellus. Sed    
 turpis ante, condimentum at, accumsan eget, pulvinar vitae,    
 nibh.</p>

Example 2.23. center.css (excerpt)

.centered {    
 text-align: center;    
}

The result can be seen in Figure 2.20.

Figure 2.20. Center text using text-align.

How do I change text to all-capitals using CSS?

Solution

You can change text to all-capitals and perform other transformations using the text-transform property.

Example 2.24. uppercase.html (excerpt)

<p class="transform">Lorem ipsum dolor sit amet, consectetuer    
 adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices    
 justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam    
 erat lectus, dapibus id, congue vel, cursus a, tellus. Sed    
 turpis ante, condimentum at, accumsan eget, pulvinar vitae,    
 nibh.</p>

Example 2.25. uppercase.css (excerpt)

.transform {    
 text-transform: uppercase;    
}

Note the uppercase text in Figure 2.21.

Figure 2.21. This text-transform makes all the letters uppercase.

Discussion

There are other useful values for the text-transform property. The value capitalize will capitalize the first letter of each word, as shown in Figure 2.22:

Example 2.26. capitalize.css (excerpt)

.transform {    
 text-transform: capitalize;    
}

Figure 2.22. The application of text-transform changes the appearance of the words.

Other values of the text-transform property are:

• lowercase
• none (the default)

How do I change or remove the bullets on list items?

Solution

You can change the style of bullets used in your lists by altering the list-style-type property.

Example 2.27. listtype.html (excerpt)

<ul>    
 <li>list item one</li>    
 <li>list item two</li>    
 <li>list item three</li>    
</ul>

To use square bullets, as shown in Figure 2.23, set the property to square:

Example 2.28. listtype.css

ul {    
 list-style-type: square;    
}

Figure 2.23. This list uses square bullets.

Discussion

Other values for the list-style-type property are:

• disc
• circle
• decimal-leading-zero
• decimal
• lower-roman
• upper-roman
• lower-greek
• lower-alpha
• lower-latin
• upper-alpha
• upper-latin
• Hebrew
• Armenian
• Georgian
• none

Not all of these values are supported by all browsers; those that don't provide support for a particular type will display the default bullet type instead. You can see the different types and check your browser's support for them at the CSS Test Suite for list style type. Setting list-style-type to none will result in no bullets being displayed, although the list will still be indented as if the bullets were there. You can see this in Figure 2.24.

Example 2.29. listtype2.css

ul {    
 list-style-type: none;    
}

Figure 2.24. This list displays without bullets.

How do I use an image for a list item bullet?

Solution

To use an image for a bullet, create your image, then use the list-style-image property, instead of list-style-type, for your bullets. This property accepts a URL, which incorporates the path to your image file as a value.

Example 2.30. listimage.css

ul {    
 list-style-image: url(bullet.gif);    
}

You can see an example of an image used as a bullet in Figure 2.25.

Figure 2.25. Use an image as a list bullet.

Per Item Bullets

The list-style-image property actually applies to the list item (<li>) tags in the list, but by applying it to the list as a whole the individual items will inherit it. You do, however, have the option of setting the property on individual list items, giving individual items their own bullet images.

How do I remove the indented left margin from a list?

If you have set list-style-type to none, you may also wish to remove or decrease the default left margin that the browser sets on a list.

Solution

To remove the indentation entirely so that the list will align left with any other content, as shown in Figure 2.26, use the following code:

Example 2.31. listnomargin.css

ul {    
 list-style-type: none;    
 padding-left: 0;    
 margin-left: 0;    
}

Figure 2.26. The list has no indentation or bullets.

Discussion

You can tweak the indentation after doing this. To indent the content by a few pixels, try this:

ul {    
 list-style-type: none;    
 padding-left: 5px;    
 margin-left: 0;    
}

How do I display a list horizontally?

By default, list items display as block elements; therefore, each new item will display on a new line. However, there may be times when some content on your page is, structurally speaking, a list, even though you mightn't want to display it as such. What happens if, for instance, you want to display the "list items" horizontally?

Solution

You can make a list display horizontally by altering the display property of the <li> tag to inline.

Example 2.32. listinline.html (excerpt)

<ul class="horiz">    
 <li>list item one</li>    
 <li>list item two</li>    
 <li>list item three</li>    
</ul>

Example 2.33. listinline.css

ul.horiz li {    
 display: inline;    
}

The result of the above code can be seen in Figure 2.27.

How do I add comments to my CSS file?

You can, and should, add comments to your CSS file. CSS files that are very simple, with just a few rules for text styling, for instance, may not require commenting. However, once you start to use large CSS files and multiple style sheets for a site, comments come in very handy! Without them, you can spend a lot of time hunting around for the right classes, pondering which class does what and in which style sheet it lives.

Figure 2.27. A list can be displayed horizontally.

Solution

CSS supports multiline C-style comments, just like JavaScript. So, to comment out an area, use the following:

/*    
 …    
*/

At the very least, you should add a comment at the top of each style sheet to explain what's in that style sheet.

/* This is the default style sheet for all text on the site */

How do I get rid of the page margins without adding attributes to the body tag?

Before CSS support, we would remove the default gutter between the document and the browser window by adding attributes to the <body> tag:

<body topmargin="0" leftmargin="0" marginheight="0"    
   marginwidth="0">

Solution

The above attributes of the body tag are now deprecated. They should be replaced by CSS defined for the <body> tag.

body {    
 margin: 0;    
 padding: 0;    
}

Opera Sings its Own Tune

Some versions of Opera apply margin and padding to the <html> element instead of the <body> tag. Therefore, to support Opera, you'll need to use this code:

html, body {    
 margin: 0;    
 padding: 0;    
}

Summary

In this chapter, we've covered some of the more common questions asked by those who are relatively new to CSS: questions that relate to styling and manipulating text on the page. By combining these techniques, you can create attractive effects that will degrade appropriately for those who aren't using a browser that supports CSS.

Watch out for the next chapter of The CSS Anthology: 101 Essential Tips, Tricks & Hacks -- it'll be on SitePoint soon. Or, if you can't wait, download the fist 4 chapters free now.