Grow your CSS skills. Land your dream job.

Article Archives

Interviewed on snap2objects

I was interviewed by mao at snap2objects. Check it out if you want to hear me ramble on about CSS =)…

January 31, 20081 comment

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 …

January 29, 200822 comments

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 …

January 25, 20083 comments

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 …

January 24, 200810 comments

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…
January 23, 20087 comments

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
January 22, 200852 comments

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 …

January 19, 20084 comments

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 …

January 18, 200821 comments

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

Wow.

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 …

January 17, 20087 comments

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 …

January 15, 20085 comments

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 …

January 12, 200818 comments

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 …

January 8, 2008136 comments

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 …

January 3, 200814 comments

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 …

January 2, 20089 comments

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 …

December 29, 200712 comments

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 …

December 26, 200727 comments

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 …

December 22, 20076 comments

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 …

December 21, 20074 comments

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 …

December 20, 200715 comments

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 …

December 19, 200712 comments

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 …

December 18, 200713 comments

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 …

December 17, 200758 comments

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 …

December 15, 200719 comments

Links of Interest

Link Value Factors


Wiep.net 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. …

December 14, 20071 comment

Listless Navigation – Using CSS To Do More With Less

The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:

  • Code much, much less XHTML
  • Separate website formatting from content
  • Control
December 13, 200729 comments

Group Input Needed: Rating Your Level of CSS Skill

Reader Patrick, an IT Software Architect, wrote in with a question I though was really interesting:

For my company, I am developing a scheme where our developers can check which level for a specific knowledge area they are on. For …

December 12, 200727 comments

Review of PSD2HTML

PSD to HTML Service by PSD2HTML.com is one of the sponsors of this blog, so I figured I would introduce them a little bit, explain what they do, and share my past experience with them as a customer. I'd like …

December 11, 200721 comments

How to Redirect index.html to index.php

Just this past week I finished up with a redesign project for a client and took the project live. Later on in the afternoon the day of the launch, the client called me:

Client: I just clicked on our

December 10, 200724 comments

The All-Expandable Box

I wrote a guest tutorial over on Web Designer Wall detailing how to create an All-Expandable Box. This is a box that will expand both vertically and horizontally when text is resized in a browser, while maintaining the graphically …

December 9, 20073 comments

Non-Transparent Elements Inside Transparent Elements

Reader Shane left a comment:

If using transparency on a block element it makes the text inside transparent as well. Is there a way I can prevent that from happening? I tried putting the text in another div and …

December 8, 200740 comments

Links of Interest

Keep your list items INSIDE


There is quickie CSS trick over on Free CSS Templates reminding about the list-style-position property and how you use it to keep your list items inside your list instead of (weirdly) defaulting outside.

 

Articles…
December 7, 20072 comments

Centering List Items Horizontally (Slightly Trickier Than You Might Think)

Update April 2013: This article is pretty old. This isn't very hard. Just give the list centered text (e.g. ul.nav { text-align: center; }) and the list items inline-block (e.g. ul.nav li { display: inline-block; }). If you…
December 6, 200740 comments

Big Stories on Web Design this Month

This is kind of a Links of Interest post, but I wanted to highlight these things extra-specially:

A Preview of HTML 5


I know everyone and their mother is going to be linking to this article, and I also know …

December 5, 20076 comments

How To Steal A Websites Background Image

Note: this should only be used for the powers of good! Don't go around stealing people's background images and using them on your own site without asking!

Many sites employ the use of a background image. They range from absolutely,

December 4, 200722 comments

“Checkmark” Your Visited Links with Pure CSS

Due to user privacy issues, more modern browsers severely limit how you are able to style :visited links, which renders this article rather useless. You can read more about it here.

Web browsers know which links on a page have …

December 2, 200752 comments

Links of Interest

If you come from a print background at all, one of the things you might sorely miss is the concept of "tabs". For example, think of a restaurant menu where the title of the dish is on the left, then …

November 30, 20077 comments

More Information Regarding HTML Emails

Since I published my article on using CSS in HTML emails a few days ago, there has been a couple of great articles published on the same subject. I want to highlight some of these, and some other related articles …

November 29, 20073 comments

My 5 Favorite WordPress CSS Tricks

UPDATE October 2012: This article is almost five years old. It contains a bunch of stuff I'd never do anymore. Rather than delete it, I'm going to update each section with better information. 1. em strong

Perhaps more than I …

November 29, 20075 comments

Eliminate “Jumps” in Horizontal Centering By Forcing a Scroll Bar

You are likely aware of the page-centering technique of adding auto left and right margins to an outer div:

#page-wrap { margin: 0 auto; }

One of the shortcomings of this technique is that when used on websites with multiple …

November 28, 200734 comments

Using CSS in HTML Emails: The Real Story

Should you be sending HTML emails at all?

This is surely a debated issue, but ultimately I say if you have a message you feel would benefit from a nicely designed email you should go for it. If you just …

November 26, 200724 comments

Links of Interest

If you've ever had to deal much with your .htaccess files, you know it's like learning a whole new cryptic language onto itself. It's high time someone made it easy. This online generator takes you through the options in …

November 25, 20072 comments

Avoid “CSS Jitter”

With more power, comes more responsibility.

One of the things that CSS allows you to control is the hover state of many objects, most notably, anchor (<a>) elements. Typically, the hover state is styled with color changes, or perhaps something …

November 23, 200719 comments

Utilizing the Underused (But Semantically Awesome) Definition List

A quick intro to semantics

When we talk about semantics in HTML, we are talking about how HTML tags are used to describe the content. Good semantics means that the tags are being used well to describe the content. Bad

November 20, 200728 comments

Quick Tip: Making a ‘Print This Page’ Button

Why bother?

Most people know how to print a web page, so including a "Print This Page" button on a website is often overkill. But there are some circumstances where it really makes sense. I just came across one of …

November 19, 20078 comments

Links of Interest

  • I wrote a guest post over on Tutorial Blog about taking control of image rollovers. In the tutorial, I show 5 different techniques for image rollovers ranging from relatively simple borders, to going from black and white to color,
November 17, 20073 comments

Quick CSS Trick: How To Center an Object Exactly In The Center

I recently needed to make a placeholder page for a site. I wanted the logo image to be centered exactly in the middle of the screen, that is, both vertically and horizontally centered. Quickly, I thought I'd just give the …

November 14, 200739 comments

Making the Most of the Limited Choices in Web Typography

So, what do we really have here?

As far as variety of font choices, things are pretty bleak. But Helvetica isn't on pretty much every computer in the world because it's a bad font. It's actually a great font if …

November 12, 200712 comments

Tips For Creating Great Web Forms

1. Use Labels

You don't need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and …

November 11, 200782 comments

9 Awesome CSS Themed T-Shirts

Show off your inner design nerd with these CSS-themed T-Shirts. The holiday season is coming up too... if you know any hardcore CSS buffs that need some style for their body =) Click the T-Shirts for links to their respective …

November 9, 200736 comments

Links of Interest

Matthew Mullenweg (of WordPress) clarifies his thoughts on a WordPress theme marketplace. I'm all for it!

Foohack has a nice post up on 5 problems with CSS (Not like common mistakes, but problems with the CSS spec itself).

Not …

November 9, 20076 comments

*May or may not contain any actual "CSS" or "Tricks".