Text Controls

Text controls do not have shorthand properties, but there are a lot of properties you can use to control the look of your text.

Text Properties:

Finding all of the rules just a bit difficult to remember? If you are just beginning to learn about CSS, you might want to search for a CSS cheat sheet that has a lot of the selectors along with their properties and values on a handy sheet.

Text-align:

The text-align property sets the horizontal alignment of your text on the screen. Your value choices are left, right, center, or justify. Left orients the text to the left, right orients the text to the right, and center orients the text to the center of the container block. Justify aligns the text so the left and right edges are aligned. An example of the text-align rule looks like the following:

css
  1. .myclass {
  2. text-align: left;
  3. }

Letter-spacing:

The letter-spacing property sets the amount of spacing between letters. It's a great way to add a bit of pizzazz to things like headings or small amounts of text. While a little bit of spacing can add a great look, remember that a little goes a long way and can sometimes make text more difficult to read. The default for this property is "none", so if you want to add a bit of spacing you can specify the length in ems or pixels. An example of a letter-spacing rule would look like this:

css
  1. h1 {
  2. letter-spacing: 3px;
  3. }

Text-indent:

The text-indent property will indent the first line of a paragraph. The value can be either a fixed length value such as 20px or it can be set as a percentage such as 10%. A text-indent rule would look something like this:

css
  1. .indent {
  2. text-indent: 20px;
  3. }

Caution: The text-indent value can also accept a negative length, however, there must be enough padding to accommodate it. If your containing block has a padding of 10px, you cannot set a negative value to more than 10px. Note that not all browsers will display a hanging indent correctly.

Line-height:

The line-height property controls the amount of spacing between each line of text. The value can be set as a number or as a percentage, or the default of none. For example, a value of 20px would set twenty pixels of space between each line. A percentage value would calculate the height relative to the font size. An example of a line-height rule would look like this:

css
  1. .tall {
  2. line-height: 20px;
  3. }

The line-height property can also be used within a font shorthand property. It needs to be placed after the font size value and is separated by a forward slash with no space added. An example would look like this:

css
  1. p {
  2. font: 12px/20px Verdana, Arial, sans-serif;
  3. }

Text-transform:

The text-transform property changes text from lowercase to uppercase. It can also change text from uppercase to lowercase. Text-transform values are capitalize, uppercase, lowercase, and none. An example of a text-transform rule would look like this:

css
  1. h1 {
  2.  text-transform: uppercase;}

Color Controls

The color property refers to the text color. This property can have a hex value, an RGB color value or can use the name of a color. Color properties can be added to a wide variety of HTML selectors, to classes and also to IDs. Color, when used appropriately, is what brings life to your web pages.

A color statement that sets all of the text on a web page to black would look like the following:

css
  1. body {
  2.  color: #000000;}

The Handy <span> tag

Sometimes you may want to apply a style to specific elements, like words, within a tag. This is where you can use the <span> ... </span> tags. The span tag has no inherited properties and serves as a blank slate for creating your own inline effects.

For example, let's say you create a highlight class as follows:

css
  1. .highlight {background-color: #ffff80;}

The class is then applied to a few words within a paragraph as follows:

HTML
  1. <p>A paragraph to which <span class="highlight">I apply a highlight</span> to words I want to emphasize.</p>

This is the result:
A paragraph to which I apply a highlight to words I want to emphasize.

Text-decoration:

The text-decoration property has these values: underline, overline, line-through, and none. An example would look like:

css
  1. h1 {
  2.  text-decoration: underline;
  3. }

The underline value adds an underline to a word or group of words. The overline value is most commonly used along with the underline value and will add a line above your words.

Hyperlinks are underlined by default, so use caution if you wish to underline words that are not hyperlinks. This can be confusing to your visitors who may expect the results to be an actual link. Because links default to having the underline, in order to not have an underline the value of none must be specified. An example is shown below:

css
  1. a {text-decoration: underline;}
  2. a:hover {text-decoration: none;}

The line-through value will draw a line through the word or groups of words. You have probably seen this on catalog pages to show the difference between a regular price and a sales price as in the example below:

css
  1. .price {
  2.  text-decoration: line-through;
  3.  color: #ff0000;
  4. }

Results in this: $12.95 $10.95

In our line-through example, the html coding looks like this:

html
  1. <p>Results in this:
  2. <span class="price">$12.95</span> $10.95</p>