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

Article Archives


Campana Ceramics on Etsy

Perhaps slightly off-topic today, but I thought you guys might appreciate this. My lifelong friend and college roommate Jeff Campana has recently gotten his MFA in Ceramics and moved to Kentucky to teach it at the University of Louisville. I've always been a big fan of his work. Very usable, functional vessels that are at the same time very elegant. As Jeff puts it: "Luxurious Utilitarian Ceramics". He is selling work on (the extremely awesome) now:

CampanaCeramics on Etsy


New Poll: How do you keep track of design inspiration?

There is a new poll in the sidebar folks. If you are reading via RSS you'll have to make the jump over to see it. This time I'm asking about how you manage design inspiration you find around the web, if at all. I believe that it can make you a better designer if you have some kind of system for remembering inspiring bits of design you come across in your daily web travels. There are lots of ways to …


Links of Interest

Prototyping with XHTML

Anders Ramsay and Leah Buley write about how prototyping web projects can be just as (or more) efficient by going straight to XHTML instead of sketching. This might feel like "jumping the gun" to some people, but I love this approach. Remember that (markup != design) and the semantic language of markup actually reads like a sketch as it is.


Max Kerning

This is just bizarre. Biography:

Who I am is the opposite of an …


High DPI Monitors, Resolution Independance, The Web, and You

We all use 72 DPI as a defacto standard when creating web graphics (actually, "PPI" is the more appropriate acronym but rarely used). This used to be the actual resolution of monitors, but slowly over the years this has ceased to be the case. Take my iMac. The screen, straight across horizontally, is 22.5" and has 1920 pixels. That actually comes out to about 85 pixels per inch, not 72. When we design and test website all on the same …


404 Page on a Static Site

Here's a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file:

ErrorDocument 404 /404.php

The "/404.php" part is the path to whatever file you want to serve up as the error page.

In other words...

Remember that the .htaccess file works onApache servers only. I say "static" sites, because if you are using a CMS system …


Links of Interest

Let's talk about text

Dan Kaufman on online text readability.

First, the more distinguishable each character is from another, the easier it is to read. This is why typefaces with serifs (the little lines on the end of letter strokes - Times, for example, is a serif typeface) are not as popular online as sans-serif typefaces (those without serifs) such as Arial. In print, serifs work well but on a computer screen simplicity (sans-serifs) is more important than elegance…


Typeface.js – A sIFR Alternative

My last screencast was on how to use sIFR3, a long proven technique for using non web standard fonts on the web (like we'll be doing until @font-face has wider spread support). I like sIFR, it has been around a long time has really proven itself as a good technology, but it's not the only kid on the block.

David Chester wrote in to tell me about a new project he is working on called typeface.js. I played …


Question & Answer Wrap-Up: Quickies

Mackinley Drummond

What's the deal with the "cardboard cutout" CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what a CSS-based site had to look like. I have begun the early stages for a design refresh for this site. I'm pretty pumped about it. Don't get too excited though, it's gonna take me a while to complete it. I'm …


Should You Host Your Clients Websites?

This question was sent in by jamie y.

I have been asked before when talking to potential customers if I could host their site. Right now I have been referring them to a hosting company. But I was wondering how I might be able to host them myself and pocket that hundred bucks instead of giving it to the hosing company. Is there an easy way of doing this?

Absolutely yes, you should offer to host your clients sites


What Are The Benefits of Using a CSS Framework?

Vin Thomas sent in this question through Twitter:

What are the benefits of using a CSS framework? And would you suggest that over starting from scratch?

I was kind of dreading this one. I feel like the proper answer requires an in-depth analysis of many of the popular frameworks, and to be really thorough, actually do some projects using them so I can see how they "feel" in real usage. That makes me tired just thinking about it.

Instead …


How Much Should You Charge for a Website?

This question was sent in by Tom Nowell.

Tom said he was a university student and has been building websites for people lately. He says that he does it on his own time so it doesn't cost him anything, so he has no idea what to charge.

All of us have faced this problem before. It's a bit of an awkward situation. You are putting a price tag on yourself and it feels weird. Most of us are modest …


XHTML 1.1 or HTML 4.01?

NOTE: This article is super old. As I write this warning in mid-2013, there is only one DOCTYPE that should be used, the HTML5 <!DOCTYPE html>

Aaron Bazinet originally posted this question in the forums.

I'm going to go ahead and say right away I'm not an expert on this subject, but I do find it quite interesting. The first line of every page we design starts with a DOCTYPE, and I have a feeling that most of us don't …


How Would You Recommend a Novice Get Started Using CSS?

This question was sent in by Nikita James.

I get this one a lot and it's surprisingly difficult to answer. The problem is that the question doesn't include the persons background, which will in many ways determine the best course of action.

  • Are you literally just getting started in web design? As in, you have never designed a website before?
  • Have you designed web sites before, but never with CSS? As in, you are coming from a table-based mindset?

Do You Need To Be a Good Designer AND Coder?

This question was sent in by Greg Arndt.

Is being proficient in both design and coding fairly common in web design or is a person usually better in one rather than the other. I find my trouble is that I can code easily, but have an extremely difficult time designing a website. If it's common to be good in both and typically do both in a job, any suggestions on achieving knowledge in the other field? Not only would …


Is There Any Dedicated CSS Hacks For Safari or Opera?

This question was sent in by Marcin Lachowski.

Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn't like that symbol, so you could declare something like this:

p { color: red; } p { color: black;# }

Every other browser will read the second line replacing the first line and the text will be black. Safari doesn't like that pound sign and will stick with the first declaration and …


Absolute, Relative, Fixed Positioning: How Do They Differ?

Finsta left a question in the forums:

I am fairly new to web design and I could never master the differences in positioning of elements. I know there are absolute, fixed, and relative. Is there any others? Also do they majorly differ? And when should you use which?

Short answer: Yes, there is one more, "static", which is the default. Yes, they majorly differ. Each of them is incredibily useful and which you should use of course depends on the …


What Do You Think is the Best Online WYSIWYG Editor?

This question was sent in by Edwin.

To clarify, I believe Edwin is asking about these JavaScript scripts you can use on website which turn regular <textarea>s into more robust editing environments. You'll recognize one in use right here on CSS-Tricks:

I like editors like this, especially in WordPress comment forms. WordPress allows commentors to use HTML tags in their comments, like <strong>, <em>, and <a href=""> tags. That's nice, but not all commentors may feel comfortable using tags …


Next 10 Days: Your Questions, Answered!

For the next two weeks, I'm going to change up the regular programming! I'll be back home in Wisconsin for a friends wedding and to visit family and friends, catch some football games, and have fun! So to makes things a little easier on myself, instead of doing the regular tutorials and screencasts that take quite a bit of preparation and time, I'm going to do a few weeks of Question & Answer with you guys!

So if you have …


CSS Wishlist: 21 Designer/Developers Sound Off

I asked a bunch of designers what they thought needed to change in CSS.

Wolfgang Bartelme

Designer at Bartelme Design

I'd love to see cross-browser support for gradients, shadows, opacity masks and rounded corners. I guess that would not just dramatically reduce bandwidth, but also speed up production and customization.

Jon Hicks

Designer at hicksdesign

I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to …


Poll Results: How do you back up your websites?

It's nice to hear so many people have a backup plan! It's probably a much rarer situation that your web host loses your data than it is that your own computer fails. But still... backups can save your ass in a major way.

Personally, I backup files and databases locally. Then my local machine is backed up by Time Machine. I'm thinking that is alright for now, but I'd like to beef it up at some point.

I admit a …


Links of Interest

Automatic Numbering with CSS Counters

The CSS 2.1 spec makes inserting counters into content possible. This has always been possible with ordered lists, but this counter system is much more robust allowing you to insert counters on any type of page element, set up incrementation rules, resetting rules, and more. The Opera Dev Blog has a nice article on how to do it. Works in current versions of all the major good browsers, and is slated to work in IE …


Your Go-To Hex Code Color

A few days ago I mused on Twitter:

When I need to pick a hex code color out of thin air, I always pick #ccc

Turns out, lots of folks have their own favorites! It's little mini conversations like this that make Twitter so much fun.










Modal Login Pages

Wikipedia has a succinct opening sentence about modal windows:

In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.

These are common in desktop applications when a program needs an important decision made. They are becoming more and more popular in web applications thanks to the JavaScript "light box" (or one of …


The Usability Problems of

Jakob Nielsen has written some damn smart things about usability, and his work has probably done great things for the web in general. You hate to beat up on a guy like that, but c'mon, it is beyond ridiculous to me to be a self-proclaimed god of usability and have a site as awful as his. I'm not the first one to say it, and I won't be the last. (Great article on a group makeover from 2004) People have …


Links of Interest

Browser Differences I Can Live With

For a beautiful web has a nice article on acceptable cross-browser differences. Essentially, progressive enhancement typography stuff and then things like border-radius. I completely agree. I guess that answers this question.


Feed IE6 With a Basic Stylesheet

A lot of times when you use conditional stylesheets, you create one for IE 6 that over-writes some exisiting rules from your main stylesheet to fix quirks, hide things, and do just general cleanup. …


Styling Scrollable Areas

The scrollbars on browser windows are not styled by the website itself, or even generally by the browser. They come from the operating system itself.

The desire to customize the style of these scrollbars is strong. When you are starting out, it feels like something you should be able to do with CSS. Complicating the issue, if you search around for CSS to change/customize scrollbars, you'll probably find it. The problem is that in IE 5.5, there was proprietary browser …


Lifestream Website with Sweetcron

I wrote a tutorial for NETTUTS that has been published:

Sweetcron is "The Automated Lifestream Blog Software". It is still in public beta, but is already a very nice blog software package. The beauty of Sweetcron is that new posts are created automatically from your activity elsewhere on the web. New photos on Flickr? Tweets on Twitter? Thumbs up on StumbleUpon? Blog posts on Tumblr? Add them all to your Sweetcron-powered site and they will appear on your site in …


Body Border 2: Fade In with Gradient

A while back I showed you how to create a Body Border with CSS. Basically, we used four fixed position DIV's to ensure all edges of the screen got a border and that the border would sit on top of all other content.

Let's take that same idea and expand on it.

  • Instead of a solid color, we'll use an alpha-transparent black gradient.
  • Instead of it being always-on, we'll have it fade in on a particular rollover.

View Demo Download


Links of Interest

Test Your Color IQ

I would think designers would be better at this than most folks. You can test your color IQ by arranging blocks of color into hue order. There are 20 blocks per row and the hue change isn't that dramatic, so it's a bit tricky!


Contextual Form Highlighting with Pure CSS

The best kind of highlighting on forms is where not only the input field gets highlighted but also the corresponding label. We have the :focus …


Drag ‘n Drop Cards

In the next week or so we are launching refreshed site for one of our clients at Chatman Design. The client is Beacon Athletics, a company that sells equipment for athletic fields. The homepage is of course of particular importance. Over the past year or so, their current homepage had become quite cluttered as different areas of the site were added and every section was vying for attention. The bottom line, is that Beacon is a company that sells products …


A Business Card Microformats Site

All microformats are are standardized ID and Class names to wrap data in. Really. That's it.

Say you are having a birthday party next week and you are posting about it on the web. That event has a name (Birthday party!), a location (Chuck E. Cheese!), a time (from 6:00pm-9:00pm), and some extra details (No gifts). There are many many ways to present this information semantically the web. The event could be a definition list with DL's and DT's. You …


Will Font Embedding Ever Become A Reality?

I have to admit I don't have my head fully wrapped around this whole font-embedding controversy. At it's root, it comes from us web designers being frustrated by the lack of options font options for our web pages. We want more, the "core 10" are just too limiting. Ideally, we'd like to use any font we want without resorting to alternative methods like sIFR, FLIR, or simply just using images.…


Links of Interest

IE 8 Proprietary CSS Attributes

IE 8 will have a number of proprietary CSS attributes. Not a big surprise, all the major browsers have them. It's a way to have support for a) stuff that is truly proprietary to that browser, b) stuff that they want to support but the CSS3 spec isn't completed yet, or c) stuff that IE 8 will only be partially supporting. Of particular controversy? "-ms-overflow-x/y". We have pretty good consistent support of the overflow-x/y …


Screencasting Setup

I get a fair number of questions about how I record the screencasts, so I thought I'd do a post on it that is both of interest now and that I can refer people to later. …


From The Forums

Yesterday I "upgraded" the forums from phpBB 3.0.0 to 3.0.2. It was a bit of a debacle, probably mostly my fault, and it was down for a lot of the day. It's back up and running now though! Apparently it fixed an issue one user was having with IE 7, so that's cool. I did lose the some of the "search" data from the database, so searches in the forums might be kinda limited for a while (if anyone knows …


Messing With Firefox’s View Source CSS File

Firefox has a number of core CSS files that it uses to render web pages. Most of them are filled with sensible default values for all those pages out there which don't provide their own styling. For example, Firefox has its own CSS file just for forms called forms.css which gives form elements their special Firefox form look. This file differs from defaults in other browsers, hence the common need for CSS resets to yield cross browser consistency. But I …


Links of Interest

Tutorial Search

When I was doing that video on Google Search I thought to myself wouldn't it be cool to make a search engine that only searched through design/development sites? I talked myself out of it, because I started to think you'd be better off searching regular Google instead of limiting yourself to certain sites. Reader Art Webb clearly had the same idea, and built I almost wish I hadn't talked myself out of it, because in …


How To Deal With An No-Longer-Semantic ID or Class Name

Errol writes in:

What's your thoughts on a situation where you've started
naming classes and then halfway through you realize that
you need the same class but the naming isn't semantic.

Do you create a duplicate class, rename the existing one
to something more general, or something else?

For example:

I'll have a #modules_list_footer but now I need the same thing
for articles, so I could just use modules but it
should be "#articles_list_footer".…


Improving the Default Directory View

You've all seen a page like this:

That's when you are viewing a directory on a server (or locally), that doesn't have an "index" page to show you, but does have permissions set to allow you to see the directories contents. Different browsers have different takes on it. Here is Fx3:

None of them are exactly shining examples of user-friendliness, but they'll do. After all, chances are all you need to do is quickly scan the contents and click on …


Links of Interest

Fade Out Bottom (revisited)

The first post that was ever popular on CSS-Tricks was my tutorial on fading out the bottom of a website. Reader Pascal Moret wrote in with some suggestions for fixing it up for IE 6. I figured what the heck, might as well get it fixed up for those folks who might want to use it but are worried about that. The live demo is updated as well as the download.


Override Inline…

IE 6 Blocker Script

Fed up with supporting IE 6? Ready to just cut it off? I don't blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always the case, and I feel like the JavaScript support is even more problematic for developers.

Many times it just comes down to how best to spend your time. If you have to choose between designing and coding a neat new …


Weird File Requests and Easing Server Stress with .htaccess

I got an email from Media Temple (my hosting provider for CSS-Tricks) telling me that I was going to exceed my "GPU" limit for the month. Wha? Turns out a GPU is a "Grid Performance Unit" and is a Media Temple specific way to calculate how much server resources you are using. I think everything but database stuff is included in this. They provide a "GPU Tool" as part of their interface to show you what parts of your website …


Launch: Status

Today is the unveiling day of a new web application I've been working on the past few months. I am pleased to announce: Status. I worked on it with my friend Richard of Shiftedfrequency.

What is Status?

Status is a communication tool that is all about private groups. You can either start a group, or get invited to an already existing group. Within your groups, there is but one single function, and that is to "Check in". When …


Links of Interest

Automatically back up your entire web server files and databases to Amazon S3

Christina Warren has a comprehensive and excellent tutorial on creating a Ruby script to back up your entire web server, including databases, and upload them directly to an Amazon S3 bucket. The tutorial is geared toward Media Temple, but I imagine could be adapted to other hosts. She also did a screencast demo demonstrating it all. This is high on my list of to-do's, and handy for …


Date Badges and Comment Bubbles for Your Blog

One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.

As you can see, this "shield" shows the day, the month, and the number of …


Screencast Archives Updated!

It was a long and grueling process, but I finally finished updating the entire video archive. Here are the improvements:

  • Videos play on the web in Flash. From time to time I would get a note from someone either saying the had trouble watching the videos online or downright yelling at me for embedding video in Quicktime. I like Quicktime as with the way I shoot it easier to deal with, has smaller file sizes, and higher quality. Well, I

New Poll: How Do You Back Up Your Websites?

What if you hosting provider calls you one day and tells you they had a catastrophic fire at their facility and every bit of data on their (your!) servers is gone!

It's highly unlikely, of course, and it's more likely that your host does a better job of backing up data than you do. But... it's certainly possible and ultimately, you are responsible for your sites. If you do client work, the duty of backing up is even more important!…


Links of Interest

Google Docs: Forms

This isn't exactly breaking news, but I only just heard about it so I thought I'd share. The free service Google Docs allows you to build web forms from within it. It has a pretty limited feature set. Basically you just provide the question, answer type, help text, and whether it's required or not. Add as many questions as you'd like and save it and you get the ability to embed the form as an iFrame. The …


Creating a Slick Auto-Playing Featured Content Slider

I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose.

Both of these examples use the Coda Slider pretty much "out of the box". Sure …