Grow your CSS skills. Land your dream job.

Article Archives

CSS Beginner Mistakes: “Divitus”, Absolute Positioning

There is an article over at Search-This that points out a couple of beginner mistakes that are pretty interesting. Here are some highlights and some of our own:

  • Absolute positioning. - One of the first feelings of power you get
September 2, 20073 comments

Validate your CSS through W3C

Just like you can validate your HTML at the W3C, you can validate your CSS.


CSS-Tricks passes muster.

August 31, 20070 comments

Font Rendering Differences: Firefox vs. IE vs. Safari

You can get pretty specific when declaring how you want text to look with CSS:

p { font-family: Verdana; background-color: #7A2121; color: #B93333; text-decoration: underline; word-spacing: Normal; text-align: left; letter-spacing: 1px; text-indent: 15px; line-height: 16px; font-size: 10px; font-weight: bold; font-style:
August 29, 200715 comments

Create Your Logo with Pure CSS

Dan Cole has an interesting article up about creating a logo using only CSS. Why?

  • Faster loading time
  • Works with images disabled
  • Scalable

Here is what it looks like:

Here is how it was done:

#tower1 { position:absolute; top:51px;
August 27, 20074 comments

Totally Ridiculous: CSS MySpace Modifications

This is old news, but is worth of revisiting because of it's preposterousness. You are able to add CSS to your MySpace pages. Cool. But where do you do that? Is there some little fun CSS editor they built in? …

August 24, 20070 comments

CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image

I really like this subtle effect on the fortuito.us blog. the text at the bottom of the page fades away. Even as you scroll the page content up and down, it appears as if it fades away into the …

August 23, 200714 comments

Put Images in All Four Corners with CSS Positioning

It can be a mighty cool effect to have images that nestle themselves in the four corners of your webpage. You can achieve this positioning with CSS fairly easily without affecting any of your other page content. You may also …

August 22, 20070 comments

Spice Up Embedded YouTube Videos with Background CSS

If you are adding video to your website, using embedded YouTube videos is definitely something to consider. In addition to saving hugely on bandwidth, releasing your video into the wild on YouTube might gain you some exposure you may have …

August 21, 20077 comments

HangTab: Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content)

It is a very healthy technique these days to center your entire website horizontally in the browser window (but be careful), especially nowadays with monitors getting bigger and bigger and with higher resolution. Sometimes it's nice to break the …

August 20, 20075 comments

Using Pure CSS for Flipbook Style Animation

There is a great tutorial on CSS Play that uses pure CSS to create flipbook style animation. The theory at work here is that there is there is a big stack of "slides" stacked on top of each other. On …

August 17, 20070 comments

Using Divs Inside Tables

Despite their status as mortal enemies, divs and tables can work together if you need them to. Because of the ability to use vertical centering in tables, it is a somewhat popular technique to use a single-celled table with both …

August 15, 20071 comment

The How and Why of Clearing Floats

Update: A more comprehensive article on floats is now out: All About Floats

You've heard of "clearing floats", but do you really understand it? The whole problem is that floated objects do not add to the height of the object …

August 9, 200710 comments

Left Align and Right Align Text on the Same Line

It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on …

August 8, 200710 comments

Give Your Images Space and Captions For Better Layout

You can always float your images to one side or the other and give them a bit of a margin just by giving them a class like "floatright" and declaring that class as:

.floatright {
float: right;
margin: 5px;
}

August 5, 20074 comments

Stylesheets for Printing

Jason from 37 Signals has a great post up on the Signal vs. Noise blog on how simple print stylesheets can be and still be effective. Basically using display: none; enmasse. People don't need your header or your footer or …

August 3, 20070 comments

$5,000 Scholarship Opportunity: Design a WordPress Theme

Daniel Kovach writes in to tell us about a scholarship opportunity for students. Just design a WordPress theme for their new website. The contestants are judged by longtime bloggers like Paul Stamatiou . The winner gets $5,000 and their …

