What is the book about?

The book provides the reader with a foundation in how to markup and style a web site — the right way. In the authors’ own words this book is “a well-grounded, web standards-based approach in one package“.

Starting from the beginning, it explains the importance of solid, structured markup and of analysing a web site’s content before diving into the coding phase. It introduces the most important HTML tags and how to properly use them.

Following the HTML section of the book — which takes almost half of it — it dives into the CSS bit. Here it explains how to use CSS in a clean and effective way — just the way I like it :)

One of the most important aspects of this book is how it encourages the reader to continue to learn and explore — there is a very clear message that you can’t possibly learn everything from one book. It provides several paths in which the reader can further his or her knowledge and evolve as a web designer.

Who is the book for?

As I’ve mentioned above, the book is targeted at beginners — it doesn’t assume you know anything about HTML or CSS so everything is explained in a very clear and practical way.

I suppose it’s hard to assess whether the information would be easy to understand by an absolute beginner since I’m not one anymore (or at least I like to think I’m not). But every step of the book is so carefully explained, that I doubt anyone would have any problems.

Like Sam Brown mentioned in the title of his review, “Web designers who can’t code, need to read this book”. I couldn’t agree more.

A minor remark

The only thing I would have changed, or better yet, added to the book would be a more detailed section on inheritance. This is, however, probably due to the fact that I just wrote a massive post about it and all that information is fresh in my memory.

Inheritance is a fairly complicated topic and would probably not be relevant for this book; it’s one of the things that people can easily research on their own when any issues arise.

Conclusion

Reading this book felt like I was at the web design school I never had the change to attend. It is truly a course in a book: it explains the basics that every web designer should know — whether a coder or not.

The completed website that it provides the reader with at the end is invaluable, and I am not ashamed to admit that, even though I’m not within the book’s target audience, I’ve learned a few things I didn’t know, and remembered others I had forgotten.

I am lucky enough to know Christopher and Nicklas, the authors of this book, personally, and it was a pleasure to see that their charmingly friendly personalities show through in the writing of the book — which makes it an even more delightful read. Thoroughly recommended!

What is the :empty pseudo-class

Here is the definition taken from the W3C Selectors Level 3 specification:

The :empty pseudo-class represents an element that has no children at all.

Seems easy enough, right? That’s because it is. The :empty pseudo-class is going to target elements that are completely empty; for example, an empty paragraph:

<p></p>

Or an empty table cell:

<table>
<tr>
<td></td>
</tr>
</table>

It won’t target this paragraph though (there is a space within the p tag, therefore it isn’t empty):

<p> </p>

A practical example

So when can this selector be useful?

Image you’re styling a table and some of the data cells have no content — you can style them differently using the magic :empty pseudo-class.

Let’s take the table I’ve created for the Adding Style with CSS: A Beautiful Table article. I’m going to use the same CSS, but change the data to make it simpler (the data I’ve added makes no sense, but you get the point…). I’m also going to remove the content in a few cells, to make this example relevant.

So this is our markup:

<table>

	<caption>A simple table</caption>

	<thead>
		<tr>
			<th scope="col" rowspan="2">Some headings</th>
			<th scope="col" colspan="4">More headings</th>
		</tr>
		<tr>
			<th scope="col">Great</th>
			<th scope="col">Brilliant</th>
			<th scope="col">Genius</th>
			<th scope="col">Good</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<th scope="row">Interesting totals</th>
			<td>155</td>
			<td>165</td>
			<td>70</td>
			<td>140</td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<th scope="row">Curious</th>
			<td>5</td>
			<td>35</td>
			<td>50</td>
			<td>15</td>
		</tr>
		<tr>
			<th scope="row">Awesome</th>
			<td>75</td>
			<td>90</td>
			<td></td>
			<td>5</td>
		</tr>
		<tr>
			<th scope="row">Fabulous</th>
			<td>30</td>
			<td></td>
			<td>20</td>
			<td>80</td>
		</tr>
		<tr>
			<th scope="row">Nice</th>
			<td>45</td>
			<td>40</td>
			<td></td>
			<td>40</td>
		</tr>

	</tbody>

</table>

This is what I’m going to add to the CSS:

tbody td:empty {
	background: #EFEFEF;
	}

And now the empty cells are styled differently! I don’t think this could have been much easier.

Also, if you really need to ask, this selector works on the latest versions of Firefox, Safari, Chrome and Opera. It will probably work on Internet Explorer 9, like most CSS3 selectors will. (The first person to point out the obvious, will be directed to this link. — Thanks, Jack, for helping me remember the link!)

Here’s the example:

View example

So, will you be using this selector any time soon?

An overview

Although CSS3’s use has been increasing among web designers, browser support for some of its features is still inexistent.

Lately, I’ve been using Modernizr more and more to cater for those browsers that don’t support specific CSS3 properties—for example, on my site—, and it makes the development much easier because I know I’m providing these lesser browsers with an alternative experience, rather than just ignoring them.

Bear in mind (and this is even splashed on Modernizr’s front page), that Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.

How it works

To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example:

<script src="js/modernizr-1.0.min.js"></script>

The second step is to include on your html tag a class of “no-js”:

<html class="no-js">

Why add this tag?
Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case.

If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

What does this mean? 
Let’s take a look, shall we?

