Treehouse: Grow your CSS skills. Land your dream job.

Article Archives


Links of Interest

Challenge: CSS Globe vs. CSS-Tricks

Someone started an XHTML Challenge between CSS-Tricks and CSS Globe. At the time it was started I was working on that new subscribe section and there was a screwed up tag causing the site not to validate (as you can see by my cries in the comments). I see they have updated the stats now though and it shows me validating. It's all in good fun, so head on over and vote. I also …


Quick Reminder About File Paths

Whenever I have a problem with an image "not showing up" on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning that it doesn't start with http://), I pay extra close attention to the relationship of where the file is that is referencing the image, and where that image actually is.

  • Is the image in the same directory as the file

Trying OpenID… and My Other WordPress Plugins

I get the question from time to time what plugins I use on this blog. Since I just got through installing a brand new one (Open ID), I thought this might be a good time to run through the list.


RSS / Feed Related

FeedBurner Feed Smith
I "burn" my feed through FeedBurner for the purpose of gathering statistics. These statistics wouldn't be very useful if only a portion of the subscribers used the FeedBurner feed. This plugin "forces" …


Poll Results: What CSS Reset Do You Use?

As of late yesterday here are the results:

I wasn't surprised to see the Meyer's reset in the lead. It is very popular, thoughtful, and effective. I was surprised to "What's a CSS Reset?" at a narrow second place. In a nutshell, a CSS reset removes default styling from page elements so that you are "starting fresh" with the attributes you choose to apply. This is important for two reasons. One, puts all browsers on a level playing field. Different …


The Different Techniques for Applying the PNG Hack

Alpha-transparent PNG's, ("PNG-24" for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be underneath it, even if that background changes. This may seem like a trivial thing, but it's really not. The possibilities that alpha transparency opens up for you as a designer are many. The problem, as you are likely well aware, …


Links of Interest

Photoshop Cryptoquote Challenge

This has nothing to do with CSS, but I thought it might be a fun little for any Photoshop gurus out there. Someone spraypainted a message on the side of one of my neighbor's houses. Before I could read what it said, the message was painted over. But you can still sorta read it, so I thought I'd snap a picture and see if I could Photoshop it and make out the message. I think I might …


CSS-Tricks Finally Gets A Print Stylesheet

This is way past due...but it's finally here: a print stylesheet!

I'll start by showing you the entire stylesheet, then I'll explain a little bit about what I was thinking.

body { font-family: Georgia, serif; background: none; color: black; } #page { width: 100%; margin: 0; padding: 0; background: none; } #header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer { display: none; } .entry a:after { content: " [" attr(href) "] "; } #printed-article { border: 1px solid #666; padding: 10px; }

Equidistant Objects with CSS

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.

Here are the goals we are trying to achieve:

  • The left-most object is left aligned with it's parent element.
  • The right-most object

Color Rendering Difference: Firefox vs. Safari

CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:

I have a graphical question about my test site. The header and main page background are pulled from the same original graphic and in Firefox the header and body match up fairly well (I still need to do a little work to get the patterns to match up better) but in Safari the shade of brown …


Links of Interest

CSS Rand

I was kind of confused when I first went to CSS Rand, because it just looked like some random nice website (not a gallery) then I figured it out... It's a new kind of design gallery, where you just reload your page and it loads up a new page for you to look at. Kind of a neat idea. Lots of non-English sites too if you are into/not-into that. I'd like to see some kind of voting...…


CSS-Tricks Screencasts now on iTunes

It took a little while, but the CSS-Tricks Video Screencasts are now listed properly in the iTunes podcast directory.

Even cooler, you can just straight up search for "CSS" in the iTunes search area and it comes up as one of the ones right in the Podcasts section. Right next to "Let's Make Love and Listen to Death from Above". Perfect.

Here is the direct link:
CSS-Tricks Screencasts (iTunes Link)


Techniques for Fighting Image Theft

There are a few.

1. Redirect links from external sites to your "DON'T STEAL" graphic

There are numerous tutorials on how to do this around the web, but I most recently read about it on David Airey's article "How to deter thieves from stealing your images and server bandwidth". The technique is an addition to your .htaccess file in the root directory of your site:

RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yourwebsite\.com/ [NC] RewriteCond %{HTTP_REFERER} !^$ RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$

New Poll: What Kind of CSS Reset Do You Use?

Different browsers have different default settings for page elements. In an effort to keep web pages looking as consistent as possible between browsers, many web designers use what is commonly referred to as a CSS reset to wipe away these default settings and start fresh.

