File Under: CSS

Mulders Stylesheets Tutorial – Lesson 3

Lesson 2 of our stylesheets tutorial was all about fonts and controlling text. This lesson is about how those words and lines can be spaced relative to one another. These stylesheets properties give us power over the space between words and letters, the leading (vertical spacing) between lines of text, and the alignment of text, margins and padding, borders, and floating elements.

Here’s what we’ll be covering:

  • word-spacing
  • letter-spacing
  • line-height
  • text-align
  • vertical-align
  • text-indent
  • margin-top, margin-left, etc.
  • padding-top, padding-left, etc.
  • border-width, border-color, border-style, etc.
  • float
  • clear


Obviously we have a lot to do in this lesson, so we’re going to speed up a bit. Let’s go!

Contents

  1. Spacing Words and Letters
  2. Spacing Between Lines
  3. Aligning and Indenting Text
  4. Margins and Padding
  5. Borders
  6. You can apply borders to replaced elements as well as to text elements. Fun, eh?
  7. Floating Stuff
  8. Lesson 3 Exercise
  9. Review of Lesson 3

Spacing Words and Letters

First up is a pair of properties that enables you to do things you can’t do with HTML tags:control the spacing between words and the spacing between individual characters.

word-spacing

With the word-spacing property, you can add additional space between words:

H3 { word-spacing:1em }

The value you specify will be added to whatever default value the browser already uses. You can use any of the length units we talked about in Lesson 2 when looking at font-size:

  • in (inches)
  • cm (centimeters)
  • mm (millimeters)
  • pt (points)
  • pc (picas)
  • em (ems)
  • ex (x-height)
  • px (pixels)


Here’s word-spacing in action:

Behold the power of cheese.

Don’t see anything different? That’s probably because your browser doesn’t support this property. Only the Mac version of IE 4 likes word-spacing.

letter-spacing

We have better luck with letter-spacing, which affects the kerning between characters and works in IE 4 and 5 (but not in Communicator, alas).

H3 { letter-spacing:10px } 

The functionality is similar to word-spacing:Values are added to the default browser spacing. And you can use any of the same units listed above.

If you’re using IE 4 or 5, here’s an example:

Behold the power of cheese.

For both of these properties, you can also use a value of normal, which will ensure that the default browser spacing is used instead of any inherited word or letter spacing.

Don’t be too discouraged! There are a lot of stylesheets properties that do work in both of the major browsers. One example is coming up next.

Spacing Between Lines

The common term for the spacing between lines is leading. The common term that Web designers scream when they find out they can now control leading is, “Wheee!”

line-height

line-height is a godsend. With it, we can achieve control over the vertical spacing between lines of text:

B { line-height:16pt }  

Whatever value you use is the amount of space between the baselines of two adjacent lines of text (the baseline is what characters without descenders — “x” but not “y,” for example – sit on). Note that your value totally replaces the default browser value.

Netscape Communicator and Internet Explorer add the line-height value before the line. Thus, if you specify a value of 10px, then the browsers will display the first line of text 10 pixels down.

There are three different ways to give a value to line-height:

  • by number,
  • by length unit, and
  • by percentage.

Leading by Number

B { font-size:12pt; line-height:2 }  

When you specify line-height with a number, the browser uses font-size to obtain the leading:It multiplies font-size by the number. So in this example, the line-height is 24 points, like so:

Four score and seven years ago, the Web wasn’t yet a glimmer in anyone’s eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

By the way, you can also use nonintegers (such as 2.3) as values.

(You should know that IE 3 doesn’t support number values. More often than not, using number values with IE 3 will result in a big mess of overlapping text.)

Leading by Length Unit

B { font-size:12pt; line-height:11pt } 

Another way to define line-height is by using any of the length units we reviewed on the previous page (em and pt are most commonly used). Here’s the above stylesheet rule in action:

Four score and seven years ago, the Web wasn’t yet a glimmer in anyone’s eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

Note that you can make lines of text closer together just as easily as you can separate them. It’s easy with stylesheets!

Leading by Percentage

B { font-size:10pt; line-height:140% }  

If you want yet another way to use line-height, try percentage values. In the above example, the leading is 140 percent of 10 points or 14 points. You get the idea. </tt>

Overlapping Text

You might have already asked yourself this question:What happens when line-height is so small that the lines of text overlap?