In this case, I opened the page on Firefox 3.5. This browser (sadly) doesn’t support multiple backgrounds, CSS gradients or CSS transforms, therefore, Modernizr outputs “no-multipebgs“, “no-cssgradients” and “no-csstransforms“. On the other hand, it does support canvas and border-radius, which explains “canvas” and “borderradius“. Etc.

How to use this (precious) information?

So what can you actually do with this? How does that help you in any way?, you might ask.

Let’s look at an example:

Multiple backgrounds

Your site’s background has been carefully built and you’re using the multiple background technique to make it simpler (and faster!) to code. Your CSS may look like this:

#nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

And a nice browser will render this:

Using Modernizr, your CSS will look instead like this:

#nice {
	background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

This is what your visitors will get, depending on which browser they have:

This is a very simplified use of Modernizr, but hopefully it’s enough to show you what you can do with it.

HTML5

Modernizr also allows you to use the new HTML5 elements—header, hgroup, section, footer, video, etc.—and style them.

This doesn’t mean that some of these elements will start working on Internet Explorer, but that you can style them and that IE will understand them and not ignore them.

JavaScript

You can also detect features using Modernizr in your JavaScript, using this syntax:

if (Modernizr.geolocation) {
}

Conclusion

I hope that I managed to explain the usefulness of Modernizr. While we can’t rely on the fact that browsers support the full spectrum of features we want to use, this is the best tool out there to provide for both worlds.

Do you use Modernizr too? How? If not, how do you deal with some browsers not supporting some features (assuming you are using the latest CSS3 techniques)?

When to use a DL

First, what has the W3 to say about this?

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description.

That means we can use them whenever we have something that needs a description. For example: a list of Belgian beer types, a list of services provided by a company, a list of the persons in a team, etc. Pretty straightforward: instead of using a normal list (ul) with headings and paragraphs in between, we can use an element which already has tags for our definition terms and descriptions.

The anatomy of a DL

A definition list is made up by 3 different tags: the opening dl tag; the definition term tag (dt); and the definition description tag (dd). That would look like this:

<dl>
	<dt>Term goes here...</dt>
	<dd>Description goes here...</dd>
</dl>

Still easy, right?

To mix things up a bit, we can have more than one term, to more than one definition. For example, a word in a dictionary can have two correct ways of spelling and more than one definition.

Beer o’clock

Now we are going to style a definition list of Belgian beer types (which I recently tried and loved!).

First, some HTML:

<div id="beers">

	<h1>A Definition List: Belgian Beer Types</h1>

	<dl>

		<dt>Amber ales</dt>
		<dd>These are beers similar to the traditional pale ales of England, although somewhat less bitterly hopped. A notable example is the 5% abv De Koninck brand, with its distinctive spherical glasses (called 'bollekes').</dd>

		<dt>Blonde or golden ale</dt>
		<dd>These are a light variation on pale ale, often made with pilsener malt. Some beer writers regard blonde and golden ales as distinct styles, while others do not.</dd>

		<dt>Brown Ale</dt>
		<dd>Regular bruin or brune beers such as Grottenbier are darker than amber ales, less sour than Flemish brown ale, and less strong than dubbel.</dd>

		<dt>Dubbel</dt>
		<dd>Dubbel has a characteristic brown color. It is one of the classic Abbey/Trappist types, having been developed in the 19th century at the Trappist monastery in Westmalle.</dd>

		<dt>Enkel</dt>
		<dd>This beer is the basic recipe for what was traditionally a range of three beers of increasing alcohol content.</dd>

		<dt>Flemish Red</dt>
		<dd>Typified by Rodenbach, the eponymous brand that started this type over a century ago, this beer's distinguishing features from a technical viewpoint are a specially roasted malt, fermentation by a mixture of several 'ordinary' top-fermenting yeasts and a lactobacillus culture and maturation in oak.</dd>

	</dl>

</div>

So, we’re wrapping our content in a nice container (div), then a little descriptive title (h1) for our page and finally our definition list, with the beer types as definition terms (dt) and each description as a dd.

CSS 3 magic

I should warn you: this WILL NOT work on IE6. The page will still have its colours and main formatting, but none of the sweet CSS 3 styling is going to be seen. When you’re driving an inferior car, you don’t expect it to go as fast as a Ferrari, do you? You’ll still get there, but with less, or no style.

First we’ll add some defaults to our stylesheet (you should be using a proper reset on your stylesheets, but let’s make things simpler here), and we’ll also style the container div:

body {
	margin: 0;
	padding: 20px;
	text-align: center;
	background: #fff;
	}

h1,
dl, dt, dd,
p,
a {
	margin: 0;
	padding: 0;
	}

#beers {
	width: 500px;
	padding: 20px;
	margin: auto;
	background: #eeebe3;
	border: 5px solid #5a523d;
	text-align: left;
	}

Let me know in the comments if you need explaining for this part…

Now onto the type bit:

h1 {
	font: 32px "Delicious-Bold", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	text-align: center;
	color: #3d3111;
	margin-bottom: 20px;
	}

p {
	font: 16px/1.3 "Delicious-Bold", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	}

And this is where the fun begins: we are going to use the @font-face attribute to call the Delicious typeface. Remember that this typeface is available for @font-face embedding (you can see a list of available fonts in the Useful links section of this post), but not all are.