Margin and padding are the most common things to reset as they commonly cause layout problems if not reset. This also gives you the opportunity to "work forwards" with your margin/padding. This means applying margin/padding …


Links of Interest

C.S.I in XHTML and CSS coding.

Dor Dan has a nice article on keeping both your HTML and CSS clean with a consistent system of Comments, Spacing, and Indents. Now that's some beautiful code.


Detailed Look at Stacking in CSS

Tim Kadlec takes an in-depth look at the "stacking order" of the z-index parameter in CSS. Z-index is, unfortunately, one of those things that is not as simple as it should be. The one that …


Using Weather Data to Change Your Website’s Appearance through PHP and CSS

This article is co-authored by David Walsh of
The David Walsh Blog :: PHP, CSS, MooTools, and Everything Else

UPDATE: This post was updated on April 30th, 2008 to account for a minor change in how Yahoo! was serving up data UPDATED DOWNLOAD

Inspiration for this idea came from a comment by Andreas.

Using a little magic and trickery (read: PHP and CSS), we can change the appearance of a website automatically based on the weather outside, in real


Poll Results: The Responsibility of Mobile Web Design

This is has been an interesting poll! It's almost a dead-heat. Through the course of it, it has actually gone back and forth for the lead a bit.

The winner by a nose: It is the MOBILE DEVICES job to make sure websites look and function well.

I have no doubt that the iPhone had some influence this. I am an iPhone user myself and it has changed my opinion on mobile browsing. Technology is sufficiently advanced now that if …


Designing the DZone Cross-Promotional Footer

DZone has recently rolled out a footer on their new "Zones" that I designed/coded for them. If you want to check it out live, you can see it at any of the zones like the CSS Zone. I thought I would share some of the thought process we went through and the code.


We looked at other cross-promotional footers.

A good first step is always to take a look around and see what other's have done before you. …


CSS-Tricks Sporting a Freshened Up Design

Did a little pre-spring-cleaning around here today

  • Lightened up the whole feel with the lighter textured background.
  • Added a link to the new videos section.
  • Make the subscribe section more obvious, and included the new video feed.

Really, it's not that different. It's just the background that makes it seem that way. My goal in the near future is to add a section (maybe in the sidebar) of links to my favorite examples.

Hopefully ya'll like it, but let me …


Links of Interest

Arial or Helvetica?

Once there was a typeface called Helvetica. It was extremely popular. Later came a software company called Microsoft. Can you tell the difference between the original and the rip-off in these ten examples?


Blind Text Generator

In my option way nicer than I HATE how you have to tell "how many paragraphs you need" before it gives you any text to copy. Seems like a cheap attempt to get two page views per visitor …


How To Set Up and Host A Publicly-Accessible File on Amazon S3 (Simple Storage Service)

One of the many good suggestions I got for hosting these video files was to use the Amazon S3 (Simple Storage Service). I had heard about this before, but didn't know much about it. Nothing like trial by fire to figure something out quickly...


Step 1: Sign up for Amazon Web Services

Simple enough. Go here to do this. There are other different web services Amazon offers. The one we are using here is the Simple Storage Service). You …


CSS-Tricks Video Screencasts Now Available

Alright I'm just gonna publish the link and see how it goes...
CSS-Tricks Video Screencasts

DISCLAIMER: These are my very first screencasts ever, so the quality is sort of rough, folks. I am going to keep at it though and I'm sure they will get better and more focused with time.

Also, I call them "podcasts" in the video, but it's not really a podcast yet since I haven't really figured out what I'm going to do about that. …


Prevent Menu “Stepdown”

If you are familiar with the concepts of "floats", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements "stepdown"?

This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list:

<ul id="menu"> <li><a href="#">My</a></li> <li><a href="#">Little</a></li> <li><a href="#">Menu</a></li> </ul>

You …


Advice on Videos Needed

That's just a little teaser graphic there for ya'll =)

Here is the scoop. I'm all set up to start doing some Video Screencasts for CSS-Tricks. I actually already sort of shot the first one. I am on a Mac, so I used iShowU to record the video at 1280x800 with the Apple Animation codec at as high of quality as I could. I also have a pretty decent condenser mic so the audio quality is pretty good. Actually, the …


Links of Interest

The Funkiest Ampersand's You Have Ever Seen

Spoon Graphics has an awesome roundup of funky ampersands. I mentioned in the comments a cool thing to "use the best ampersand available" is to wrap the ampersands in an unique class and then list your 10 favorite in your font-family declaration. Chances are, most visitors won't have your crazy fonts, but there is decent change that some of them will have at least one of them. And if not, they'll …


