The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Article Archives


Different Ways To Format CSS

This post will focus on the different ways to format CSS, which differs from the different ways to organize CSS. Definitely related concepts, but I think organization has more to do with how things are grouped and ordered while formatting has to do with spacing and indenting.

Formatting has nothing whatsoever to do with how the CSS functions. These are merely aesthetic choices by the coder. But that's not to say formatting isn't important. That would be like saying …


Better Password Inputs, iPhone Style

Recently renowned usability expert Jakob Nielsen wrote an article Stop Password Masking in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of <input type=password ... /> elements, where text entered into them turns into bullets rather than showing the real characters typed. He says it reduces user confidence in what they type and thus beginning a string of problems like more typing errors, users …


All About Floats

What is "Float"?

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". Here is an example of that.

In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap …


2-Year Anniversary GIVEAWAY

Happy Fourth of July all! A lovely day filled with fireworks and usually a day off of work (in the US, anyway). It's also the anniversary of CSS-Tricks. It's been two years now. It actually feels like it's been longer than that sometimes, just because of how far the site and myself have come. Last year we didn't do anything special, but I thought this year we'd kick it up a notch and celebrate a little harder. That's right, …


New Poll: Would You Work on a Website You Thought Was a Stupid Business Idea?

I've mused about this before, but I thought it would be good to put it to a poll this time. The discussion before was absolutely fascinating. Many folks saying that it's our ethical duty to inform clients of our true opinions, and that part of the value of what we provide is those opinions. Many folks saying we should take the work and do it, as it's not our job (or expertise) to judge business ideas (e.g. do you want …


Poll Results: Browser Choice Sans Developer Tools

Yes, all the major browsers have development tools now, but I think most people are in agreement that you just can't beat Firebug and the slew of other development-specific addons for Firefox. Outside of these tools, I often hear people complain about Firefox being slow, memory hungry, or crashy. I thought it would be interesting to ask about people's browser choice if these development tools were not a factor, so just judging by UI and speed and features and such. …


The “Light” CMS Trend

CMSs are beautiful things. Just as CSS allows us to abstract the design away from the markup, a CMS allows us to use a database to abstract the content away from the markup. There are a zillion of them, each with different backend UI's and different ways to doing things.

But CMSs are for web people. Even my beloved WordPress can be challenging to train/explain to someone who has no experience working with websites. Perhaps this is the motivation toward …


Web Nerd Terminology (Explained)

As happens with any weird niche societal group, us web nerds have developed some language of our own. Some of this language is perfectly acceptable English, but still sounds weird to an outsider. I thought I'd throw together a list of these words and attempt to explain them in plain English as a reference for non-nerds.

Browser - A browser is a software application that is used to visit websites. Firefox, Internet Explorer, Safari, etc. If you think this is …


404 Best Practices

A 404 error on the web is what a web server responds with when it is tasked with serving up a resource that it can't find.

1. It should still look like your website

If you don't specifically tell your web server how to handle 404 errors, it will serve up a very plain and generic looking error page. That just says something like "Not Found - The requested URL was not found on this server." on a plain …


Review of WP Coder

I was recently asked by the guys at WP Coder if I would do a review of their service. I don't do it very often, but they seemed like nice guys and WordPress is of particular interest to me lately. As it happens, I was tinkering with a theme in Photoshop right as they asked me so it was perfect timing. I finished up the theme and shot it over to them to start the process. I thought their order …

Digging Into WordPress

Got a little news for ya'll. Remember when I announced me and Jeff Starr were looking for a publisher for a book about WordPress? Well, that worked, and we talked a number of different publishers. They were all very nice, but after weighing everything out we decided that when we are done we'll be self-publishing it as a PDF for now.

The book itself isn't ready yet. It's going to take us a while to get it all together and …


Intimacy Hierarchy

Pete Pinnell in a video about fine art and ceramic cups talking about human behavior:

We'll look at things that we won't nudge with our foot.
We'll nudge things with our foot that we won't pick up in our hand.
We'll pick things up in our hand that we won't put up to our mouth.
We'll put things to our mouth that we won't put in our mouth.

