Grow your CSS skills. Land your dream job.

Article Archives

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; }
March 3, 200818 comments

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 …

March 1, 200880 comments

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 …

February 28, 200851 comments

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 …

February 27, 20085 comments

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 …

February 23, 20088 comments

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

February 21, 200834 comments

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 …

February 20, 200822 comments

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…
February 19, 20089 comments

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 …

February 16, 200892 comments

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

February 14, 20082 comments

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 …

February 12, 20089 comments

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 …

February 10, 200812 comments

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…
February 9, 20084 comments

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 …

February 8, 200811 comments

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

February 7, 200823 comments

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 …

February 6, 200814 comments

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, …

February 5, 200815 comments

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 …

February 4, 20084 comments

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…
February 2, 200810 comments

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

February 1, 200847 comments

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

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