August 1, 20072 comments

Homebase, a Simple Free Template for All

If you are just getting started with CSS, a great way to begin is by downloading a template and playing around with things and seeing what happens. You have to be careful though, some templates are so overly complicated that …

July 31, 20072 comments

ID’s Cannot Start With a Number

Tempted to use something like "1800number_box" for a ID? Don't. Because it won't work. Class identifiers are allowed to start with a number, but ID identifiers are not.

That is all.

BUT

If you have already existing HTML using it …

July 30, 200712 comments

CSS3 Multiple Backgrounds Obsoletes Sliding Doors

With browsers that support the CSS3 Spec (Safari only at the time of this writing) there is no longer need for the sliding doors technique to create horizontally expanding elements that utilize background images. The ability to assign multiple background …

July 29, 20073 comments

Including Navigation Code On All Pages (Even With Current Navigation Highlighting!)

You've seen this a million times:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul>

The classic menu HTML which you can transform into any number of beautiful things through CSS. You could include that in all your pages …

July 26, 20075 comments

Designing For A Lightbox

The 37 Signals Blog, Signal vs. Noise, has a post about a month ago with an interesting observation:
"Designing for the iPhone is like a hybrid of print and web design."

Their point was with the iPhone, you know the …

July 25, 20070 comments

At @ Rule CSS

The default way to include an external stylesheet is to use the the link tag inside your pages head:

<link rel="stylesheet" type="text/css" href="default.css" />

That is a tried and true method and supports the whole spectrum of browsers from old …

July 24, 20070 comments

Expandable CSS “Note” Box

Creating vertically-expanding boxes is easy, just declare a width in your div CSS but no height. The div will expand to as large as it needs to be for the content inside. It gets a little more complicated if you …

July 23, 20078 comments

HTML Declarations Screwing Up CSS

Has your CSS ever been acting funny on you, but it looks as if you've done everything perfectly? It just might be your HTML declarations that are screwing you up. Sometimes when you are just throwing together a little sample, …

July 22, 20073 comments

Clean Up Your CSS

Cascading Style Sheets, at its root, is intended to separate the style of a webpage from the content. That makes sense for control reasons, but also for general code beautification. Just a little browsing through the CSS Zen Garden or …

July 19, 20071 comment

A Bulletproof Sticky Footer, Woohoo!

Footers on web pages are a great place to chuck copyright information, contact links, and quick navigational stuff. Visitors are trained to look to the bottom of pages to find these types of things, so why not help them out? …

July 17, 20079 comments

Creating Clickable DIVs

DIV's are a must in all CSS-based web design. They give you all kinds of fantastic positioning ability and give structure to your HTML. You can put links inside of a DIV, of course, but sometimes you just want the …

July 16, 20075 comments

CSS Menu With Rollover Images

We just posted on the nastiness of javascript-based rollovers. We showed you the basics of how to do it with CSS instead, but now it's time to put our money where our mouths are and provide a real example.

This …

July 13, 20071 comment

Reset all Margins & Padding

* {
margin: 0;
padding: 0;
}

This has become a very popular technique lately, and for good reason. It removes all default margin and padding for every object on the page, no holds barred, regardless of browser. This provides …

July 10, 20070 comments

3 Styles for BIG Headers

Here are some simple styles you can use when you need a BIG header.

h1.test1 {
font-family: Georgia, sans-serif;
font-size: 5em;
letter-spacing: -2px;
}
h1.test2 {
font-family: "Trebuchet MS", sans-serif;
font-size: 5em;
letter-spacing: -2px;
border-bottom: 2px solid black;
text-transform: uppercase;

July 6, 20071 comment

Header Text Image Replacement

So you know that search engines like Google, Yahoo, and MSN are primarily looking at the text content of your pages to index them an determine their relevancy to searches. You also know that using header tags like <h1> in …

July 4, 20078 comments

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