We’ll add this bit to the beginning of our stylesheet, before the body style details, so that all the @font-face info is easily seen. We then only have to call the font we want to use by the font-family value we give it here (see code above):

@font-face{
	font-family: 'Delicious';
	src: url('Delicious-Roman.otf') format('opentype');
	}

@font-face{
	font-family: 'Delicious-Bold';
	src: url('Delicious-Bold.otf') format('opentype');
	}

@font-face{
	font-family: 'Delicious-Heavy';
	src: url('Delicious-Heavy.otf') format('opentype');
	}

And now, our definition list:

dl {
	margin-bottom: 20px;
	}

	dt {
		font: 22px "Delicious-Heavy", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
		text-shadow: rgba(255,255,255,.8) 2px 2px 0;
		text-align: center;
		color: #822020;
		margin-bottom: 5px;
		}

OK, lots to talk about here!

First we add a bottom margin to the dl, so that there is some space between it and the paragraph that comes next.

Then we define the font size and font family for our dt (and dd, see bellow, after the image).

We also add a nice little shadow to both of them. For that, we are using RGBa colours, which allow us to add, besides the r,g and b values, a transparency value between 1 (fully opaque) and 0 (fully transparent). The values that come after the rgba are the horizontal and vertical offset of the shadow, and then the amount of blur (in this case, zero).

Next, we add some white space around our terms, and give it a reddish colour.

Finally, we are going to add a decorative border to each of our descriptions, but we’re not using a background because each description has a different length: we need something more flexible, and we need to show off our CSS3 skills too. So we are going to use the border-image property.

The border-image property allows us to use an image and specify how much of its borders we want to apply to the borders of our element.

We need to specify the width of the border of the element, in this case it will be 20px. After that, we will specify the image we’re using for our border, which in our case is this one:

(Do you see a nasty light blue background around this image? You’re using IE6!)

We will also need to say how much of the image we are using for our borders: 20; and how it should behave: will it stretch to the size of the element, or will it be repeated? In our case, we want it to stretch. And this is what we get:

dd {
	font: 16px "Delicious", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	text-shadow: rgba(255,255,255,.5) 1px 1px 0;
	padding: 10px;
	border-width: 20px;
	-moz-border-image: url(bubble.png) 20 stretch;
	-webkit-border-image: url(bubble.png) 20 stretch;
	-khtml-border-image: url(bubble.png) 20 stretch;
	border-image: url(bubble.png) 20 stretch;
	margin-bottom: 30px;
	}

We are using the vendor specific properties so that the border-image is understood by all of them. Someday, we will only need the last line of this bit of code, instead of 4 lines.

Browser support

I’ve said that this is not going to work on IE6. What I didn’t say, was that it doesn’t work on IE8 or 7 either. Oh, and Opera will ignore the border-image property (at least on my copy of Opera 9.64, but correct me if I’m wrong).

For Internet Explorer to understand the @font-face attribute, you will need to use the EOT font format, so you will have to duplicate the 3 @font-face attributes and use the .eot files for that.

Conclusion

Hopefully this made it a bit easier to understand how definition lists can be really useful, and how CSS 3 makes styling rich designs so much easier.

You can download the example files bellow, and you can grab the Delicious font from here.

View example Download source files

Was this post too short? Did you need more details to understand what just happened? Let me know in the comments.

Useful links

• Fonts available for @font-face embedding
• Lists in HTML documents
• Take Your Design To The Next Level With CSS3

Coding a poem

There isn’t a consensus on how a poem should be marked up using HTML: most people believe that each stanza should be a paragraph (p) and each line separated by a line break (br). There have been some mentions to a future poem tag on HTML5, but it’s very unlikely to happen! :)

The markup

There are 3 main elements in our markup: 1) the title; 2) the sub-title, with the author information; and 3) the poem itself. This is the very simple markup we are going to use for this example:

<h1>Twinkle Twinkle Little Star</h1>

<h2>by Jane Taylor, 1806</h2>

<p>Twinkle, twinkle, little star,<br />
How I wonder what you are!<br />
Up above the world so high,<br />
Like a diamond in the sky!</p>

<p>When the blazing sun is gone,<br />
When he nothing shines upon,<br />
Then you show your little light,<br />
Twinkle, twinkle, all the night.</p>

<p>Then the traveller in the dark,<br />
Thanks you for your tiny spark,<br />
He could not see which way to go,<br />
If you did not twinkle so.</p>

<p>In the dark blue sky you keep,<br />
And often through my curtains peep,<br />
For you never shut your eye,<br />
Till the sun is in the sky.</p>

<p>As your bright and tiny spark,<br />
Lights the traveller in the dark,&mdash;<br />
Though I know not what you are,<br />
Twinkle, twinkle, little star.</p>

Styling the headings

Before starting to style the elements on the page, lets just add some basic resets and defaults:

body {
	background: #FFF;
	color: #111;
	font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif;
	text-align: center;
	}

	div, h1, h2, p {
		margin: 0;
		padding: 0;
		}

We will also wrap our poem inside a div, to center the content nicely on the page:

#poem {
	margin: auto;
	padding: 20px 0;
	text-align: left;
	width: 390px;
	}

Next, we will center our headings and override the default bolds that headings have:

h1, h2 {
	font-weight: normal;
	text-align: center;
	}

Now, we will set the font size of the main heading, the h1 tag; add a nice margin to the bottom; and a small line-height (because the font is so large, this way if our heading is very long, the lines won’t be too far apart from each other):

h1 {
	font-size: 34px;
	line-height: 1.2;
	margin-bottom: 10px;
	}

For the h2 heading, with the author and date details, we will use a different, lighter colour; set a smaller font-size; make it italic, for that extra special touch; and also add a bottom margin:

h2 {
	color: #666;
	font-size: 18px;
	font-style: italic;
	margin-bottom: 30px;
	}

The poem

For the body of the poem itself, we will add a larger line-height, so that each line has some white space around it and is easier to read. We will also add a bottom margin to each paragraph, to visually separate each stanza:

p {
	line-height: 1.5;
	margin-bottom: 15px;
	}

The magical selectors

And now we can start having fun! First, lets add a decorative element before and after the author details. This will be done using the :before and :after pseudo-elements in conjunction with the content CSS property:

h2:before {
	content: '— ';
	}

h2:after {
	content: ' —';
	}

Now, let’s make the first letter of the poem really big — a drop cap. For that, we will be using the adjacent sibling selector (+) and the :first-letter pseudo-element. The adjacent sibling selector lets us target selectors that directly follow each other and are within the same parent element (for example, inside the same div). We will target the first letter of all paragraphs that follow an h2 tag, which, in our example, is only the first paragraph of the poem:

#poem h2 + p:first-letter {
	float: left;
	font-size: 38px;
	line-height: 1;
	margin: 2px 5px 0 0;
	}

So we floated the first letter to the left, so that the rest of the text wraps around it; used a bigger font size; reduced the line-height, so that the following lines aren’t pushed down; and slightly repositioned the letter within the paragraph with some margin settings.

Next, we’ll make the first line of each paragraph display the letters in small-caps, and, to make it easier to read, add some extra space between each letter:

#poem p:first-line {
	font-variant: small-caps;
	letter-spacing: 1px;
	}

To wrap things up, we’ll just add an extra bottom margin to our last paragraph, so that the poem is well separated from whatever comes next. For that, we will use the :last-child pseudo-element, which lets us target an element that is the last element of its parent:

#poem p:last-child {
	margin-bottom: 30px;
	padding-bottom: 30px;
	}

And we’re done!

Some notes on browser support

Don’t expect this to work equally on every major browser. The latest versions of Safari, Firefox and Opera do support all the selectors. But… Internet Explorer 8 doesn’t support the :last-child pseudo-class; Internet Explorer 7 doesn’t support :last-child or the :before and :after pseudo-elements; and IE6 doesn’t support the :first-letter pseudo-element, on top of that.

Conclusion

This is a very basic tutorial on how CSS advanced selectors can be used in our stylesheets to address specific HTML elements without having to use extra classes, IDs or bloated markup. It will not work on older browsers, like Internet Explorer 6, which will render only the most basic CSS properties (with few exceptions), but that won’t make the text unreadable — it will simply add a new layer of detail to modern browsers, as if it was a little present for people who are up-to-date.

View example Download source files

Further reading

• Selectors Level 3 — W3C Working Draft 10 March 2009
• CSS Selectors
• CSS selectors and pseudo selectors browser compatibility
• Take Your Design To The Next Level With CSS3

The markup

Before adding style to our text, we have to make sure we mark it up correctly.

For the main title of the page we should use the h1 tag (this has been a long running discussion within web developers, some prefer to use this tag for the page’s logo while others for the title of the page).

The subheadings should be tagged as h2, h3, etc., until h6, according to its importance and hierarchy within the content.

Paragraphs of text should be marked up as p; lists as either ol or ul, depending on whether the information is ordered or unordered; and long quotations should be marked up nicely as blockquote (with a block level element inside it, like a p, div, ul or ol).

You can see the source code on the example page for more detail.

General styles

First we’ll start by defining some general styles for the page and the elements. I’m not going to apply a complete CSS reset, because it would be overdoing it for this simple example:

body {
	margin:0;
	padding:0;
	font:62.5% "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#000;
	text-align:center;
	}

div,
h1, h2, h3, h4, h5, h6,
p,
ul, ol, li,
blockquote {
	margin:0;
	padding:0;
	}

So, we:

1. Reset the margins and paddings of the body and the other elements to zero
2. Set the overall size of the font to 62.5%—this is a little trick that will make our lives easier. When we set the font size of the page to 62.5%, we can convert the em measures we use to pixels just by multiplying them by 10 (for example, 1.2em equals 12px)
3. Set the colour of the text to black
4. Centre align the text of the page: this is only needed for some older browsers to position our container div to the centre

Now we’ll quickly style the container div:

div.text {
	width:50em;
	padding:2em 0;
	margin:auto;
	text-align:left;
	}

We made it long enough so that the lines of text are comfortable to read, but not too wide; added some padding to the top and bottom; aligned the container to the centre of the page (margin:auto) and made the text inside the container left aligned (remember we had previously set the text of the body element to be aligned to the centre).

Headings

On the web, it’s a generally accepted rule (but not set in stone) that it’s easier to read text when the headings are set in a serif font while the rest of the text is set in a non-serif font.

