Skip to main content
CSS is fun and cool and I like it.

HTML Declarations Screwing Up CSS

Has your CSS ever been acting funny on you, but it looks as if you've done everything perfectly? It just might be your HTML declarations that are screwing you up. Sometimes when you are just throwing together a little sample, you just use the <html> tag to start your page and everything works just fine. As things get more complicated, and you forget to use a "real" declaration, you may notice things not behaving as you intended. For example, using … Read article


Clean Up Your CSS

Cascading Style Sheets, at its root, is intended to separate the style of a webpage from the content. That makes sense for control reasons, but also for general code beautification. Just a little browsing through the CSS Zen Garden or some of the great articles on CSS design from Smashing Magazine and you can see the beautiful things CSS can do.

If the results of CSS are so beautiful, should the CSS itself be beautiful? Keeping your code pretty is … Read article


A Bulletproof Sticky Footer, Woohoo!

Footers on web pages are a great place to chuck copyright information, contact links, and quick navigational stuff. Visitors are trained to look to the bottom of pages to find these types of things, so why not help them out? One problem is that on pages that are a bit vertically challenged, the footer might end up in the middle of the page instead of down at the bottom of the browser window where it should be.

We have a … Read article


Creating Clickable DIVs

DIV's are a must in all CSS-based web design. They give you all kinds of fantastic positioning ability and give structure to your HTML. You can put links inside of a DIV, of course, but sometimes you just want the whole DIV to be clickable as a link. No problem, here is how it's done:

<div onclick="location.href='YOUR-URL-HERE';" style="cursor: pointer;"></div>

The cursor style parameter changes the cursor into the default pointer cursor when a vistor mouses over the DIV, which is … Read article


CSS Menu With Rollover Images

We just posted on the nastiness of javascript-based rollovers. We showed you the basics of how to do it with CSS instead, but now it's time to put our money where our mouths are and provide a real example.

This menu example uses three possible states:
- Normal
- Rollover
- Selected

The code is really clean and simple and should be easy to understand. Feel free to download the example and do whatever your little hearts desire with it. … Read article


Reset all Margins & Padding

* {
margin: 0;
padding: 0;

This has become a very popular technique lately, and for good reason. It removes all default margin and padding for every object on the page, no holds barred, regardless of browser. This provides a nice clean slate for design and ensures that all spacing is intentional, explict, and ubiquitous across browsers. There is no reason not to do this.

Some people like to include border: 0; as a part of it, but it … Read article

Contact CSS-Tricks

Fill out my online form.

var prefill = 'field14=' + document.referrer; var x7x2q5;(function(d, t) { var s = d.createElement(t), options = { 'userName':'chriscoyier', 'formHash':'x7x2q5', 'autoResize':true, 'height':'637', 'async':true, 'header':'hide', 'ssl':true, 'defaultValues': prefill}; s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + ''; s.onload = s.onreadystatechange = function() { var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return; try { x7x2q5 = new WufooForm();x7x2q5.initialize(options);x7x2q5.display(); } catch (e) {}} var scr = d.getElementsByTagName(t)[0], par = … Read article


3 Styles for BIG Headers

Here are some simple styles you can use when you need a BIG header.

h1.test1 {
font-family: Georgia, sans-serif;
font-size: 5em;
letter-spacing: -2px;
h1.test2 {
font-family: "Trebuchet MS", sans-serif;
font-size: 5em;
letter-spacing: -2px;
border-bottom: 2px solid black;
text-transform: uppercase;
h1.test3 {
font-family: "Arial Black", sans-serif;
font-size: 4.5em;
letter-spacing: -1px;
background-color: black;
color: white;

Read article


Header Text Image Replacement

So you know that search engines like Google, Yahoo, and MSN are primarily looking at the text content of your pages to index them and determine their relevancy to searches. You also know that using header tags like <h1> in your HTML is important because search engines value organized, sectioned content. But what if you just don't want big old ugly text section headers on your site? Wouldn't you rather use your own custom graphic? Sure you would, but you … Read article