A Few Quick Weekend Notes

Hide an image in your text!

Reader Erik left a comment linking to an amazing example of what can be done with the CSS3 selection color technique I just posted about. You have to see it to believe it.

A New Poll!

If you haven't noticed, there is a new pole in the Sidebar. I am asking what you feel the web designers role is in mobile website design. The way I see it there are two schools of thought. …


Overriding The Default Text Selection Color With CSS

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those "forward-enhancement" techniques. It's a nice touch for those using modern browsers, but it just gets ignored in other browsers and it's not …


Resizeable Images (At Full Resolution!)

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you can make images grow and shrink along with the text?

The trick is to give your images a unique class and set their widths with an em value.



Links of Interest

Sub Pixel Problems in CSS

John Resig has an interesting writeup of how different browsers deal with sub-pixel problems. By sub pixel problems he is referring to the rounding of pixels when widths are defined with percentages and the parent with is a non evenly divisible number. Such as a parent with 50px with and four children each with a width of 25%. Opera rounds down, IE rounds up (dumb, dumb dumb), and Firefox splits it up.



Links Inside of Larger Clickable Areas

Imagine the common scenario of a large header containing a horizontal menu. You want the entire header area to be clickable as a "home" button, but obviously you need your menu items to be clickable as well.

Let's write the HTML for this in this super-standard way:

<ul id="header"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul>

Because the Unordered List has a unique ID and is by nature a block-level element, we can stretch …


2007 Thank You’s & Wrap Up

January is coming to a close already so I thought I'd better get this out! I want to do a little wrap up of 2007 and give my thanks where thanks is due.

Thanks to all you readers, subscribers, and commenters

I really appreciate everyone who has come to be a reader of CSS-Tricks. This has grown way bigger than I thought it would and it's all thanks to you. Most of the content of this site comes from community …


Better Email Links: Featuring CSS Attribute Selectors

What is an CSS Attribute Selector?

CSS provides a way to style elements based specifically on attributes of the link, rather than the type of element alone. For example, you already know that you can style a header element:

h1 { color: blue; }

But you can actually get much more specific and style only header elements that have a title attribute:

h1[title] { color: blue; }

You can take it even further, and only style header elements that have …


GridControl: The Bookmarklet

Reader Sansan generously worked up my little GridControl idea into a javascript snippet that was very simple to make into a bookmarklet.

Just drag the link button below up into your bookmark bar, and then click to activate on any webpage. Pretty sweet! Click once to turn on the grid, click again to turn it off.


GridControl: A Grid Overlay System for Design Development.

Designing by grid is as old as design itself.

Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital media through implants in our brain and see the internet through screens that appear right in our vision, grid-based design will be there. When the cavemen of old carved drawings onto cave walls, grids were there. OK, maybe not cave …


Results of the “What do you use to write your CSS?” Poll


That sums up my reaction to all the responses from this article. You guys really had something to say on this subject!

As of Wednesday evening, there have been 430 votes on the poll and a whopping 123 comments on the post itself. That's gotta be some kinda record around here. =)

And it's Dreamweaver by a nose.

With 135 votes, Dreamweaver has taken the poll as the most popular CSS editor edging out Text Editor with Highlighting with …


Links of Interest

Seasonal CSS

I enjoyed this idea by John Leschinski over on Blogging Tips on how to use a little PHP and CSS to make "seasonal CSS". You simply spit out the date right inside the class name of the body tag:

<BODY class="date<?php echo date("md"); ?>">

Then you can write CSS like:

.date1225 { background: url(images/christmastrees.png); }

Instead of having PHP spit out the date, you could use it to spit out a random number as well, which …


Roundup of Design Galleries

I have a Happy New Year's gift for all you CSS-Tricks readers! It's a big roundup of all those web design galleries that are so popular these days. I've been wanting do a round of these for a while, and then when I finally started looking into it I found that there are tons and tons of them. Where to begin?

Well I just started looking -- I looked at easily over 100 of them. Then I compiled a list …


What do you use to write your CSS?

I promise I won't go poll crazy, but since we had so much fun with the CSS Skill Level poll I thought I'd open up a new one. This one asks for your CSS editor of choice.

If I have omitted anything major, let me know quick and I'll add it to the poll before too many responses come in. Cast your vote in the sidebar. Sorry (again) for RSS readers, you'll have to make the jump to vote.…


How To Make Walking Links