We’ll follow that rule here and set the headings to Georgia (a common font to most operating systems). We’ll also have a smaller line-height for the headings than for the rest of the text:

h1, h2, h3, h4, h5, h6 {
	font-family:Georgia, "Times New Roman", Times, serif;
	line-height:1.2;
	}

Now let’s define the font size of each of the headings we are using on the page (it’s good practice to style all the possible headings, even if you don’t use them on your page, it may come in hand later, but let’s keep this tutorial short):

h1 {
	font-size:3.4em;
	margin-bottom:.8em;
	}

h2 {
	font-size:2.4em;
	padding-bottom:.2em;
	border-bottom:1px solid #333;
	margin-top:1em;
	margin-bottom:.7em;
	}

h3 {
	font-size:1.8em;
	margin-bottom:.7em;
	}

We also added some margin to the bottom of the headings, so that there is some white space between them and the text that follows.

To add some eye-candy and pace to our page, I added a thin border (and padding) to the bottom of the h2 headings.

Paragraphs

p {
	font-size:1.3em;
	line-height:1.5;
	margin-bottom:1.3em;
	}

The paragraphs need a smaller font size than the headings, and also need some white space around them, hence the bottom margin and a bigger line height: this makes the text easier to read. Make sure you don’t use a line-height so big that keeps the text from being a concise block and the lines too spread apart.

Lists

Like for the headings and paragraphs, the lists (whether ordered or unordered) should also have proper white space around them. So we’ll make sure there is always a bottom margin and a small left indentation (left margin), and we’ll also make the font the same size of the paragraphs:

ul, ol {
	font-size:1.3em;
	margin:0 0 1.3em 2em;
	}

	li {
		margin-bottom:.4em;
		}

For each li, I’m also adding a small margin-bottom, so that there is a nice space between each of them and they’re not all cramped on top of each other.
For this example, I’m keeping the default list styles (decimal, for ordered; and disc, for unordered): they look fine in most of the cases.

Quotes

A common element used in texts is the blockquote. This is the right element to be used when making a long quotation.

Since we’re using someone else’s words, it’s a nice touch to use an italic font in this case. Because Helvetica’s italic isn’t as nice, we’ll use Georgia for blockquotes. We’ll also add some margin and padding, and apply a nice light grey border to the left of the quotes, so that they are easy to spot while browsing the page.

blockquote {
	padding-left:1em;
	border-left:3px solid #999;
	margin:2.5em 2em;
	}

	blockquote p {
		font:italic 1.2em/1.6 Georgia, "Times New Roman", Times, serif;
		}

You can find more information on how to style the blockquote element in the Resources & Further Reading links.

Conclusion

It’s easy to style your HTML text with CSS and to make it a bit more pleasant to read. You just have to make sure to follow some simple rules:

• Use the correct markup: headings, paragraphs, lists, etc.
• Use margins and padding to add enough white space around each element
• Don’t forget to add appropriate line heights, for ease of read

There’s a lot more you can do with your text with CSS: the possibilities are endless. I hope that after reading this quick tutorial you have a better idea of how to do it. The References and Further Reading links are a great place to start if you want to improve your type with CSS!

You can download the example files here:

View example Download source files

References

• The global structure of an HTML document—Headings
• Lists in HTML documents
• HTML blockquote tag

Further reading & Tools

• Striking Web Sites with Font Stacks that Inspire
• 10 Examples of Beautiful CSS Typography and how they did it…
• Typechart
• Georgia On My Mind
• 25+ Sites that Use Typography As The Only Design Element
• A Killer Collection of Global CSS Reset Styles
• using CSS and blockquote

CSS Filters

There is a list of CSS filters you can use in your stylesheets, but be aware that most of them will make your files invalid, which is why it’s better to use them only within separate IE only stylesheets.

In my case, I use two different filters: one to target IE6 and another for IE7. When I want a rule to affect both, I use no filter, since the HTML conditional comment (see bellow) will target all IE versions from 7 and bellow.

IE6 and bellow

Add * html before the CSS rule you want to work on IE6 only (like, for example PNG filters).

* html { property:value; }

IE7

Both IE6 and IE7 can understand a property with an * before it, but IE6 will not interpret it if it’s preceded with html>body. For example:

html>body { *property:value; }

Conditional Comments

You should use these conditional comments within your HTML files to make sure that only one or more specific versions of IE can read a particular stylesheet. For example:

<!--[if IE]>
Internet Explorer
<![endif]-->

<!--[if IE 5]>
Internet Explorer 5
<![endif]-->

<!--[if IE 5.0]>
Internet Explorer 5.0
<![endif]-->

<!--[if IE 5.5]>
Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
Internet Explorer 6

<![endif]-->

<!--[if IE 7]>
Internet Explorer 7
<![endif]-->

<!--[if gte IE 5]>
Internet Explorer 5 or greater
<![endif]-->

<!--[if lt IE 6]>
Internet Explorer versions less than 6
<![endif]-->

<!--[if lte IE 5.5]>
Internet Explorer version 5.5 or less
<![endif]-->

<!--[if gt IE 6]>
Internet Explorer greater than version 6
<![endif]-->

gt stands for greater than, while lt stands for less than. gte stands for greater than or equal, while lte stands for less than or equal to.

How I do it

