June 23, 20102 comments

Ten CSS tips designers should know or learn

1. Alternative stylesheets

A page can be given one default stylesheet and any number of alternate style sheets for the user to choose from.
The way you can switch between them depends on the browser; most browser have this option under View -> Page Style or something similar. Some browsers unfortunatly don’t offer a menu for changing the page style yet.
To include extra stylesheets, you just have to add more <link> elements in the header, with the right rel and title attributes.

<!-- this is the default stylesheet, notice the rel attribute -->

<link rel="stylesheet" title="default" href="default.css">

<!-- extra stylesheets now follow -->
<link rel="alternate stylesheet" title="my green stylesheet" href="green.css">
<link rel="alternate stylesheet" title="my orange stylesheet" href="orange.css">

When you are about to choose from the stylesheet menu of your browser, you’ll see the names of the stylesheets linked from your page (i.e. default, my green style, my orange style).

Stylesheets with the same title will be grouped together.

2. Reset browser defaults

Browsers, we all know, are mean and always try to trick us. Well, this might not be the case, but I would reset to defaults to remove browsers inconsistencies anyway.
Yahoo did a great job and lets you download their YUI Reset CSS you can include in your works to back off to defaults.

The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions. — by YUI Reset CSS page

3. Centering things

It’s always a pain when we have to center elements, isn’t it?
The easiest way to center text horizontally is by using the text-align property:

p, h1, div {
	text-align: center;
}

But whenever we are to center block elements or images (or even blocks of text, too), and need the left and right margin to be equal, we’d use something like

.center img {
	display: block;
	margin: 0 auto; /* margin-left and margin-right auto */
}

/* or, for blocks of text */
.center p {
	width: 50px;
	margin: 0 auto;
}

If we had to center things vertically, the whole process would be trickier, since margins don’t work anymore. The solution here is thinking at the container element as a table and thus using the property vertical-align to center the container content vertically.

.container {
	display: table-cell;
	vertical-align: middle;
	min-height: 100px;
}

4. Text shadows

This should have a dark gray shadow right down

This should have multiple shadows

CSS provides the text-shadow property to add shadows, working fine in Safari and Firefox 3 only (as far as I know).
The syntax is pretty strightfoward, being

h1 {
	/* adds a dark gray shadow right (1px) down (2px) */
	text-shadow: 1px 2px #333;
}

You can also have multiple shadows at the same time, which looks rather strange

h1 {
	text-shadow: -1px -1px #fff, 1px 2px #333;
}

As a sidenote, here is a way to make shadows visible with other browsers as well.

5. Rounded corners without images

As of CSS2 there is no CSS properties to achieve this rounded corners effet, but some browser-specific ones are available.
CSS3 is said to come with some (not yet finalized) properties to perform such tasks

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius

in the meantime, Mozilla browsers settled for the invalid CSS set of properties

-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
-moz-border-radius

while webkit powered applications can rely on

-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-wekbit-border-top-left-radius
-webkit-border-radius

All of the above work fairly well int he browser of choice, while a standerd squared border is shown by the others.

For those who prefer to mess with javascript and dispay rounded borders in IE as well, the web is plenty of JS scripts that accomplish the desired result.

6. Styling RSS feeds

It’s actually pretty easy to add a stylesheet to your standard RSS feed, though a lot more can be accomplished using XSL stylesheets.

Firstly, add a xml-stylesheet tag to your feed.

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="style.css" ?>
...

You then go for the style.css

rss {
	display: block;
	font-family: arial;
	padding: 10px;
	font-size: 14px;
}

title {
	display: block;
	margin: 3px;
	padding: 2px;
	color: #333;
	border: 0;
	font-size: 18px;
	margin-top: 25px;
}

link {
	display: block;
	padding 2px 20px;
	color: red;
}

and you and up with your (almost) styled RSS feed!

7. Clearing without additional markup

No need to add that extra HTML line saying clear:both; you can do it in a very clean and easy way from the CSS itself.

The :after property lets you add extra content after an element exactly as if it was in the original markup. Just a simple character can be added to attach the clear functionality to it.

.to-be-cleared {
	float: left;
}

.to-be-cleared:after {
	content: "ill clear this up";
	display: block;
	height: 0;
	clear: left;
	visibility: hidden;
}

8. Hiding text

That’s alright you use a very cool image to style a button or whatever else. Just, try to avoid to leave the “value” property empty! A good SEO will kick you in the ass for this!

A nice trick you can use is the text-indent property, and set it to a huge negative number. This would leave written the name of your website for search engines to read and, at the same time, hide it replacing the ugly-looking string with a much better looking logo.

h1 {
	text-indent: -9999px;
	background: #fff url('logo.png') top left no-repeat;
}

9. Opacity

Yeah, this is another of those things every browser should display correctly, but no one does: every browser treats opacity in a different way, driving the designer mad while wondering how to make a cross-browser transparency effect.

It’s actually pretty simple (if you don’t care of CSS validation issues).

.i-am-transparent {
	opacity: 0.7; /* Firefox and Opera */
	-moz-opacity: 0.7; /* Old Mozilla (Netscape) */
	-webkit-opacity: 0.7; /* Webkit engines */
	-khtml-opacity: 0.7; /* KHTML engines */
	filter: alpha(opacity=7); /* Internet Explorer */
}

10. link-visited-hover-active (LVHA) rule

Masters of the dark arts of specificity know why this rule exists and how it does or doesn’t apply, but if you’re still a padawan in these matters (or just rusty), you can get a quick refresher from this old chestnut of mine. — by Eric Meyer

And yes, this really matters; and yes, you should really follow this order, since if you flip things around, the latest rule overrides the above one and so on, leaving you with links having no effect.

Here is how it should be, just in case you didn’t get it yourself from the title of this section.

a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { color: red; }
a:active  { color: yellow; }

See also

• How people look at elements on a web page