CSSnewbie

Great Resources Elsewhere: February 22 to February 29

Create a Microsoft Word-Style Outline with CSS

One of the most useful properties of both unordered lists (which we fancied up earlier this week) and ordered lists is their ability to nest — that is, to contain lists within lists. And one of the most common examples of a nested ordered list in the real world (or at least, in my world) is an outline, be it a resume, a research paper, or something else entirely. But by default, the web doesn’t lend itself to really attractive or useful outlines… they tend to look something like this:

1. First item
   1. Indented item
   2. Another indented item
      1. Indented triple!
2. Not indented as much

As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!

Before I started crafting this tutorial, I first took a look at what a default outline looks like when built in Microsoft Word 2003. Here’s a screenshot of that sample outline. This, my friends, is our goal.

The first step to building this outline in CSS is to properly nest your unordered list. It should look something like this:

<ol>
	<li>First Things First
		<ol>
			<li>Firstborn Children</li>
			<li>First Place Finishes</li>
		</ol>
	</li>
</ol>

As you can see from the code above, in order to properly nest lists, you need to place the sub-list inside of the list item you want it to be a subset of. So we’ve started an ordered list, opened our first list item, and then added an entirely complete ordered list to the mix before we close that list item.

Now that we know how to build the list, all we need is the CSS. For this, we’ll be using the list-style property along with a set of increasingly specific selectors for our rules. Our first rules look like this:

ol {
	list-style: upper-roman;
	margin-left: 2.25em;
	padding: 0; }
li {
	padding-left: 2em; }

These rules do a few things. The list-style property tells all of our ordered lists to use roman numerals instead of numbers. The margin and padding on the “ol” tag indents our list a respectable amount: specifically setting both margin and padding makes IE behave just like the other browsers, because IE indents lists using padding by default while all other browsers use margins. And last but not least, our padding-left on the list item adds some space between our roman numeral and the text, just like in our example outline from MS Word.

However, this CSS gets applied to all of our unordered lists, not just the first one. So we’ll need to use a set of increasingly specific selectors in our CSS to create the appropriate look. Here’s the full CSS for a complete four-level outline:

ol {
	list-style: upper-roman;
	margin-left: 2.25em;
	padding: 0; }
ol ol {
	list-style: lower-alpha;
	margin-left: 1.25em;}
ol ol ol {
	list-style: lower-roman;
	margin-left: 2.5em; }
ol ol ol ol {
	list-style: decimal; }
li {
	padding-left: 2em; }
li li {
	padding-left: .4em; }
li li li {
	padding-left: 0; }

Here, the “ol ol” rule means “only apply this style to ordered lists within ordered lists,” and “ol ol ol” does the same for third-level lists, and so on. As you can see, we’re setting the list style to lowercase alphabet on the 2nd level, lowercase roman numerals on the 3rd, and regular numbers on the 4th. We’re also adjusting the margin on the 2nd-4th levels of the list (and 2nd – 3rd levels of the list items) to make them more consistent with Word’s display. If you wanted to adjust them to something different, it’s a simple matter of changing the number of ems in the margins or padding.

After the 5th level, Microsoft Word simply cycles back through the same styles starting at the 2nd level, so if you wanted an outline more than four levels deep, you could just do something like this to save bytes and effort:

ol ol, ol ol ol ol ol {
	list-style: lower-alpha;
	margin-left: 1.25em;}

And that’s all there is to it! Here’s our completed example, complete with a little extra styling just for kicks to make it look more like Microsoft Word’s print layout (my editing layout of choice). If you’re interested, here’s the CSS I used for creating the print layout look:

body {
	background-color: #9099ae; }
#wrap {
	background-color: #fff;
	margin: 0 auto;
	width: 33em;
	border: 1px solid #000;
	border-right-width: 3px;
	border-bottom-width: 3px;
	padding: 5em 6em;
	font-family: "Times New Roman", Times, serif; }

And the best bit? This styling works pretty much everywhere: Firefox, Opera, Netscape, Safari, and even Internet Explorer 5.5 and up all behave themselves! (IE 5.5 ignores our “auto” margin in the print layout view, but it still gets the outline part right)

So now you can go out into the world, head held high, confident in your abilities to organize the myriad lists of the web into visually appealing outlines with wild, voracious abandon. You know… if that’s your sort of thing.

5 Ways to Set Your Unordered Lists Apart

Unordered lists are one of the most pervasive elements on the web, probably just behind paragraphs and hyperlinks in terms of their bunny-like abundance. And for good reason: bulleted (i.e., unordered) lists are a great way to convey a bunch of related information in a rather small space, which is often the preferred way to read on (and thus, write for) the internet.

Last week, I showed you how to turn an ordinary, unassuming unordered list into a navigation bar. And then we made that nav bar even cooler with a bit of JavaScript. But sometimes, you just need a list to be a list. But that isn’t to say it has to be a boring looking list. Here are five different ways to style your unordered lists with CSS.

1: Change your Bullets

Sometimes, all your list needs is a new set of bullets to set it apart from all the other lists out there. For that, you’d turn to the list-style-type attribute, like so:

ul {
	list-style-type: circle;
}

This sets your bullet type to a hollow circle, as shown in this example. And there are other list-style-types out there, as well. “Disc” is the default style, but “square” has a nice look, as well.

2: Add Margins and Padding

If you really want your list to stand out, you could do worse than to literally set it apart with a bit of margin and padding:

ul {
	margin: 2em;
}
ul li {
	padding-left: 1em;
	margin-bottom: .5em;
}

As you can see in this example, our first rule applies a 2 em margin to all four sides of our unordered list – moving it away from the surrounding paragraphs both vertically and horizontally. The left padding on the list item puts a little space between the bullet and the text, adding to the airy feel. The margin on the bottom of the list item opens a bit of space between the individual items in our list.

3: Use an Image

One of the easiest ways to make your lists truly unique (and to ensure they mesh well with your site’s design) is to use images instead of bullets. Here’s how to do it:

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

Easy, no? Yet the effect is dramatic: all of our list items now have a checked box next to them instead of a bullet. And it doesn’t have to be a checkbox, either – it could be anything your creative little heart desires. One caveat to this technique is to remember that, unlike the default bullet types, these images won’t grow and shrink with your items if your readers change the text size.

4: Borders, Backgrounds and the Hover Class

For a unique list style that doesn’t make use of images, you could always use borders, background colors, and the :hover pseudo-class to set your list apart:

ul {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
ul li {
	font-weight: bold;
	margin: 0;
	padding: 3px 10px 5px 20px;
	border-bottom: 1px solid #ccc;
	color: #666;
}
ul li:hover {
	color: #000;
	background-color: #ddd;
}

In this example, we’re turning off the bullets altogether with a list-style: none rule, then styling the list items by changing their color, giving them a bit of padding, making them boldface, and setting a border along the bottom. Then, when the user hovers their mouse over the list item, it darkens slightly and we apply a pale gray background color, which would help the reader keep their place in a long list more easily.

Of course, IE6 doesn’t recognize the :hover class on anything other than anchors, so if you needed this to show up in IE6, you’d need to apply an anchor to your text… which is why this technique is usually reserved for sidebar links or lists of similar ilk.

The Whole Shebang

Of course, why stop at just using one of these techniques, when you could apply several at once? Here’s our mega-styled list:

ul {
	margin: 1.5em;
}
ul li {
	list-style-image: url(uncheck.gif);
	border-bottom: 1px solid #ccc;
	padding: .2em 0 .2em .5em;
	font-weight: bold;
	color: #666;
}
ul li:hover {
	cursor: pointer;
	list-style-image: url(check.gif);
	background-color: #f2f2f2;
	color: #000;
}

In this attractive example, we are:

• Setting a margin on the list to set it apart,
• Setting padding and a border on the list item,
• Using an image instead of a bullet,
• Changing the font-weight and color of the text, and
• Using the :hover pseudo-class to change the cursor type, set a new list image, apply a subtle background, and darken the text.

Now that’s a nice looking list. Of course, as before, our hover elements won’t show up in IE6 (though IE7 will handle them fine). But our list is still pretty darn distinctive even without the hover class.

These are just five of a nearly infinite variety of options. What techniques do you use to set your lists apart? Oh, and be sure to subscribe to our feed, because later this week I’ll show you a trick for styling nested ordered lists that really makes them more attractive and user-friendly.

Great Articles Elsewhere: February 15 to February 22

Intelligent Navigation Bars with JavaScript and CSS

I’ve developed a trick over the years that I’ve used on a number of websites now for making my sites’ navigation bars “intelligent” or “self-aware.” By that, I mean that the navigation bar automatically knows which tab/button/whatever should be considered the currently active link, without having to manually specify a class or ID on either the body tag or on the links themselves. And since I’ve found it so useful, I thought I should share it with you, even though it does involve a smidgen of JavaScript.

I start with an unordered list that looks something like this:

<ul id="nav">
	<li><a href="/about/">About Us</a></li>
	<li><a href="/contact/">Contact Us</a></li>
	<li><a href="/archives/">Our Archives</a></li>
	<li><a href="/free/">Free Stuff</a></li>
</ul>

Then I turn the unordered list into a navigation bar, using the technique I described in my last article. I won’t delve into those details here, for the sake of brevity and my fierce, fierce (fierce!) hatred of repetition, but you might want to read the prior post first if you missed it. The navigation bar gives me tabs that expand nicely for different text sizes and respond by growing and changing color when people hover over them.

But what if you want to somehow indicate to your users which page or section of the site they’re currently visiting? For that, I use the following JavaScript magic:

function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) {
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}

This tiny little function does four things:

1. Finds all of the anchor tags (via getElementsByTagName) inside of the element with the “nav” id (getElementById) – our unordered list, in this case.
2. Cycles through every anchor tag that we’ve found (our “for” loop).
3. Compares the “href” of the anchor tag with the page we’re currently on (document.location, which is the URL that shows up in the bar at the top of your browser) to see if the href is contained therein.
4. If the href is a match for the page we’re on, it sets a class of “active” on the anchor tag (className=’active’).

Then we have to make sure to run the setActive script when we load the page, so that our tab gets set as soon as the page is loaded. I accomplish that with this line of JavaScript somewhere below my setActive function within the same file:

window.onload = setActive;

After that comes the CSS. Because we’ve used our JavaScript to set a class of “active” on our tab, all we need to do is style the active class. I usually do something fairly simple like the code below, which make the tab drop down from the top, applies a background color, and gives it a dark border on all sides but the top:

ul#nav li a.active {
	padding-top: 15px;
	background-color: #075a97;
	border: 1px solid #333;
	border-top: none;
}

And voila! Your navigation bar suddenly knows and indicates exactly where you are, without having to remember to specify any extra IDs on the body tag or navigation links. You can see it in action here.

As a caveat, this technique assumes that you’re not linking to a lot of commonly-nested directories in your navigation. For instance, if you have one tab going to “/blog/” and another to “/blog/archive/”, then both tabs will inherit the “active” class when you’re in the archive directory (because /blog/ is part of /blog/archive/). One way to get around this limitation would be to be more specific on the first tab – for instance, linking to “/blog/index.php” instead.

Tab-Based Navigation in Six (or Seven) Easy Steps

Navigation bars are the signposts of the web world: we take them for granted because of their ubiquity, but we’d all have a much harder time getting around without them. On most websites, nav bars hold a position of honor near the very top of the page, meaning they’re one of the first things your users see upon entering your site. As such, there’s a lot of pressure on navigation bars to look clean, act sophisticated, and ply the client’s wife with small talk and Manhattans while you close the deal.

Because of all that pressure, a lot of designers turn to the Tools of Yesteryear to ensure their navigation looks exactly the way they expect it to. Table cells, flash buttons, images, and (shudder) image maps make far too common an appearance at the top of otherwise respectable websites.

But you don’t need all that! Here’s a simple tutorial on how to create a perfectly respectable tabbed navigation bar with clean, happy XHTML and a few lines of CSS. I’m using tabs because I’m fond of them, but you could adapt these techniques to create whatever sort of navigation you’d like.

We’ll start with an unordered list, like so:

<ul id="nav">
	<li><a href="/about/">About Us</a></li>
	<li><a href="/contact/">Contact Us</a></li>
	<li><a href="/archives/">Our Archives</a></li>
	<li><a href="/free/">Free Stuff</a></li>
</ul>

Why an unordered list? Well, because when you get right down to it, what is a nav bar but a list of links, given in no semantically vital order? Nothing, I tell you. Nothing. Once we have our list, we have a page that looks something like this. I’ve applied a couple other styles to my body tag (moved the text away from the edges, set a font family, and given my page a top border), but as you can see, our navigation list is Plain Jane.

The next thing we’ll need to do is move our navigation to where we want it. I want my tabs to look like they’re coming out of that border I’ve applied to the body, so let’s move the list to the top right corner:

ul#nav {
	position: absolute;
	top: 10px;
	right: 0; }

The “position: absolute;” rule pulls our list out of the normal flow of the document so that we can put it wherever we want. I then use a couple of other rules to move it 10 pixels from the top (i.e., the width of my border) and place it right along the right side of the page. If you wanted your navigation on the left, a rule of “left: 0;” would do the trick.

But our list still looks like a list (in everything but IE), and we can’t have that. The first step along the road to total list domination is to remove the margins, padding, and bullets that make our list so list-like. We’ll append our previous rule, so it now reads thusly:

ul#nav {
	position: absolute;
	top: 10px;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 0; }

This is fairly straightforward: the “list-style” rule removes the bullets from our list, and then we set our margins and padding to zero to make the list fit snug against our top border, as you can see here.

Next up, we’ll put our list items in a single horizontal row. This is accomplished with a single rule:

ul#nav li {
	float: left; }

As you can see, our list items are now arranged horizontally. Now let’s use some CSS magic to make them look a little more like tabs:

ul#nav li a {
	display: inline;
	float: left;
	padding: 8px 5px 3px 5px;
	margin-right: 5px;
	background-color: #034a7f; }

We’re modifying the anchor tag here instead of the <li> tag for one primary reason: we want the entire tab to act as a link, not just the text portion. By applying our padding and background color to the anchor tag instead of the list item, we make our entire tab clickable. You can see the effect here.

Oh, and that bit at the top about displaying inline and floating left? Well, that’s what we in the biz like to call a “hack.” The two rules are working together to accomplish a single task: to make Internet Explorer 6 play nicely. The “float: left” property reminds IE6 that we want our clickable area to take up all the space we’ve given it, not just the text part – without this statement, only the text (and not the whole tab) is clickable in IE. But floating the links also introduces some weird spacing problems in IE: the browser suddenly decides to start doubling the size of our margins (more on that can be found here). But the “display: inline” rule reminds Internet Explorer that we really want all these elements in a snug little row, so no extra margin gets inserted.

Of course, after all that work our tabs are still a little tough to read, so let’s apply a couple more styles to our links:

ul#nav li a {
	display: inline;
	float: left;
	padding: 8px 5px 3px 5px;
	margin-right: 5px;
	background-color: #034a7f;
	color: #fff;
	font-weight: bold;
	text-decoration: none; }

This change is basic, but effective. I set the text color to white, the font weight to bold, and used “text-decoration: none;” to remove the underline from our tabs. The change is a big improvement.

Now, we could be done here, but I like to add a touch of interactivity to my tabs. Another benefit of making the tabs out of our anchor tags is that anchor tags respond to the :hover state in all browsers… including Internet Explorer (even though it ignores it everywhere else). So let’s add some style to our hover states:

ul#nav li a:hover {
	padding-top: 12px;
	background-color: #075a97; }

And just like that, our navigation bar responds to interaction. Hover your cursor over the tabs and watch how they drop down and change color in response to your every whim. That little touch of interactivity helps ensure your users know exactly what they’re clicking on, and adds a touch of sophistication to the top of your page. And better still, the tabs (and text within) grow and shrink automatically when your users change the page’s text size – I’d like to see an image map do that! With these simple styles in your bag of tricks, your client’s wife doesn’t stand a chance.

If you found this post useful, watch for a follow-up article later in the week, where I’ll show you how to make your navigation elements “self-aware” with just a touch of JavaScript and a couple extra CSS rules. If that sounds interesting, subscribe to the feed. If that sounds scary, you’ve watched too many Terminator movies.

Update: You can read the second article in this two-part series here.

Great Articles Elsewhere: February 08 to February 15

7 Tips for Great Print Style Sheets

CSS doesn’t apply exclusively to the Realm of the Screen. You can also write style sheets that apply to the medium that first spawned them – print. This can be a very useful trick, since people read on the screen very differently than they read print documents. And your fancy-dancy layout may look stellar at 1024×768, but that doesn’t mean it rocks equally at 8 1/2″ x 11″.

So here are a few tips for creating a print style sheet that will ensure your website is user-friendly, regardless of the medium it ends up in.

1: Specify a Print Style Sheet

How’s that for a great opener? Specifying the style sheet in your code is the first step to a much more useable website. Here’s how you do it:

<link rel="stylesheet" href="print.css"
media="print" />

The important part here is the media=”print” option. This tells the web browser to only apply these styles to print media.

2: Build On Your Screen CSS

One nice trick you can use is to build your print style sheet to amend your screen style sheet. To do this, simply neglect to reference a medium in your screen CSS link, like so:

<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="print.css"
media="print" />

This causes your screen style sheet to be applied to both screen and print. Meaning, your print CSS only has to describe the things you want to do differently.

3: Wipe Out Your Screen CSS

Of course, if you want your print CSS to differ widely from your screen CSS, denoting all the differences between the two would be tedious. In that case, you’d want to do something like this:

<link rel="stylesheet" href="screen.css"
media="screen" />
<link rel="stylesheet" href="print.css"
media="print" />

Specifying a media of “screen” for your main CSS file means your print style sheet is building upon a blank slate. If you’re making a lot of changes, this can be useful.

4: Hide Extraneous Elements

Not everything that is useful on the screen is nearly so useful in print. For example, the navigation at the top of your page, or the blogroll in your sidebar, aren’t nearly so useful when they take up a full printed page and obscure your text. Consider hiding them in your print style sheet by creating a list of multiple selectors, like so:

#navigation, #blogroll {
	display: none;
}

Then, as you come across more elements that shouldn’t be in your printed version, you can just add them to the list.

5: Bump Up Font Sizes and Line-Heights

While I’m sure your 10-pixel-high cramped Helvetica looks so very avant-garde on the screen, people usually prefer a little more room when they’re reading on the page. Try bumping up the font-size and line-height a little compared to the screen:

body {
	font-size: 120%;
	line-height: 130%;
}

6: Move to Serif Fonts

Serif fonts were created to make it easier to read words on the printed page. The serifs (the little “feet” at the bottoms of letters) help the eye define the edges of the letters and lines on the page. Sans-serif fonts, on the other hand, were invented for the screen: the serifs on low-resolution monitors and at small sizes tend to make the letters look a little fuzzy. So while Helvetica may be a great choice for the screen, perhaps Georgia would be better suited for the page:

body {
	font-family: Georgia, "Times New Roman",
	Times, serif;
}

7: Think in Inches and Points

Pixels are a useful unit of measurement when dealing with the screen, but they lose some of their usefulness when you move to the printed page. At that point, it’s useful to remember that in CSS, you’re not limited to setting sizes in pixels, percentages or ems. You also have inches, centimeters, millimeters, points, and even picos at your disposal. Make use of them:

body {
	font-family: Georgia, "Times New Roman",
	Times, serif;
	font-size: 12pt;
	line-height: 18pt;
}
body #container {
	margin: 1in 1.2in .5in 1.2in;
}

What other print style sheet tips have I missed? Share the love in the comments!

Use Comments to Organize Your CSS Design

It’s inevitable: the longer you work with CSS, the longer your CSS files will grow. And the longer your files get, the tougher it will be to find what you’re looking for when you go back to edit your website’s styles later on down the road. This is where CSS comments can really come in handy.

The syntax is amazingly simple: You start a CSS comment with /* and end them with */ – like so:

/* This is a CSS Comment. */
body {
	font-size: 80%;
}

A single CSS comment can also span multiple lines, like this:

/* This CSS was written by Rob.
   He thinks of it as his own child, so
   you'd be best off asking permission
   to use it. ;)
*/
body {
	font-size: 80%;
}

So what are CSS comments good for? Well, in addition to identifying the creator of a CSS file (as shown above), you can also use your comments to keep your CSS more organized. For example, I use comments to organize my CSS into sections, like this:

/* Top navigational elements. */
ul#topnav {
	property: value;
}

/* Main content area. */
#content {
	property: value;
}

This makes it much easier to come back though and add or remove values from a stylesheet later on.

I also use comments to identify any “hacking” I’ve been forced to do.

.column {
	height: 1%; /* Makes IE behave itself. */
}

That way, if the hack ever becomes unnecessary or causes a different problem down the line, it’s that much easier to find it.

What else do you use CSS comments for?

The 4 CSS Rules of Multiplicity

One quick and easy way to keep your CSS clean and well-structured is to remember (what I’m going to title) the four CSS Rules of Multiplicity. They are:

• Multiple declarations can live in a single rule.
• Multiple selectors can preface the same rule set.
• Multiple rules can be applied to the same selector.
• Multiple classes can be set on a single element.

Multiple declarations in a single rule is the most fundamental of the four CSS Rules of Multiplicity. Simply stated, it means you can have as many CSS declarations as you want between your opening and closing braces, like so:

body {
	property-1: value;
	property-2: value;
	...
	property-infinity: value;
}

Multiple selectors can really help keep your CSS clean by grouping your rules together. Consider the following example:

p {
	font-size: 110%;
	color: #333;
}
ul {
	font-size: 110%;
	color: #333;
}

When rules are identical like this, you can combine them by using sequential selectors, like so:

p, ul {
	font-size: 110%;
	color: #333;
}

But what happens when you have two selectors that have very similar, but not quite identical, properties? That’s when multiple rules come into play. Here’s an example:

p {
	font-size: 110%;
	color: #333;
}
ul {
	font-size: 110%;
	color: #333;
	font-weight: bold;
}

The paragraph and unordered list share a few properties in common, but not all. But you’re allowed to refer to the unordered list more than once, so you could write something like this:

p, ul {
	font-size: 110%;
	color: #333;
}
ul {
	font-weight: bold;
}

Another way to tackle having multiple rules in common across elements is to create multiple classes. For example, you could create a rule like this:

.container {
	padding: 5px;
	border: 2px solid #ccc;
	background-color: #f2f2f2;
}

But then a while later, you decide you want something that is almost the same as your container class, but the text within is larger and boldfaced. You might be tempted to write a completely new class that includes the padding, border, background, and font size and weight that you need. But instead, you could just create a second class containing just the differences between the two, like this:

.strong {
	font-size: 150%;
	font-weight: bold;
}

And then apply both classes to your XHTML element thusly:

<div class="container strong">
	This text is in our container,
	but is also big and bold.
</div>

By using all four of these examples of multiplicity together, you can keep your CSS looking lean and clean. And luckily, unlike the movie version of Multiplicity, Michael Keaton doesn’t get dumber the more often you use them.