Skip to main content
CSS is fun and cool and I like it.
Article

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 your navigation. If they are trying to print your webpage they are trying to print the content, so give it to them.

Here is the theory:

#header, #navigation, #footer, .any, .random, .junk, .on, .your, .page, .that, .shouldnt, .print {
  display: 
Read article
Article

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 you might just drown while sifting through everything.

Don't worry though, we got you covered. Here is a entirely CSS template for a simple website that you can download, tweak, revamp, whatever you want! We're calling it Homebase, because … Read article

Article

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 that way that you absolutely can't change, you can access it with:

[id='1800number_box'] {
 /* does work */
}

#1800number_box {
  /* doesn't work */
}

/* Or, you can "escape" the number, which looks funky but works: */
#\31 
Read article
Article

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 images to a single element makes quick work of the problem. Assign an image that positions to the left, a repeading middle image, and an image that positions to the right, like so:

li.expanding {
	background: url('left.jpg') top left no-repeat,
			
Read article
Article

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 by putting it into it's own HTML file (like "menu.html") and including it on your pages with some kind of simple include statement like this PHP snippet:

<?php include_once("menu.html"); ?>

Now you need to add a class so you can … Read article

Article

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 exact size of the screen, you know the exact browser, you know how fonts will look in that browser, you know what the screen is like and all the capabilities. That is so very different from web design, which is … Read article

Article

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" href="default.css">

That is a tried and true method and supports the whole spectrum of browsers from old and ancient to hip and modern. But let's say you grown tired of the old and ancient... You don't want your page to be completely unusable, but you would rather it look completely non-styled than broken and clumsy. You could use an … Read article

Article

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 want to apply styling to those boxes with images. If you want to use an image just on the top of the box, you can apply a background-image to the div and set it's position to be top left, top … Read article

Article

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, you just use the <html> tag to start your page and everything works just fine. As things get more complicated, and you forget to use a "real" declaration, you may notice things not behaving as you intended. For example, using … Read article

icon-link icon-logo-star icon-search icon-star