Grow your CSS skills. Land your dream job.

Article Archives

Grabbing Hex Codes for Colors

Defining colors in CSS is all about Hex Codes. You know, those alphanumeric six-digit things like #990000. You might have a handful of them memorized. Like that one I just mentioned is a nice dark red. #cccccc is a …

October 4, 20077 comments

Beginner CSS Tips For Your Blog

For many people, their introduction to web design and the wonderful world of CSS is through blogging. They start off blogging because it’s so easy and you don’t need to know anything at all about design. Soon after, the desire …

October 3, 20074 comments

Tag Cloud with Varied Padding Thickness

Often times “tag clouds” use variations in font-size and font-weight to distinguish between heavy use and light use tags. Here is another approach: use rollover boxes of different sizes through varied amounts of padding.

You can set the different sizes …

October 3, 20074 comments

Submit With Style

This is how you create a super basic submit button:

<input type="button" value="Submit" />

All you need to do to replace this default button with an image is to change the type to image and then declare a source image …

October 2, 20075 comments

Better Blockquotes with CSS

Blockquotes are HTML elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you …

October 1, 200713 comments

* { margin: 0; padding: 0; } No Longer Cool

One the techniques I have advocated using for a long time is this:

* {
margin: 0;
padding: 0;
}

This is part of the “CSS Reset” theory which helps keep your designs consistent across browsers, a very good thing. …

September 30, 20078 comments

10 Beautiful and Functional BLUE Web Layouts

Sometimes the best way to get inspired to design is to look at other great designs. These designs showcase beauty and function over flashiness. There are some amazing and flashy designs out there where I love the design but …

September 28, 20072 comments

List of Deprecated Attributes Still in Widespread Use

A “deprecated” element is an element the W3C has designated as outdated. These elements should not be used and are generally considered to be “bad code”. If you use a STRICT DOCTYPE, deprecated elements will not pass validation.

The thing …

September 27, 200711 comments

“Real World” Web Design Still Needs to Accomodate 800×600

Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks:

On this site, 800×600 doesn’t even make the top ten. Knowing that, I designed this site to make use of that extra pixel …

September 26, 200715 comments

How To Remember The Order of Selectors: LOVE and HATE

I read a comment the other day over on CSS Drive from someone named Slackerbabe that I thought was worth repeating.

Heres a cool way to remember the order of the four selectors, “LVHA (link visited hover active)”,….

Just think …

September 25, 20077 comments

Creating a Nice Textarea

A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of …

September 24, 200720 comments

CSS Page Loader Example

Reader Delang was having trouble with the CSS Page Loader concept I posted a while ago. So I went and made up an example page. It’s very simple, and it just “fakes” actually loading something. As in, it’s not …

September 23, 20077 comments

Resizing YouTube Videos with a simple URL hack

Someone over at Digital Inspiration asked the question:

“How can I send a YouTube Video so that when the person receives it there will not be any other videos in the sidebars that can be opened.”

There is an awesome …

September 21, 20072 comments

Links of Interest

New minimalism in web interface design

You.. and me… and CSS simultaneous
Edit CSS code in Firefox and IE at the same time. Windows only.

Quick web typography tip: Give your <p> elements bottom margin.

ModalBox: easily the nicest download-modify-use …

September 20, 20072 comments

A Grunge Style CSS Menu (Free Download)

Grunge is a popular style these days. I thought I’d throw out there a fairly simple “grungy” menu for free download. Feel free to download, alter, and use however you want.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

September 20, 20073 comments

A Fresh Look for CSS-Tricks

Welcome to the new look for CSS-Tricks. I decided it was time to get down to it and give CSS-Tricks a brand new look. I hope you like it. I think it’s far nicer in both form and function than …

September 19, 200710 comments

A Non-Annoying a:visited Technique

As you may know, you can define a style for a:visited in your CSS, which will apply itself to links in visitors browsers that they have already visited. The usefulness of this is debatable, but no matter what, it’s best …

September 19, 200712 comments

Set up “Variables” for Colors in CSS

I say “variable” because CSS doesn’t natively support real variables. The debate is somewhat heated on whether it should or not. I’m not going to take a stand on that one, but there is a clever little hack bouncing around …

September 18, 20070 comments

The Best of CSS-Tricks Tutorials: Ten Free Downloadable Examples!

Welcome to CSS-Tricks! We’ve been busy trying to bring you tips, techniques, and tutorials about using Cascading Style Sheets. Along the way, we’ve written up a number of example pages showcasing various techniques. If you are new here, here is …

September 17, 20079 comments

BlogRush: Hip or Hype?

It’s a bit too early to tell, but as you may have noticed, I’ve installed it in the sidebar of this site. My hope is that it turns out to be an awesome service for both readers and webmasters alike. …

September 16, 20074 comments

Single-Line vrs. Multi-Line CSS

Steve Smith over at Ordered List has an interesting article up about how he chooses to format his CSS. Basically there are two ways to go about it, Single-Line and Multi-Line, with Multi-Line being the classic approach:

#wrapper {
width:800px;

September 15, 20074 comments

An Exploding CSS Menu

By exploding, I sort of mean “the menu blocks appear to expand vertically”, but you get the idea. The theory is that upon rollover, you can change the height and offset of an element (or width or any number of …

September 13, 20072 comments

CSSJuice.com Guest Post

Hey ya’ll,

I have a guest post up over at CSSJuice.com explaining how to set up user-selectable stylesheets. Check it out!

September 12, 20072 comments

Apple iTunes-Like CSS Menu

Developer Mark Alldritt posted a pretty nice bit of code (XCode project) for making nice Apple-Like menus in applications. I thought I would try to replicate this same idea with CSS. It worked out fairly well, check out the screenshot:…

September 10, 20073 comments

Tag Cloudish Crazy CSS Menu

OK, this is a little cheezy, but it’s just intended to be an example of something you can do with CSS. Certainly this could be adapted in any number of different ways to achieve cooler effects. The theory here is …

September 9, 20072 comments

Learning CSS/HTML, Start with Static or Dynamic?

The Graphic Design Blog asks an interesting question about advice for beginners on learning CSS/HTML: Should newbies learn static or dynamic web design?

The obvious conclusion would be ‘you gotta learn to walk before you can run’, but this …

September 7, 20076 comments

CSS Page Loader

If you have certain pages on your website that take some time to load, you may want to consider a page loader. A page loader is any kind of animation that visually communicates to a visitor that the page is …

September 6, 200712 comments

Un-bloat CSS by using multiple classes

Let’s say you need six different 100px square boxes with different characteristics:

  • Red with Border
  • Blue with Border
  • Green with Border
  • Red without Border
  • Blue without Border
  • Green without Border

You COULD create a unique class for each of these, …

September 4, 20077 comments

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, 200714 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, 20076 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, 20079 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 code using it …

July 30, 20079 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

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