There is an intimacy hierarchy in web design too.

There are websites …


Pricing Order

We were recently re-doing the signup page for Are My Sites Up, and we were looking at the way we were ordering our plans. At the time, it was from least expensive (free) to most expensive (Premium Pro). We looked around at a couple of other web services to see how they were doing it, and at first look it seemed like everyone was doing it the opposite way:


What’s The Best Way To Handle Page Titles?

First-level Navigation

Or, "the homepage". Here are some possibilities:

  1. [ NAME OF SITE ]
    Short and to the point
    Ex. CSS-Tricks
  2. [ NAME OF SITE ] - Short Tagline
    Taking the opportunity to explain the site
    Ex. CSS-Tricks - A Web Design Community
  3. [ NAME OF SITE ] - Keywords
    Site titles are SEO Opportunities
    Ex. CSS-Tricks - Web Design, jQuery, Downloads, Screencasts, Forums
  4. Other?

Sending Nice HTML Email with PHP

This is going to be a continuation of the Website Change Request Form demo we've been using around here for a while. If you need to catch up, first I talked about it, then I built it, then I screencasted it, then I secured it. Throughout all of this, the end result has been a boring text-only email that gets sent to a single email address.

We're going to improve that output, and make the email


Five Questions with Matthew Kammerer

I first heard of Matthew while exploring UX Booth, a darn nice little blog and resource site dealing with user experience by four young folks. Then I heard he joined the team at BuySellAds, a company I take great interest in both because of their success and because it's a wonderful service that I use here on CSS-Tricks. I thought I'd catch up with him for a few questions...


Affiliate Program for Are My Sites Up

There is now an official affiliate program for Are My Sites Up where you can earn money through referring people to our service.

Here are the basics:

  1. You sign up.
  2. You get an email when you are approved with a link to your special affiliate page. Here you get your unique affiliate URL which you can use anywhere you like as well as custom graphics and copy-and-paste code.
  3. You earn 20% on any sale. That's five bucks on Standard,

The CSS Box Model

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We've talked about the positioning of these boxes a bit, and about their behavior.

What we haven't talked about much is the box itself. How is the size of the box calculated exactly? Here is a diagram:


The CSS Overflow Property

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height …


Applications: One Day in the Life of a Web Designer

It's incredible how many applications we interact with on a daily basis. It's no wonder we are so critical of them sometimes, Below is a timeline of a typical day for me and the different applications I deal with at certain times. The truth is of course that I interact with these applications as needed and I don't adhere to any sort of timeline, it was just kind of a fun way to present it.

6:00am GMail

I live in …


Links + This Week

Couple of links to share this morning of my content elsewhere. The latest Ask Smashing Magazine is up with loads of questions on CSS answered by me. Also Chris Spooner interviewed me on Line 25 about my past, blogging, and getting ideas.

As a quick note: I'm out on vacation this week Wednesday through Sunday, and I'll be totally off the grid. I do have some articles lined up though. Tuesday I'll be posting a journey through the applications I …


Quotes on Design API v2.0

I know at least a couple of you ended up using the original Quotes on Design API. It was kind of an experiment, but it did the trick in that it was an easy way to quickly add random design-related quotes to any site, with full CSS control.

It's major weakness was that on every single page load on every single site using it, it had to hit the database. It was a tiny and quick query, but still, not …


CSS-Tricks Mobile

UPDATE: is now responsive, so no more separate mobile version of the site. Not that I'm against that, I'm just a fan of responsive for this site.

There is now a mobile version of CSS-Tricks, thanks to the service and fine folks at Mobify.

It's not just an iPhone version, but should be pretty compatible with most mobile devices. The best part though, is this isn't just a way to read the articles like previous mobile versions …


Serious Form Security

The Website Change Request Form has been a running topic around here for a little while and I'm gonna run with that for a little while. We are not going to rehash all the HTML and JavaScript that makes the form work, so if you need to catch up, go check out that first article.

What we have at this point is a pretty nice looking form that has a pretty nice user experience to it. I feel like it's …


.net magazine

I've had articles in several recent issues of .net magazine. I thought I'd snap some pics for posterity.


