CSS text propertiesHDI

This article is also available as a TechRepublic download, which includes the code listing in a separate text file for easy copy and paste.

CSS lets you exert tremendous control over the visual aspects of your Web pages, adjusting page height and width, background colors and images, borders, and typeface. None of these, however, are particularly new; all of these properties can just as easily be manipulated using standard HTML.

However, CSS also includes some innovative new properties for controlling page text; properties which were previously not accessible through standard HTML elements. These properties allow you to centralize control over the alignment, spacing, decoration, line height, and case of a page or text.

Controlling alignment

First up, the text-align property, which can be applied to block-level elements like paragraphs and headings. This property is used to control the horizontal alignment of the text block, and can take any of the values left, right, center or justify. Here’s an example (Listing A):

Listing A

<html>

<head>

    <style type="text/css">

    .title {

        text-align: right;
    }

    </style>

</head>

<body>

    <h1 class="title">The Rise and Fall of the Roman Empire</h1>

</body>

</html>

And Figure A shows you the output:

Figure A

It’s also possible to align an inline element with respect to the vertical axis, via the vertical-align property. This property accepts any of the values baseline, top, text-top, middle, bottom, text-bottom, all of which should be self-explanatory. Listing B shows you an example, which vertically aligns an image with the top of the subsequent text block:

Listing B

<html>

<head>

    <style type="text/css">

    .dummy {

        vertical-align: text-top;
    }

    </style>

</head>

<body>

    <p><img src="img_3026.jpg" mce_src="img_3026.jpg" height="50" class="dummy" />Lorem ipsum dolor sit amet</p>

</body>

</html>

And the output is shown in Figure B.

Figure B

It’s also possible to use the vertical-align property for subscripts and superscripts, by assigning it the values sub or super respectively (Listing C).

Listing C

<html>

<head>

    <style type="text/css">

    .super {

        font-size: x-small;

        vertical-align: super;
    }

    </style>

</head>

<body>

    3<span class="super">rd</span> place

    </body>

</html>

And Figure C shows you the output:

Figure C

Controlling indentation

CSS also lets you control the amount of indentation the first line of a paragraph receives, via its text-indent property. Indentation units may be described in terms of points, percentages or ems. Listing D shows you an example which indents the first line of a paragraph by 25 percent of the paragraph width:

Listing D

<html>

<head>

<style type="text/css">

p {

text-indent: 25%;
}

</style>

</head> <body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</body>

</html>

And the output is shown in Figure D.

Figure D

Controlling decoration

CSS lets you “decorate” text in order to make it more visible, via its text-decoration property. This decoration may be in the form of an underline, an overline, a strike-through or a blinking text object, corresponding to the CSS values underline, overline, line-through and blink respectively. Listing E demonstrates them all:

Listing E

<html>

<head>

    <style type="text/css">

    .alpha {

        text-decoration: underline;
    }

    .beta {

        text-decoration: overline;
    }

   

    .beta2 {

        text-decoration: line-through;
    }

    .gamma {

        text-decoration: blink;
    }

    </style>

</head>

<body>

    <span class="alpha">Watch</span>

    <span class="beta1">me</span>

    <span class="beta2">you</span>

    <span class="gamma">blink</span>

</body>

</html>

The output is shown in Figure E.

Figure E

A common use of this property is to eliminate the underlining of hyperlinks on Web pages and, optionally, to underline them only when the mouse pointer hovers over them. Listing F shows you how this can be done:

Listing F

<html>

<head>

    <style type="text/css">

    a {

        text-decoration: none

    }

   

    a:hover {

        text-decoration: underline;

    }   

    </style>

</head>

<body>

Hello, and welcome to <a href="http://www.techrepublic.com" mce_href="http://www.techrepublic.com">my site</a>.

</body>

</html>

Controlling case

CSS’s text-transform property makes it simple to change the capitalization style of a block of text. The property accepts any one of the following values: none, uppercase, lowercase, capitalize. The first three should be self-explanatory; capitalize only capitalizes the first character of each word (Listing G).

Listing G

<html>

<head>

    <style type="text/css">

    p.uc {

        text-transform: uppercase;
    }

   

    p.wc {

        text-transform: capitalize;
    }

    p.lc {

        text-transform: lowercase;
    }

    </style>

</head>

<body>

    <p class="uc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

    <p class="lc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

    <p class="wc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

    </body>

</html>

Figure F shows you the output:

Figure F

Controlling spacing

CSS also makes it possible to control the space between words, characters and lines, via the corresponding word-spacing, character-spacing and line-height properties. As with the text-indent property, values may be expressed in points, pixels and ems. Here’s an example which demonstrates (Listing H):

Listing H

<html>

<head>

    <style type="text/css">

    p {

        line-height: 30px;

        word-spacing: 12pt;

        letter-spacing: 0.5em;

    }

    </style>

</head>

<body>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</body>

</html>

And here’s the output (Figure G):

Figure G

Of course, these examples are just the tip of the iceberg when it comes to working with text properties in CSS. However, they should give you some insight into how these properties work in practice, and you should now know enough to begin experimenting on your own. So what are you waiting for? Get started — and happy coding!