As I mentioned previously, I tend to only use IE6 and 7 specific stylesheets on my websites. This means that If I were implementing a singular IE stylesheet with IE CSS filters, it would have to use a conditional comment that would allow me to target both these browsers.

Therefore, the most appropriate HTML comment for this kind of sheet would be <!--[if lte IE 7]>. This is acceptable because it targets all versions of IE equal to or below IE7, which is suitable for the most part as I’m not really worried of how the site will look like on any version below IE 6.

So, the final HTML code would look something like this:

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->

Conclusion

Although, truthfully most web designers would like to ignore older versions of Internet Explorer, clients don’t like that idea, and most of the time it’s for a very good reason: there’s still a big percentage of users browsing the web with Internet Explorer, and IE6 in particular: to name but one.

So, as we have discussed, we can make everybody happy, and to have some peace of mind by creating a separate stylesheet and add a couple of properties that will make things a bit prettier for IE users.

If in the future, you don’t need these CSS files anymore (and let’s all hope for it!), you’ll simply have to remove the conditional comments and you’re all set: There’s no need to go through your main stylesheets, that you’ve created for proper browsers and as an extra plus everything will look a bunch cleaner to boot!

Resources

• CSS Conditional comments
• CSS Conditional Hacks

Further reading

• Will the browser apply the rule(s)?
• Internet Explorer 7 CSS filter
• Opera 9.5 CSS filter
• Targeting IE7 using CSS

Semantic markup

Here’s an example of a table that you’ve probably seen many times before. As always, we begin by wrapping up our content in some semantically correct markup. This way the table will make more sense to screen readers, as well as being easier for us to add some of the CSS pixie dust, without having to add unnecessary markup to it.

<table summary="Travel times to work by main mode (Autumn 2006)
    - Source: London Travel Report 2007
    http://www.tfl.gov.uk/assets/downloads/corporate/London-Travel-Report-2007-final.pdf">

	<caption>Travel patterns in London - Travel times to work by main mode (Autumn 2006) - Minutes</caption>

    <thead>
    	<tr>
            <th scope="col" rowspan="2">Main mode</th>

            <th scope="col" colspan="6">Area of workplace</th>
        </tr>

        <tr>
            <<th scope="col">Central London</th>

            th scope="col">Rest of Inner London</th>
            <th scope="col">Outer London</th>
            <th scope="col">All London</th>
            <th scope="col">Rest of Great Britain</th>

            <th scope="col">Great Britain</th>
        </tr>
    </thead>

    <tfoot>
    	<tr>

            <th scope="row">All modes</th>
            <td>55</td>
            <td>39</td>
            <td>27</td>

            <td>39</td>
            <td>20</td>
            <td>23</td>
        </tr>

    </tfoot>

    <tbody>
    	<tr>
    	    <th scope="row">Car and van</th>
            <td>48</td>

            <td>32</td>
            <td>25</td>
            <td>29</td>
            <td>20</td>

            <td>20</td>
        </tr>

        <tr>
            <th scope="row">Motorbike, moped, scooter</th>

            <td>36</td>
            <td>29</td>
            <td>27</td>
            <td>31</td>

            <td>19</td>
            <td>21</td>
        </tr>

        <tr>

            <th scope="row">Bicycle</th>
            <td>33</td>
            <td>24</td>
            <td>20</td>

            <td>25</td>
            <td>15</td>
            <td>17</td>
        </tr>

        <tr>
            <th scope="row">Bus and coach</th>
            <td>47</td>
            <td>39</td>

            <td>36</td>
            <td>40</td>
            <td>33</td>
            <td>34</td>

        </tr>

        <tr>
            <th scope="row">National Rail</th>
            <td>69</td>

            <td>66</td>
            <td>43</td>
            <td>66</td>
            <td>47</td>

            <td>58</td>>
        </tr>

        <tr
            <th scope="row">Underground, tram, light rail</th>
            <td>49</td>

            <td>45</td>
            <td>37</td>
            <td>47</td>
            <td>42</td>

            <td>46</td>
        </tr>

        <tr>
            <th scope="row">Walk</th>

            <td>21</td>
            <td>16</td>
            <td>13</td>
            <td>15</td>

            <td>12</td>
            <td>13</td>
        </tr>

    </tbody>

</table>

Breaking the markup down

It’s worth noting at this point that it’s a good idea to include the summary attribute and the caption tag in your tables, so people using screen readers know immediately what the table is about. Remember that you can only add the caption immediately after the table start tag.

You should use the thead, tbody and tfoot tags, to wrap the different type of content in a more semantic way. This will also make the table header and table foot printed in all pages, in tables that spread across more than one page. Note that you can only use one thead and tfoot per table, but you may have one or more tbody tags.

For each cell of our table, we either have a th or a td, depending if it’s a header or a simple data cell. Each row in our table is closed within tr tags – table row.

A th tag is an element that refers to a table header. These commands tell content in table cells to appear in header form; just like any header in a document. This makes it ideal for titles and other headers at the top of columns, etc.

In the th elements, we defined whether that header affects the row or the column of data by using the scope attribute. Also, because 2 of the th span across more than one row or column, we use the colspan and rowspan attributes to indicate how many rows or columns that element will span across.