Vertically Center Multi-Lined Text

If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height of the box. Works great, but is a major fail if that text needs to wrap.

A "speech bubble" is a classic example of somewhere we might want text to be centered both horizontally and vertically and be adaptable to …


Don’t Rely on Background Colors Printing

At work I recently rolled out a new system for one of our clients, the Rick Wilcox Magic Theater. Their site is largely informational about them and their show, and a portal for selling tickets to their show online. As their theater is part of a vacation destination, people often buy tickets far in advance. The best method for presenting their show schedule is literally in a calendar format where people can see months of show dates at a …


Front-End Design Conference

I will be speaking at my first conference ever! I'm really looking forward to it and I have already started preparing my presentation. It's going to be focused on jQuery and using it to accomplish things that CSS does poorly, can't do yet, or will likely never be able to do. Lots of real-world examples and implementations.


Override Inline Styles with CSS

This damn juicy CSS trick has been around for a while now, but I wanted to make a special post sharing it again to spread the good word.

Often we think of inline styles as a way to override styles we set up in the CSS. 99% of the time, this is the case, and it's very handy. But there are some circumstances where you need to do it the other way around. As in, there are inline styles on …


New Poll: Sans-Developer Tools Browser Choice

I bet a lot of us around here use Firefox as our main browser. I really like Firefox. I think the interface is pretty nice, but what put its so far ahead of the other browsers for me is the huge ecosystem of Add-ons. And not just the killer eye candy stuff, I'm talking about hardcore development tools that make our jobs as designers and developers immeasurably easier. I'm talking about of course things like Firebug, Web Developer Toolbar


Poll Results: CSS3 Features

Almost 7,000 people have weighed in on this poll so far, making it the biggest yet! The question was:

If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about?

As always, very interesting results. It was EXTREMELY close for first place, going back and forth a number of times between the three top contenders.…


Website Change Request Form

Last month I wrote about how I wished when clients had a change request for their site, they would treat me like a six-year-old. The point was, those change requests are often far too vague which leads to confusion and ultimately wasted time. It would be more efficient if those change requests contained everything needed to make that change without confusion.

I thought this idea would make for a good demo of a web form with some advanced functionality.…


Five Questions with Richard Felix Jr.

I've been friends with Richard for years. In between sending funny links back and forth to each other, we've been able to kick out a few projects (Are My Sites Up, LyricSift). I design, he develops. I've always been impressed with Richard's work ethic, problem solving ability and how he always has his finger on the pulse of the tech industry.

Richard's personal company is ShiftedFrequncy, he works at Gatorworks in Baton Rogue, blogs at FreshArrival


Five Questions with Soh Tanaka

In looking back through some emails, I found an email from Soh in October 2008. It was a very nice message introducing himself, saying he has enjoyed CSS-Tricks, and that he was just getting into blogging and if I had any advice. This is what I said:

My best advice? Write, write, write. Write good original content and keep at it! Be honest, be real, and keep working on your site to make it the best it can be. And …


Five Questions with Jeffrey Brown

I first met Jeff when he emailed me in early March of this year introducing himself as a High School Web Design Teacher at Damascus High in Maryland. He told me he makes his advanced students subscribe to this blog! Jeff is passionate about teaching and web design, and I wouldn't be surprised if his 4-Year curriculum at Dasmascus was the best in the country.

As part of the Advanced Web Tools class, Jeff brings in speakers from the professional …


Five Questions with Collis Ta’eed

Collis Ta'eed is the kind of guy that every web designer with a little entrepreneurial spirit wants to be. He is a trend-setting designer who's work is seen, used, and interacted with by millions of people a day on Envato's sites like PSDTUTS and FlashDen. I would list all of the sites here, but there is just too darn many of them it would take up the whole paragraph! If Collis merely designed all these sites, that would be …


Five Questions with James Padolsey

If you are like me and commonly find yourself Googling around for JavaScript solutions to coding problems, there is a good chance you've come across James Padolsey's Blog. James is a prolific blogger with a clear teaching style I think we all appreciate when looking for solutions. I've referenced his articles many times, for example, when needing to dynamically resize textareas, shuffle DOM elements, or animate to a particular CSS class. All this, and James is …