Well, they overlap, that’s what. Check out this code:

B { font-size:28pt; line-height:2pt }  

Here’s what you get:

Whoa
Cool.

“Whoa” uses the browser’s default line-height, but “Cool” has so little line-height that it lies on top of the first line.

(Communicator and Internet Explorer interpret line-height differently. In Communicator, the text above is overlapped quite a bit. In IE 5, it’s not overlapped at all.)

If you want to overlap elements on your page, line-height isn’t the best way to do it because of browser inconsistencies. In Lesson 5, we’ll look at the best ways to layer text, images, and so on.

Now that we can control the spacing of lines of text, let’s move on and talk about the alignment of entire paragraphs.

Aligning and Indenting Text

The following attributes deal with aligning text and images and adding indentation.

text-align

With the text-align property, you can control the horizontal alignment of paragraphs:

H4 { text-align:center } 

This property works only on block-level elements, which are tags that define new paragraphs on their own, such as  P>,  H1>- H6>,  BLOCKQUOTE>, and <UL>.

Here are your options:

A value of left means the element will be left-aligned.

A value of right means the element will be right-aligned.

A value of center means the element will be centered.

And finally, a value of justify means the element will be justified. This is difficult to see without multiple lines of text, so I’ll add some text here. Note that justify works in Communicator (both platforms) and IE 4 and 5 (Windows) but not in IE 3 or 4 (Mac).

Until now, we’ve been talking only about applying stylesheets to text. But many properties can also be used on replaced elements. (A replaced element is any object that is replaced by other content. Graphics are the most common replaced elements, but Java applets and QuickTime movies are also frequently replaced.)

So we can also right-align an image, like so:

enter.gif

(Communicator sometimes doesn’t like it if you apply CSS properties directly to the <img> tag. A work-around is to surround <img> with  SPAN> or <DIV> and then apply the stylesheet to the <SPAN> or <DIV> tag instead. <DIV> is better, because IE for Windows sometimes has problems associating a style with <SPAN>.)

vertical-align

Let me say right off the bat that browser support for vertical-align is almost zero. But I will state the basics here, in the hope that later browsers will support it.

H4 { vertical-align:top }

The vertical-align attribute enables you to control the vertical placement of text or replaced elements (e.g., images) relative to a parent element. For example, if you vertical-align as top a 2-by-2-pixel GIF and its parent is <H1> text, then that GIF will appear at the top of that line of text.

Here are all the possible values for vertical-align:

  • top aligns the top of the element with the tallest parent element on the line.
  • bottom aligns the bottom of the element with the lowest parent element on the line.
  • text-top aligns the top of the element with the top of the font of the parent element.
  • text-bottom aligns the bottom of the element with the bottom of the font of the parent element.
  • baseline aligns the baseline of the element with the baseline of the parent element.
  • middle aligns the midpoint of the element with the middle of the parent element.
  • sub puts the element in subscript.
  • super puts the element in superscript.

The only current browser support for any of this comes from IE 4 and 5, which support the last two values. That’s it for now.

text-indent

Want to give a paragraph an indent? (After living on the Internet for a while, you may have forgotten what an indent is!) Use the text-indent property:

P { text-indent:2em }  

Here you can see the above rule applied. The property works only on block-level elements (as defined earlier on this page). You can specify text-indent using any of the familiar length units.</tt>

You can also use percentage values. For example, this paragraph has an indent of 40 percent, which means the first line is indented 40 percent from where it would normally begin. (IE 4 for Windows assumes the percentage refers to the entire browser window, not just the width of the paragraph.)

Finally, if you give your text-indent a negative value, then you get a so-called hanging indent, in which the first line actually begins left of where it normally would. This paragraph has a text-indent of -10 pixels. IE 4 and 5 are a little buggy:They might not display the first few letters.

Use your indenting power well, young Jedi knight.

Indents are nice, but what about genuine margins? You got it.

Margins and Padding

As we know, to make a margin using HTML, you have to use tables. But not any more. Stylesheets to the rescue …

Some Quick Definitions

First, we need to understand the terminology of the stylesheets language. Every single block-level element or replaced element is contained in what the cascading stylesheets creators call a box. That box consists of:

  • the element itself,
  • the padding around the element,
  • the border around the padding, and
  • the margin around the border.

An illustration might help:

box.gif

You can control the padding, border, and margin separately, as we’re about to see.

margin-top, margin-bottom, margin-left, margin-right

These four properties enable you to control the margin around each side of an element, like so:

H4 { margin-top:20px; margin-bottom:5px; margin-left:100px; margin-right:55px }  

As you can see, each margin can be set differently. Or you can choose to set just one margin side and let the browser use its default margin sizes for the other sides. You can apply margins to replaced elements (e.g., graphics) as well as to text.

The most obvious way to set margin values is through the length units we discussed previously:px (pixels), pt (points), and so on. But you can also set margins using percentage values.

Let’s look at a few examples:

When two margins meet, the browser adds the margins together. Thus, if this paragraph has a margin-bottom of 10 pixels …

… and if this paragraph has a margin-top of 30 pixels, then the paragraphs should be separated by 40 pixels.

Can you overlap elements by using negative margin values? You betcha. Once again, this isn’t the ideal way to layer elements on a page, but it is possible:

Books

are mind food.

Above, “are mind food” has a top margin of -55 pixels and a right margin of 60 pixels.

A big drawback of using negative margins to overlap elements is that browsers handle margin sizes differently. For instance, when displaying the example above, each of the four main 4.0 browsers (Communicator for PC, Communicator for Mac, IE for PC, IE for Mac) overlaps the text a different amount. (Communicator for PC doesn’t overlap the text at all!)

Another drawback is that you can’t completely control what gets layered on top. Again, different browsers behave differently. Communicator, for example, always places graphics on top of text. IE seems to display elements in the order they are loaded into the browser window.

In other words, if you want to layer elements, don’t use negative margins. The Lesson 5 installment of this tutorial will cover how to layer elements.

Here are some other notes about browser support:

  • IE 3 will sometimes display extra space when you use ruler units (e.g., inches and centimeters) for margin-bottom. Also, some HTML tags work with margin-bottom, but many don’t.
  • IE 4 sometimes has problems giving left margins to replaced elements such as graphics. Try wrapping the image in a <DIV> and styling the <DIV>.

padding-top, padding-bottom, padding-left, padding-right

Padding (the space between the element and its border) works just like margin control. You can define padding size for the top, bottom, left, and right sides of an element.

H4 { padding-top:20px; padding-bottom:5px; padding-left:100px; padding-right:55px } 

Just as with margins, you can use any length units or percentage values. We won’t bother to go into detailed examples, since these properties work so similarly to the margin properties. You should know, however, that you can’t use negative values for padding as you can for margins. (Also, I’m sorry to report that IE 3 doesn’t support the padding properties.)

Now let’s talk about what’s between margins and padding:borders.

Borders

Quite a few different stylesheets properties relate to putting a border around an element on a Web page.

(Red alert! IE 3 doesn’t support any of the border properties discussed on this page — just so you know.)

border-top-width, border-bottom-width, border-left-width, border-right-width

The first thing you can control is the width of the border, and you can control each side separately:

H4 { border-top-width:2px; border-bottom-width:5px; border-left-width:1px; border-right-width:1px }  

Here’s the result of the above CSS rule:

You can apply borders to replaced elements as well as to text elements. Fun, eh?


You don’t necessarily have to define a border for all sides of an element. If you want, you can put a border on just one side, as seen to the left of this paragraph. (In IE 4 and 5, you need to define the other sides as 0 or else the browser will give them its own idea of size.)

For specifying width, you can use any of the same length values we’ve seen before. You can also use some built-in keywords:

The border above this text has a value of thin.

The border above this text has a value of medium.

The border above this text has a value of thick.

Do you want all sides of your border to be the same width? Simply use the shortcut border-width tag. The following stylesheets rule would put an even 1-inch border all the way around the graphic:

img { border-width:1in }

border-color

The second aspect of borders that is under your control is color.

P { border-color:green; border-width:3px }

This paragraph shows the above code in action.

You can use the color names browsers already recognize or, better yet, you can use hexadecimal values, like so:

H4 { border-color:#FF0033; border-width:thick }  

If you want each side of your border to be a different color, you can make it so by listing each color:

P { border-color:#666699 #FF0033 #000000 #FFFF99; border-width:3px }  

The browser uses the first color value for the top side, the second for the right side, the third for the bottom, and the fourth for the left.

This paragraph shows the above code in action.

Note:Communicator doesn’t recognize multiple colors, so you’re stuck with just one. (When multiple colors are used, Communicator often uses blue for the whole border. We have no idea why.)

By the way, if border-color isn’t used, then the border will take on the color of the element itself.

border-style

Finally, you can specify the style of the border line:

P { border-style:double; border-width:3px } 

The possible keywords are:

solid

double

dotted

dashed

groove

ridge

inset

outset

Note:You have to use border-style with IE 4 and 5, or they won’t display any border at all.

IE 4.x for the Mac is the only browser to support dotted and dashed.

Another thing you might notice is that IE gives a border to the entire width of the area, whereas Navigator gives a border only to the word itself.

If you so desire, you can also set border styles individually for each side (though I have no idea why you’d want to do so). As with border-color, you declare the values in this order:top side, right side, bottom side, left side.

And that about does it for borders. We have one more topic to look at in this lesson:floating elements.

Floating Stuff

We’re already used to seeing floating images and tables on Web pages. Simply use the ALIGN=left attribute on an <img> tag, for example, and text will flow around the right side of the floating image. Stylesheets have a somewhat more flexible syntax for floating elements, which is what this page is all about.

(I’m sorry to report that Internet Explorer 3 doesn’t support anything on this page. IE 4 and 5 can be a bit buggy too.)

float

The float property enables you to flow text around an element, including not just images but any block-level text as well.

H4 { float:left }  
This text is floating left.
To the left you can see this CSS rule applied to some <H4> text. This paragraph simply wraps around it, much like you’d expect text to wrap around an image aligned left. Of course, you can also use a value of right.

If the floating element has too little space around it, you can add padding with one of the properties we discussed earlier in this lesson. (For some reason, using margins seems to cause trouble.)

clear

What if you want to wrap one paragraph around a floating element but make sure the next paragraph doesn’t wrap? Use the clear property, much like you’d use the CLEAR attribute in HTML (for example:CLEAR=right).

P { clear:left }  

Let’s look at a quick example:

b2a4c852b28b930d6f2a590e7a7821aa.jpg This is one paragraph that is wrapping around an image that’s floating left.

This is another paragraph. Without any clear property, it also wraps, as you can see.

And here’s what happens if we use clear

b2a4c852b28b930d6f2a590e7a7821aa.jpg This is one paragraph that is wrapping around an image that’s floating left.

This is another paragraph. Now I’ve set clear:left, so the browser makes sure that the left side is clear of all floating elements before it displays the paragraph.

You can also use values of right and both.

Congrats, you’ve made it through the bulk of Lesson 3. Let’s walk the walk.

Lesson 3 Exercise

Look at this page and try to rebuild it yourself without looking at the code. Remember that you must have at least a 4.0 browser for the examples to work correctly. It uses several of the stylesheets properties we’ve discussed in this lesson (as well as a few from Lesson 2). There’s only one image on the page — the rest is HTML and cascading stylesheets.

(Note:Because different browsers behave differently, the example page will look different from browser to browser.)

Bonus Question:How can you make a drop-shadow effect using just CSS and HTML, with no GIFs whatsoever? Tune in for the answer tomorrow.

Before we end this lesson, let’s review.

Review of Lesson 3

This lesson was a good one. We expanded our cascading stylesheets toolbox to include the realm of typography and layout, where the spacing and alignment of text and images are under our control. It’s a wondrous land, because in it we can do things that simply aren’t possible now with plain ol’ HTML tags.

Here are the stylesheets properties we covered:

  • word-spacing defines the space between words.
  • letter-spacing controls the kerning or space between individual characters.
  • line-height is the key to leading, the vertical space between lines of text.
  • text-align enables you to left-align, right-align, center, or justify paragraphs.
  • vertical-align is for vertically aligning text.
  • text-indent can give indents to paragraphs.
  • All the margin properties specify margins surrounding text blocks, images, and so on.
  • And the padding properties are for padding.
  • The border properties define the width, color, and style of borders.
  • float and clear are for controlling how elements wrap around one another.

Mulder, can there be more to salivate over in this magical realm of cascading stylesheets? Yes indeed. In Lesson 4, we’ll examine the power stylesheets give us over colors and backgrounds. Don’t miss it.