The other tag that’s available for us to use is the td or table data tag. This differs from the th tag because it tells the content to just appear as a regular body of text without any specific formatting, such as: bold, italic or underlined. This makes it ideal for regular data cells.

The CSS

Now let’s make this table look better with some CSS goodness.

First we’ll deal with resetting margins and paddings and overriding the default bold font of the headers:

table, caption, td, tr, th {
	margin:0;
	padding:0;
	font-weight:normal;
	}

Second, we’ll define the width of the table, and make sure our cells have no spaces around them. We’ll also style the caption element, by aligning it to the left and setting the font size and padding:

table {
	border-collapse:collapse;
	margin-bottom:15px;
	width:90%;
	}

	caption {
		text-align:left;
		font-size:15px;
		padding-bottom:10px;
		}

Next step: let’s add some breathing space around our cells and define a little white bottom and right border for each. We already saw that all our data is either within a th or a td tag, so we’ll point to those in our stylesheet:

	table td,
	table th {
		padding:5px;
		border:1px solid #fff;
		border-width:0 1px 1px 0;
		}

Now we can start adding some details that will make our table easier to read. For example, let’s give a different colour for the th cells depending if they’re within the thead or the tbody, and then we’ll darken the ones with a colspan or rowspan attributes. This will only work in some browsers (because we’ll be using the attribute selector), but it will still look OK in less compliant ones.

	thead th {
		background:#91c5d4;
		}

		thead th[colspan],
		thead th[rowspan] {
			background:#66a9bd;
			}

	tbody th,
	tfoot th {
		text-align:left;
		background:#91c5d4;
		}

This is a very simple approach to the attribute selectors. Breaking it down:

thead th[colspan] { background:#66a9bd; }

We’re basically saying that for every th within the thead that has the colspan attribute defined, that is the background we want it to have. It will work independent of the value that we give to the attribute, as long as the element has it. We could have used it for any type of attribute, just using the following selector template:

selector[attribute] { property: value; }

For further reading on this subject, you can take a look at the links at the end of this post.

Going back to our table, we still have to take care of our td elements:

	tbody td,
	tfoot td {
		text-align:center;
		background:#d5eaf0;
		}

Because the last row represents the average commute time for all the modes, we’ll style it a bit differently:

	tfoot th {
		background:#b0cc7f;
		}

	tfoot td {
		background:#d7e1c5;
		font-weight:bold;
		}

Remember that in this case, we only have one table in our file, so these CSS selectors are very generic, but you can have more specific selectors, for example, if you only want to style a particular table within your website, or if you have different styles for different tables. You could do that by adding an id or a class to your table and specifying it within the CSS. For example:

table#travel {
	border-collapse:collapse;
	margin-bottom:15px;
	width:90%;
	}

	table#travel caption {
		text-align:left;
		font-size:15px;
		padding-bottom:10px;
		}

	table#travel table td,
	table#travel table th {
		padding:5px;
		border:1px solid #fff;
		border-width:0 1px 1px 0;
		}

	table#travel thead th {
		background:#91c5d4;
		}

Some jquery to the equation

Sometimes tables can become very long and hard to read. It’s not really our case, but it would still be helpful if we could add a different colour for when we’re hovering each data row, so we don’t have to move our fingers across the screen to guide us to the right header.

We could easily do this by adding a CSS pseudo class (:hover) to our tr elements, but that wouldn’t work in some less modern browsers, would it? And with a few simple “cut & paste” lines of jQuery we’ll make sure it works in browsers like Internet Explorer 6 and 7.

First, let’s create a new CSS style for when the trs are hovered over:

	tbody tr.odd td {
		background:#bcd9e1;
		}

We’ll later make sure that the jQuery adds the class “odd” to the hovered trs.

Second we’ll have to download the latest version of jQuery from its website and then link to it on our html file. Add the following code inside the head tags (and make sure to change the file paths to suit your needs):

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/style-table.js"></script>

I’m not putting the javascript code directly into the html file – like I’m not adding the CSS either -, because separating the content from the rest will make for a cleaner and lighter file, and, let’s not forget, easier to update!

So we’ll create a javascrip file and name it style-table.js. In that file we’ll paste the following lines of code:

$(document).ready(function () {

	$('tbody tr').hover(function() {
	  $(this).addClass('odd');
	}, function() {
	  $(this).removeClass('odd');
	});

});

Ignore the rest and focus on this part: (’tbody tr’). This is telling the script to look for a tr within the tbody. You could do something like: (’.mytable tr’) if you wanted it applied to a specific table, for example.

Then, the scrip will add the class “odd”: .addClass(’odd’). Again, you could name the class something different, like “hovered”, which would make the code look like this instead: .addClass(’hovered’). Pretty simple, right? :)

Conclusion

Like I said in the beginning, HTML tables don’t have to be boring at all. Personally I enjoy styling them because I can really add little details that will make them look so much better and easier to read, and that will improve the overall usability and experience of my websites.

I hope this simple tutorial may have shed a light onto the often ignored and avoided table and that you may have as much fun as I do working with them!

View example Download source files

Further reading

• Tables in HTML documents
• A CSS styled table version 2
• The Attribute Selector for Fun and (no ad) Profit
• Attribute selectors

The beginning: HTML markup

Let’s begin by creating a simple feedback form. Here’s an example of the markup for one:

<form action="form.php">

	<p>Send us your comments and feedback:</p>

	<ol>

        	<li>

        		<label for="name">Name</label>
        		<input type="text" name="name" id="name" />
        	</li>

        	<li>
        		<label for="email">Email</label>

        		<input type="text" name="email" id="email" />
        	</li>

        	<li>
        		<label for="website">Website</label>
        		<input type="text" name="website" id="website" />

        	</li>

        	<li>
        		<label for="message">Message</label>
        		<textarea name="message" id="message"></textarea>
        	</li>

        	<li>
        		<button type="submit" id="send">Send</button>
        	</li>

    </ol>

</form>

Breaking down the markup

I used an ordered list to wrap the form elements so each list item is a pair for label + input/textarea. This will not only make it a bit easier to add the style to the form, but will also make the form look better and visually make more sense when no styles are applied to it.

Every element in the form has its own label (except those that have their value specified within the element itself, like buttons and submit inputs).

You might have previously seen forms on other websites that allow you to select the labels, resulting in the right input will becoming highlighted. This removes the necessity of having to point precisely to the input fields – isn’t it more user friendly?

The way to achieve this is by defining which label belongs to which input (or textareas, selects, etc.), and you do that with the for attribute (in the labels) in conjunction with the id attributes in the inputs.

When creating the form, I didn’t use the fieldset or legend tags because our form is simple and short, so there’s really no point to separating it into more than one fieldset, and the paragraph explains what the form is about without being repeated by the screen-readers with each and every label (like legends are).

It’s also worth noting that in this example I chose the button tag, instead of the input tag, for the submit button. This decision was made to give you more options in terms of what you can visually do with it.

Adding the style

Moving onto the CSS part of the form, we’ll start by resetting the default styles, adding some style to our form tag – font, background, margins and padding. We’ll also add a bottom margin to our paragraph.

body {
	margin:0;
	padding:0;
	}

p {
	margin:0 0 10px 0;
	padding:0;
	}

form {
	font:13px Georgia, "Times New Roman", Times, serif;
	background:#eee;
	margin:20px;
	padding:10px 20px;
	width:330px;
	}

Now, let’s style the ordered list and then make some tweaks for the one that holds the submit button (to which we gave a specific id of “send”).

	form ol {
		list-style:none;
		margin:0;
		padding:0;
		}

		form li {
			padding:6px;
			background:#e1e1e1;
			margin-bottom:1px;
			}

			form li#send {
				background:none;
				margin-top:6px;
				}

Our form is taking shape now, but we still need to style the labels, the inputs and the textarea. We should also add a different style for when our inputs are in focus.

		form label {
			float:left;
			width:70px;
			text-align:right;
			margin-right:7px;
			color:#0066CC;
			line-height:23px;	 /* This will make the labels vertically centered with the inputs */
			}

		form input,
		form textarea {
			padding:4px;
			font:13px Georgia, "Times New Roman", Times, serif;
			border:1px solid #999999;
			width:200px;
			}

			form input:focus,
			form textarea:focus {
				border:1px solid #666;
				background:#e3f1f1;
				}

Last, but certainly not least, let’s add some eye candy to the Send button:

		form li#send button {
			background:#003366 url(images/css-form-send.gif) no-repeat 8px 50%;
			border:none;
			padding:4px 8px 4px 28px;
			border-radius:15%; /* Don't expect this to work on IE6 or 7 */
			-moz-border-radius:15%;
			-webkit-border-radius:15%;
			color:#fff;
			margin-left:77px; /* Total width of the labels + their right margin */
			cursor:pointer;
			}

			form li#send button:hover {
				background-color:#006633;
				}

So what have we added in this last step? We changed the default border (border), background colour (background) and text colour (color) of the button to our own needs. We also added some padding to give the text some space to breath and extra left padding to add a little icon on the background.

The properties border-radius, -moz-border-radius and -webkit-border-radius are CSS3 properties that add rounded corners to our element. Because the border-radius property is still not widely implemented among browsers, we also have to use the browser specific properties that will make it work on Firefox (-moz-border-radius) and Safari (-webkit-border-radius). As you may have guessed, none of the available versions of Internet Explorer supports this feature, so it will be an added detail for more compliant browsers.

For the button to be nicely aligned with the other inputs, we have to add the 77 pixels of left margin (which is the sum of the 70 pixels of the labels + 7 pixels for their right margin).

The cursor:pointer bit is not really necessary, but we’ll then make sure that when a user hovers over the button, the cursor will change to the hand. For browsers other than IE6, it will also change its colour to green (thanks to the form li#send button:hover property).

Conclusion

When it comes down to creating forms, there are actually a lot more things that you can do than meets the eye, just by using some simple CSS. My point in this blog post has been to show that there’s no need to use a table to create visually attractive and usable forms. Especially when we can just as easily have a semantically correct and beautiful form with just a few lines of CSS and some extra hooks in your markup.

View example Download source files

P.S.: Don’t forget to give proper credit to famfamfam (if you use it), for the beautiful Send button icon, that is part of the Silk icons set.

Ciao!

Further reading:

• W3C – Forms in HTML documents
• CSS-Based Forms: Modern Solutions
• Web Form Design: Modern Solutions and Creative Ideas
• Beautiful CSS Form