Next Week: Five Days, Five People, Five Questions Each

I've gotten to be interviewed a few times, but I've always wanted to be the interviewer myself. I've finally made that happen. Next week on CSS-Tricks I'm going to be posting interviews all week long. Here's the plan:

  • Monday: a JavaScript developer 10 years younger and 10 times smarter than me
  • Tuesday: a CEO, Web Designer, and mad genius Entrepreneur
  • Wednesday: a Teacher trying to change the game in web education
  • Thursday: a rising star Web Designer and Blogger
  • Friday:

So Much Power, So Few Options

David Berlow commenting on font rendering abilities in the browser:’s not treated beyond a fourth-grader’s crayoning abilities; no shadows, in-lines, outlines, fill variety, twisting, perspective, set on a bouncing line, or opaque over another object, much less in motion. If the web’s imaging language is going to call the mighty capabilities of digital outlines for display type all the way to the user’s PC, when will it be a worthwhile shift of rendering power? Can we aim a little …


What is Vertical Align?

CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it's use a little bit. The basic usage is like this:

img { vertical-align: middle; }

Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does "sit inline" mean exactly? …


px – em – % – pt – keyword

When it comes to setting the size of type in CSS, you have lots of options. You can apply a "keyword", like p { font-size: small; } or a numerical value. When using a value, you need to declare a unit of measure which itself has four options. Which is best? It depends of course. Let's take a look:…


Looking for a Publisher

Hey everybody, I have some news. I've alluded to it a few times in the past, but now I'm officially saying it: I'm writing a book. I am not going to share too much detail about it now, but here are the facts:

  • It is focused on WordPress
  • It is co-authored between me and Jeff Starr
  • It is going to be awesome

We have been working on it for quite a while now and I'm very pleased with it. Both …


CSS is like…

I mused on Twitter recently:

CSS is like chess. You can learn the basics in a day and spend a lifetime mastering it.

I quickly thought it would be fun to collect other people's ideas on what CSS is like. Here is what you said:


CSS is like a girlfriend. No matter how hard you try, she will always interpret it a different way.


CSS is like marching orders for pixels.


CSS is like …


Exercise to Get Better at Web Design

Getting better at anything takes considerable time and effort. Feel like you are in a rut with progressing your web design skill? Try this:

  1. Find a web site you really love the design of. Maybe browse a design gallery.
  2. Open up your design program of choice and try to copy it identically*. Take a full page screenshot of the site for reference and quick overlays.
  3. During this copying process, there will be many opportunities to put your own

Navigation Markup After Content

I am not an SEO expert. I said not long ago that I believe it's mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a big deal. It can mean big bucks. For those of us with clients, they desire this and look to us to help. So if there are reasonable steps we can take to help with this, I think we should.

One …


Auto-Moving Parallax Background

A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog). In that original demo, the only way to see the parallax action take place was resize the browser window.

Recently, Paul Hayes took that example and ran with it. He used the extremely cool -webkit-transition attributes …


Need Something Changed On Your Website? Treat Me Like a Six-Year-Old (Really)

I used to work in pre-press before I got into web design. I worked at three different somewhat large printing shops. Pre-press is the department that is in between clients (designers) files and actually getting those files to press. It might not be obvious, but there is a TON of work that needs to be done to prepare client files to actually be printed and through the bindery. This isn't the time or place to get into all that grisly …


Filtering Blocks

One of our eCommerce clients at work had a number of products they wanted to put on special to promote on the web. Each product has a different "reason" why it's on special. Perhaps it's discontinued, perhaps its special pricing, perhaps it's free shipping. Originally they wanted a special page built for a new type of discount: "rollback pricing". We argued that in general, a visitor on the web doesn't really care why a product is on sale, just that …


AMSU: Three Tiers of Premium + iPhone App v2.0

We've been chugging along over at Are My Sites Up keeping things running smoothly and working on new features for ya'll. First and foremost, we were closed for new registrations for a while there while we worked out some growth issues. We're happy to say that's been worked out and we are open for new registrations again. So if you don't have a free account yet, go get one.…

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed