CSSnewbie

CSS Attribute Selectors: Built-In Classes

If you’ve been a CSS groupie or follower of this website for any length of time, you should have a fairly firm grasp on the concept of using classes in XHTML as “hooks” into your pages (and if not, this article is a good place to catch up). But classes and IDs aren’t the only ways you can describe the elements in your website in order to style them. You can also make use of attribute selectors.

Attributes are the property=”value” pairs inside of most XHTML elements that further describe that element. Take the anchor tag, for example:

<a href="page.html" title="Click to visit!">Text</a>

This anchor tag has two attributes: href and title. Those attributes also have very specific values associated with them. And it’s these attributes, and their values, that make attribute selectors work.

By using attribute selectors in your CSS, you’re able to target elements with specific attributes, or even specific values within those attributes. When using attribute selectors, the attribute is contained within [brackets], just like how .classes have a leading period, or #ids have a leading pound sign. There are four ways to use attribute selectors:

The [attribute] syntax is the least specific of the four. It allows you to target any element with a specific attribute set, regardless of its value. For example:

a[title] {
	font-weight: bold;
	cursor: help;
}

This little bit of CSS would target any anchor tag that had a title attribute set, regardless of what the title contained. My CSS here makes the anchor boldfaced, and changes the cursor to a question mark when the user hovers over the link. This could be useful to indicate to the user that more information (i.e., the tool tip) is coming.

The most specific syntax is [attribute=”value”]. Using this selector, you’d be able to apply specific styles to elements with specific values set. So if, for example, you had an anchor that pointed to a specific website you wanted to emphasize:

a[href="http://www.cssnewbie.com/"] {
	font-size: 120%;
	color: red;
}

This code would add a bit of emphasis to any link going to the front page of CSSnewbie. I would recommend copying and pasting this code into any website you happen to be working on at the moment. :)

The [attribute~=”value”] syntax allows you to look within the attribute’s values and find a specific value within a space-separated list of values. Alternatively, you can use the related [attribute|=”value”] syntax to find parts of a value that are separated by hyphens (instead of spaces). So, for example, if I had an image with an alt tag that read “Gallery: Wombats Gone Wild,” I could style this gallery (and all other galleries that followed this same pattern) like so:

img[alt~="Gallery:"] {
	border: 2px solid #333;
}

And suddenly, all of your images that link to galleries have special styling, without having to add any additional classes! And that’s really the beauty of attribute selectors: if used properly, they can be a great help in the fight against Classitis.

Of course, attribute selectors don’t work everywhere (why would they? They’re too cool for school). Here’s where attribute selectors earn a big fat FAIL:

• IE6 or below on the PC
• IE5 or lower on the Mac
• Netscape 4 or under (i.e., people in 1997)
• Both people still using Opera 3

Luckily, very few people are still using Opera 3, Netscape 4, or IE5. And with the recent release of IE7 (and the planned future release of IE8), Internet Explorer version 6 should be on its way out the door, as well. In other words, attribute selectors are fast becoming a reasonable means of styling your websites.

Writing CSS Shorthand

Writing Cascading Style Sheets saves you time and bandwidth in the long run by removing all of the presentational elements and attributes from your web pages and moving them into a separate document. But sometimes that CSS document itself can get pretty long as well. So what do you do then?

There are lots of things you can do to help – embracing the cascading nature of CSS helps a great deal, as does combining CSS declarations using sequential selectors. But another trick that can really help cut down on the size of your CSS is to use CSS shorthand properties whenever possible. There are six shorthand properties for various areas of your CSS: margins, padding, borders, backgrounds, list-styles, and fonts. I’ll go through each of them below.

The margin shorthand property combines the margin-top, margin-right, margin-bottom, and margin-left properties into one single property. So instead of writing this:

div {
	margin-top: 5px;
	margin-right: 8px;
	margin-bottom: 3px;
	margin-left: 4px; }

You could shorten it all down to this:

div { margin: 5px 8px 3px 4px; }

It’s important to remember to always put your margins in the shorthand property in the following order: top, right, bottom, and left. Basically, just start at the top and work your way around the element clockwise. And if your top/bottom and left/right margins match, you can boil your shorthand down even further:

div { margin: 5px 8px; }

The rule above applies a 5 pixel margin to the top and bottom of your div, and an 8 pixel margin to the left and right sides. If all four of your margins match, you could even just write this:

div { margin: 5px; }

The padding shorthand property works exactly the same way as the margin shorthand. The biggest thing to remember about both of these properties is to start at the top and work your way around clockwise. And if you’re shortening it to two values, the top/bottom value always goes first, followed by the left/right value. Further, if you don’t need to specify a value on any one of the sides, you can just specify a zero (0) size with no unit of measurement.

div { padding: 30px 0; }

The border property allows you to combine the border-width, border-style, and border-color properties into one. The width comes first, followed by the style, and then the color. So instead of writing out all this:

div {
	border-width: 3px;
	border-style: solid;
	border-color: #c00; }

You could boil it down to a single rule, like so:

div { border: 3px solid #c00; }

The background property is fairly powerful, in that it combines five rules into one: background-color, background-image, background-repeat, background-attachment, and background-position (in that order). So instead of writing this verbose mess of code:

div {
	background-color: #fff;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-position: top center; }

We could boil all of that down to this little snippet:

div { background: #fff url(../img/bg.gif) repeat-y fixed top; }

Also note that I skipped the “center” portion of my background-position property: if you specify one background position (i.e. “top”) but neglect to specify a second position value, “center” is the assumed value.

The list-style shorthand property isn’t used all that often, but it can save you a couple of lines of code. It combines the list-style-position property with either of the list-style-type or list-style-image properties – you could probably specify both, but list-style-image would overwrite the list-style-type property with whatever image you selected. So instead of writing this:

ul {
	list-style-type: square;
	list-style-position: inside; }

You could write this:

ul { list-style: square inside; }

Generally speaking, however, I tend to only use this shorthand when I’m looking to remove styling from the list (as when building a navigation bar):

ul { list-style: none; }

The font shorthand property is probably the most powerful of all the shorthand properties. It combines a grand total of six properties into one: font-style, font-variant, font-weight, font-size, line-height (even though it’s not technically a font property), and font-family. So instead of writing out all six of these rules:

p {
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: small;
	line-height: 1.2em;
	font-family: Helvetica, Arial, sans-serif; }

I can get by with a single declaration:

p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

Of course, most of the time you won’t be specifying all six of those properties at once – I can’t even imagine how difficult it would be to read italicized, bold-faced small caps! But it is very useful for specifying your font-size, line-height, and font-family all in one place. That way, all of your typeface information sits one convenient location.

Using the CSS @import Rule

Even the most complex style sheet starts out with a single rule. But when you’re working on a particularly massive and complex website, over time your style sheet will inevitably start to reflect the site’s size and complexity. And even if you employ every trick of organizing your CSS in the book, you might find that the sheer size of the file is simply overwhelming. At that point, you might want to consider splitting your style sheet up into several smaller CSS files. That’s when the @import rule can come in quite handy.

The @import rule is another way of loading a CSS file. You can use it in two ways. One, within the header of your document, like so:

<style>
	@import url('/css/styles.css');
</style>

But the following meethod is more useful for keeping your XHTML small and your code clean. You can import a style sheet from within another stylesheet. And better still, you can import any number of styles this way. So your document’s head could look like this:

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

But then your “style.css” document could simply contain calls to all of your other style sheets:

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

/* All three CSS files above will be loaded from
   this single document. */

This way, you can break up your gargantuan stylesheet into two or more logical portions — I chose typography, layout and color for this example, but you might prefer dividing your CSS according to the columns they create or something similar. Either way, the benefit is immense – you can have the same number of CSS rules overall, but in smaller, easier to manage units.

You can even load both your screen and print (or handheld, etc) stylesheets all at the same time using this trick. If you’d like to specify a media, just write your rules like this:

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

Like most cool things in CSS, this one comes with a couple of caveats:

• The @import rule isn’t recognized by the really old browsers out there… Netscape Navigator 4 skips over @imports entirely, and Internet Explorer 4 ignores them if you don’t use the (entirely optional, but generally used) parentheses. Of course, not too many people these days use either of these archaic browsers. And this problem can actually be useful if you’d like to hide some or all of your CSS from the browsers that can’t really support it.
• Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.
• Internet Explorer (you knew it’d come up eventually) doesn’t deal well with specifying media types – it chokes. Basically, IE (versions 4-7) try to read the media type like it were part of the file name, causing the whole thing to come crashing down. As such, if you don’t want your CSS to have a default media type of “all,” you’re probably better off using a combination of the <link> tag and imports – specifying a media type in your link, and then importing the appropriate CSS within the file you’re linking to. I haven’t yet heard if IE8 suffers from this same problem (if you happen to know, please enlighten me in the comments!).

But even with those caveats in mind, this can be a really useful technique. No matter how big your website ends up getting, you’ll be able to keep your style sheets under control.

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.

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!

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.

5 CSSriffic Treatments to Make Your Images Stand Out

No web presence these days is complete without a little pixel lovin’ in the form of images. If you have a blog or website out there somewhere without a single image anywhere on the site, well… 1997 called. They said they’re sorry you fought and they want you to come back home.

Sometimes we need a little help to make our outstanding images truly stand out.

But sometimes just having images isn’t enough. Sometimes we need a little help to make our outstanding images truly stand out. And that’s where CSS can help. Here are five things you can do, using CSS, to make the most of your images.

The Wraparound Treatment

One of the easiest ways to add visual interest to your page (and your images at the same time) is to have your text wrap around your images. It’s very easy to do:

img.wrap {
	float: right;
	margin: 0 0 .5em 1em;
}

The “float” property causes the image to literally float to the right side of whatever container it’s in, and causes the rest of the content inside that container to wrap around it. Then we just added a bit of a margin to the bottom and left sides of the image to prevent the text from butting right up against its edges. And you’ll note we used a “wrap” class on this rule, meaning we can choose which images get this treatment. You can see this in action here.

The Photo Treatment

This option gives your image a bit of a white border around the edges, just like photos in real life often have. Try this:

img.photo {
	border: 1px solid #999;
	background-color: #fcfcfc;
	padding: 4px;
}

You can see the results here. What we’ve done is added a gray border to all four sides, changed the background color of the image to a very pale gray (almost white), and then added a bit of padding to all four sides between the background and the image itself, so the background color could show through. And you’ll note we used a class of “photo” here: this way, we can pick and choose in our code which images get this treatment.

The Depth Treatment

We can also expand on the Photo treatment above and use the borders to create a sense of depth:

 img.deep {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
	background-color: #fcfcfc;
	padding: 4px;
}

As you can see above and on the example page, we’ve changed the border colors slightly. We’ve made the top and left borders a slightly lighter shade than the bottom and right borders. This creates a subtle illusion of depth: the lighter border on the top and left suggests light is hitting those sides and the darker border on the bottom and right suggests a hint of a shadow created by a three-dimensional object.

The Shadow Treatment

And to expand further on the Depth treatment, we can use a bit of CSS magic and slightly modified HTML to really make the photo jump up off the page. We’ll start with this HTML:

<div class="shadow"><img src="photo.jpg" /></div>

As you can see, we’ve wrapped our image in a div. Then we just apply these styles:

.shadow {
	float: left;
	background-color: #aaa;
}
.shadow img {
	margin: -4px 4px 4px -4px;
	display: block;
	position: relative;
	padding: 4px;
	background-color: #fcfcfc;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
}

Obviously, this is a more advanced technique than the previous options. We’re applying a background color to the div around our image, and then floating it so that it becomes the same size as the image inside. Then, we’re using negative margins to move our image up and to the left of where it was originally, setting a display of “block” and a position of “relative” to keep the floated div container from moving with our image. The result is that a few pixels of our background color are visible in the bottom right, creating the illusion of a shadow. Of course, as you can see by the example, it isn’t a true shadow: nothing shows through.

The Shadow Treatment, Part Two

If you want your shadow to behave like a real shadow, you’ll need to make use of a transparent PNG image. Image editing is beyond the scope of this article (and as you can probably tell from the site, this author), but if you create a semi-transparent square of black (I used 40% opacity) and save it as a PNG, then you can just replace this line:

background-color: #aaa;

With one like this:

background-image: url(shadow.png);

And the result is a transparent shadow effect! On browsers whose initials don’t spell IE6, anyway. As usual, IE is a party pooper: it doesn’t support transparency in images. But the result is a non-transparent shadow, no worse than what we had in the previous example.

Book-style Chapter Introductions Using Pure CSS

Do you remember all those wonderful hand-me-down children’s books from your childhood, or perhaps those dusty old tomes you’ve leafed through at a used bookstore recently? I still like looking through old books of Days Gone By. Their typefaces, in particular, give me a warm fuzzy feeling in the far reaches of my tummy. The scripty drop-caps at the beginnings of chapters, and the first line of small caps leading into the first full paragraph, in particular, fill me with all sorts of nostalgia.

So today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial. We’ll use two types of selectors which I haven’t talked about yet here: adjacent sibling selectors and pseudo-element selectors. I’ll explain each type briefly before we get started.

Adjacent Sibling Selectors are a way of styling an element that appears directly adjacent to another element. So, for example, if you knew that the first paragraph to follow an image in your XHTML was always going to be a caption, and you wanted that styled differently, you could write something like this:

img + p {
	color: #999;
	font-style: italic;
} 

This would turn the paragraph immediately following the image gray and italicize it, all without any extra code in your XHTML.

Pseudo-Element Selectors refer to parts of your XHTML that aren’t technically elements of their own right, but can be easily distinguished from the surrounding code due to their nature. The most common two pseudo-elements (and the two we’re using here) are :first-letter and :first-line.

Creating a Book-Style Introductory Line

So what we need to do to create our book-style line is create a drop-cap of the first letter, and the rest of the first line in small caps. And we want to do it without having to resort to classes or IDs to get it done. What we’re assuming in this exercise is that your XHTML is already well-formed – your articles or chapters always start with a heading tag (I’m using <h4> tags), and you’re using paragraph tags instead of (shudder) line breaks. So here’s how we do it:

You’ll start with some fairly simple XHTML that looks something like this:

<h4>Article Titles for Fun and Profit</h4>
<p>This is our first paragraph. Don’t you think
the first line should stand out?</p>
<p>Our second paragraph doesn’t need such
fancy-pants styling.</p>

And then we’ll use CSS to style the first line of the first paragraph following our 4th level heading:

h4 + p:first-line {
	font-variant: small-caps;
	font-size: 1.1em;
}

This gives us a small-capped line that is slightly larger than the rest of the surrounding text. Now, all we need to do is create our drop cap:

h4 + p:first-letter {
	float: left;
	font-size: 2.5em;
	font-weight: bold;
	font-family: "Monotype Corsiva",
	"Apple Chancery", fantasy;
	margin: 5px 5px 5px 0;
} 

Here, I’ve floated the letter to the left (which causes the rest of the text to flow around it), increased its size, made it boldface, set it in a scripty font (you could chose any font here, but I was going for a bookish look), and added a bit of a margin to make sure there isn’t any overlap.

We’ve managed to create an introductory line without a single byte of XHTML.

And that’s all there is to it! You can see a finished example here. We’ve managed to create an old-school book-style introductory line without adding a single byte of XHTML. This is a quick and easy way to add some visual appeal to your articles. It could even make for an interesting addition to a print style sheet, adding a bit of classic authenticity.

Now, I have one caveat: this does not work in IE6. But the text simply degrades nicely into an otherwise unaffected first line. No harm, no foul.

Style your links with CSS

Anchor tags (a.k.a. links or hyperlinks) (these things: <a>) are one of the more ubiquitous elements of the web world. In fact, it’s the anchor tags that put the ‘Web’ in the World Wide Web – they’re the points of interconnectivity, like strands in a spider web, that hold this whole crazy Net of ours together.

And we all know what links look like, too: they’re dark blue, underlined, and stand out on a page like the varicose veins on the backs of great-Aunt Esther’s legs. And just as we don’t understand why Esther would choose to wear those shorts in public, we don’t understand why something as common as an anchor tag should have to look so darn unattractive.

With CSS, links don’t have to be ugly.

But here’s the kicker: with CSS, links don’t have to be ugly. They can look pretty much however you want. Here are a few of the things you can do to make your links stand out without sticking out:

Change the Color. Some stick-in-the-mud Web proponents would have you believe that blue is the only color a hyperlink should ever wear, in much the same way that white shoes after Labor Day are a social faux-pas. Their argument is that people are used to seeing blue, underlined links; to mess with this convention is to anger the gods and confuse your readers. I say bollocks! Any text that stands out from the rest will attract attention. And green can stand out just as well as blue:

a {
	color: #6c6;
}

This gives us a lovely link the exact shade of a seasick leprechaun. How’s that for fancy?

Underline, Schmunderline. Personally, I’m not a big fan of underlined text. Too much of it can be a distraction – everything on the page seems to be clamoring for attention. So why don’t we remove the underline from that hyperlink:

a {
	text-decoration: none;
}

And now, our links don’t overwhelm the nearby text.

Or, you could even make the underline only appear when someone puts their mouse over the link (my personal favorite):

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

The rules above state that “normal” anchor tags should not have any sort of decoration: no underlines, in other words. However, when someone “hovers” over an anchor, we should put the underline back.

Image is Everything. If you wanted to get really fancy, you could even make a small image (an icon, if you will) appear next to your links. All you have to do is create your image at the appropriate size, put it on your server where your CSS can get to it, and do something like this:

a {
	padding-left: 16px;
	background-image: url(icon.gif) no-repeat;
}

This rule is a little more complicated, so I’ll explain in greater detail. First, we applied some padding to the anchor tag… we need some room for the image to show up. Then, we applied the image to the background of the element (which, as we learned last time, is applied to the padding around an element). Under normal circumstances, the background would repeat itself in every direction, showing up underneath our link text. We don’t want that, so we added the ‘no-repeat’ condition to stop it from showing up more than once. And the result: links with images.

Putting it All Together. When our powers combine, we become… Captain Hyperlink! Or, at the very least, we can have aesthetically pleasing links that somehow manage to attract attention without overwhelming the page. And without reminding us of great-Aunt Esther’s visit last summer.

If we take what we know about CSS classes and apply that to this example, we could even make certain types of links look different from others:

a.pdf {
	color: #c00;
	font-weight: bold;
	text-decoration: none;
	padding-left: 10px;
	background-image: url(pdf_icon.gif) no-repeat;
}
a.pdf:hover {
	text-decoration: underline;
}

Now how’s that for some fancy linkage? I encourage you to take these examples I’ve provided and expand upon them. What can you make your links do?

When to Use CSS IDs and Classes

There are three different ways in CSS you can dictate which elements you want to style. Each way is useful for a specific set of purposes, but by using all three together, you can really harness the cascading power of style sheets. The three methods of describing objects on a page are by their tag name, their ID, or their class.

First and most obviously, you can style all of an entire subset of elements by styling a specific tag. For instance, take the following code (please!):

p { color: red; }

This states that all text within a paragraph <p> tag anywhere in your document should be colored bright red, like so. As with most of my code examples, this practice is ill-advised but hopefully illuminating nonetheless. This technique is most useful when you want to change a large number of elements on your page at once.

However, you can also describe elements according to their IDs and their classes. Both IDs and classes are ways of further clarifying which elements you’re planning to alter. So consider the following snippet of HTML:

<p id=”introtext”>This is a snappy introduction.</p>
<p class=”aside”>Okay, so the intro isn’t that great.</p>

Here we have two paragraphs, one of which has an id assigned, and the other which has a class. You could manipulate these two paragraphs independently of one another (and the other regular paragraphs in your document) with code such as this:

p#introtext { font-size: 150%; }
p.aside { font-style: italic; }

IDs are unique and beautiful snowflakes. Classes are not.

The first rule affects our “introtext” paragraph. We select that specific element with “p#introtext,” with a pound sign between the two elements, which means “paragraph tags with an id of introtext.” We’ve set its font size to be 1.5 times the size of a normal paragraph tag.

Our aside, on the other hand, uses a period between the element and the class, which lets the browser know we’re talking about classes instead of IDs. And you don’t even technically need the “p” identifier before the ID or class: styling simply “#introtext” or “.aside” would have worked just as well in this example, but the more specific you are, the less danger you’re in of accidentally styling things you didn’t mean to.

So what’s the difference between an ID and a class, then? It’s pretty simple: IDs are unique and beautiful snowflakes (just like you!). Classes are not.

Think of an ID something like the license plate on your car. It’s an identifier that, presuming you haven’t been a victim of theft, is unique to your vehicle. Similarly, an ID can only be used once per HTML document. So if you have something on your page that you need to be different from everything else, that is a good time to set an ID.

A class, on the other hand, can be applied to multiple elements on the same page. So, going back to our CSS example above, we’re saying that our page will have only one introduction, but can or will have multiple asides. Sort of like this article, when you get right down to it.

Another important distinction between the two is that each element on your page can have only one ID, but can have multiple classes. So you could have HTML like this:

<p class=”aside right”>Was this example really necessary?</p>

You could then have two classes defined in your CSS: one that does something specifically to asides, and another that does something to elements with a class of “right” (for example, it could float them to the right side of the page). Elements with just an “aside” class would only have the “aside” attributes applied, while elements with just the “right” class would just be floated right. But by applying both to one element as we have above, we can create a unique type of element without having to write a lot of extra code. And that’s what CSS is all about.