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

Article Archives


What to Ask a New Client Wanting a WordPress Theme

[original photo]

With any new client, before you start choosing technologies, you should be finding out more about them. What they are all about, why they need a website, and what the goals of that site are. But if you are past that stage and it becomes clear that they need a blog, and that blog will be powered by WordPress, here is a list of things you should ask to get started (in no particular order).…


It’s WordPress Week!

I've been working with WordPress a lot lately. The redesign around has had me moving lots of stuff inside WordPress and using it more and more like a real CMS (video on this). At work lately we've been doing a ton of WordPress sites and it's just all up in my mind right now. So... to get it all out of my system, this upcoming week on CSS-Tricks is going to be WordPress Week! The theory here …


Thoughts on IntenseDebate So Far

I've been using IntenseDebate on CSS-Tricks for a little over a week now and a lot of thoughts on it have been stirring around in my head so I thought I'd try to organize them and share.

What is IntenseDebate?

IntenseDebate is a service to enhance the traditional comment system on blogs. I'll get into more specifics about what those enhancements are later. The important idea is that it isn't a replacement comment system, it just works with your existing …


Block a Website for Everyone But You

Quick little .htaccess trick today for ya'll. This snippet will redirect any visitor who is not at at one of the provided IP addresses. You can use as many or as few as you would like. This is just a very quick way to block access to a site for, say, everyone but you. Or, everyone but you and a few select co-workers or clients.

RewriteEngine On RewriteBase / RewriteCond %{REMOTE_HOST} !^71\.225\.113\.171 RewriteCond %{REMOTE_HOST} !^71\.185\.239\.212 RewriteCond %{REMOTE_HOST} !^69\.253\.223\.254 RewriteCond %{REQUEST_URI}

Jeff Croft on Web Design

I would say my biggest pet peeve related to the industry would be people focusing on technology instead of design, standards instead of users, and validation rather than innovation. Web standards and best practices are noble goals, but all too often in our community people forget they are a means to an end, not the end itself.

Well said, Jeff.

From a post about web design pet peeves.…


Links of Interest


I have no idea how long these "served" sites have been around, but I dig 'em. typographyserved, photographyserved, etc.


Intense Debate

Commenting is the best thing about blogs. Really makes a blog into a community rather than a virtual megaphone to shout from. But the default commenting system on most blogs has been primitive for a long time. You enter your name and comment and submit it. The only chance you get to establish who you …


Old School Clock with CSS3 and jQuery

Hi everyone, my name is Toby Pitman and Chris has asked me to write a post about a recent experiment that I posted up on the forum a little while ago. It all started when I was looking at the WebKit blog and saw an article on the new CSS3 animations and the one that caught my eye was 'rotate'. I started thinking what the hell can you rotate on a webpage (it's animated GIF's times ten!). Then it hit …


Guest Post on Writing Better HTML

I was flattered when the guys from Smashing Magazine asked me if I'd like to write an article for them. I thought I would stick to my best subject and write about CSS at first. So I started a draft about developing good CSS habits. The first section was about how CSS doesn't live in a bubble and needs good HTML to go around it. In fact, good HTML is almost MORE important. That first section went on and on …


Color Fading Menu with jQuery

Editor's note: When I first pushed out this latest redesign for CSS-Tricks, it featured a simple color fading animation in the main navigation. Liam quickly noticed a flaw in the code I was using to do it, where if you very quickly moused back and forth over the menu items some of the transitional color would "stick". Liam generously rewrote the code to be a bit smarter for me, and I asked him to write this tutorial. Thanks Liam!

Hello, …


Links of Interest


Using justified text on the web has long been tricky, as lines could sometimes be rendered with god-awful word spacing. This is due in large part to the fact that rendering engines aren't smart enough by themselves to know when and where to hyphenate a word. The wp-Hyphenate aims to add smart hyphenation to WordPress blogs.

Believe me, the last thing I'm going to do is get all political on you. I just think this is one …


About the CSS-Tricks Redesign

In case you haven't noticed, I've done a bit of a design overhaul around here. I thought I'd take the opportunity to go over some points and features of the new design.


Because it was fun. Because I'm a designer and we never stay satisfied. Because I think websites should always get a little design refresh at least every year or so.

Is there anything new?

Nope, not really. Just a new face. On the back-end, I'm slowly moving …


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".…