While screwing around at the ol' Zen Garden, I ran into a pretty neat little effect for underlined links. We've talked about this before, but never incorporating animation.

A "walking link" is a link with a dotted underline created by a background image. Upon rollover or active state, the dots become animated and begin to walk. This is done with a simple image swap on hover or active state, with both background images being created from the same …


CSS Skill Level Survey RESULTS

....and the results are in!

As of this morning, 735 people responded to the CSS Skill Level survey. This was really interesting for me because until now I really had no idea what kind of skill level the readers of CSS-Tricks where at. I'm impressed!

I hope to keep this information in mind as I am coming up with tutorial ideas in the future. Although, as always, posts will be vary in topic and will likely span all the different …


Using The Best Ampersand Available

I really like one of the typographic tricks Mark Boulton makes in his "Better Typography" presentation. (Slideshow of the presentation here. Around slide #109) He suggests "using the best ampersand available". This just means that on some typefaces, the ampersand character can be a little lackluster and it can make a big improvement in style and readability to swap it out for another typeface. His (great) example is from SimpleBits:

Now that's a nice looking ampersand. You might even …


Misconceptions about PNG

1. PNG is great, but I can't use them because they don't work in Internet Explorer.

This is one is almost entirely false. PNGs of any flavor will display in Internet Explorer, even back to some pretty old versions. The problem here is the alpha transparency of PNG-24's doesn't work in IE 6. That's it. if you don't need alpha transparency, you can do anything with PNG in IE that you could in any other browser. If you DO need …


Web Typography Study: The Design Canopy

Web design studio The Design Canopy (update October 2012: Design Canopy link is dead) is a beautifully designed site that makes use of a variety of beautiful web typography techniques. Here are some screen shots from different areas of the site that I find particularly nice.

The technique I want to focus on a little is from the first image. I LOVE that small sub-head/big header look. The best way to work is to first think about what you are …


Links of Interest

Table Cloth

Alen Grakalic of CSS Globe has released Tablecloth, a really nice table framework.


The Glass Wall

I know I'm almost 6 years late on this one, but I just read "The Glass Wall" for the first time. "The Glass Wall" is a comprehensive walk through of the re-design process of BBC homepage. Some of it feels a little hokey-outdated and obvious, but much of it rings true. I can imagine 6 years ago this …


A Quick and Dirty Way To Randomize an Image

Here is a little trick for randomizing banners on your website. A bit quick and dirty. It needs to be on a PHP page to work.

First off we need to setup a folder on your server where the pictures will go. We need to name the pictures in order, for example, mypicture1.jpg, mypicture2.jpg and mypicture3.jpg and so on.

The next step is to edit your banner code on your website to reflect your …


Have you ever seen this?

Read Kevin writes in:

A css file will have something like...

background:url(../images/topheader.htm) top left no-repeat;

...where topheader.htm is just an empty file. In this same directory is a jpg named topheader.jpg. How does this work? Why is it done this way?

Yes, I have seen that before. I have no idea how it works or why it's done. I tried to reproduce this technique in my secret laboratory and was unable to get it to work.

I have seen image …


Super Simple Two Column Layout

Reader Blake writes in:

What I'm trying to do is a fairly standard 3 section layout. The header needs to be 75 pixels in height and 100% in width. Below that, I need a sidebar section 160px wide and a main content block that fills up the rest of the width. So far, fairly standard... nothing too complicated. Here's the part that I can't get to work correctly: I want the sidebar and main content blocks to fill up the …


ID Your Body For Greater CSS Control and Specificity

Let's say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense for them to be red on your contact page (for some reason). There are a couple ways you could go about this.

  • You could declare a separate stylesheet for your contact page. This isn't ideal, because it's redundant. If you make any other changes, you'll always have to make them

Rate Your CSS Skill Level: Final Version & Poll

There was lots of great feedback from the rough draft model of the CSS Skill Levels. I have tried to take everyones ideas into account and rework things. The biggest consensus was that there needs to be another level between either 3 & 4, or 4 & 5. My solutions was to expand to a 6 level system and make and effort to space out the levels a little more evenly.

So here is the finished CSS Skill Level

one comment

Links of Interest

Link Value Factors has a really interesting and comprehensive look at how the value of links are determined. Of course there is now way to really know, so each factor is valued by a "wisdom of the crowds" approach. The crowd in the case being a group of SEO experts.


47+ Excellent Ajax CSS Forms

Noupe has yet another really well done roundup highlighting some of the best resources for styling forms.


Garamond rocks.

Just a quick …