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

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 the left and webmaster info on the right. Here is how you might want your HTML:

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

If you were to then give your CSS classes alignleft and … Read article

Article

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;
}

That's fine and dandy, but let's switch things up a bit in order to give us more control as well as add captions to the images. This adds a nice touch to any web article and a more professional layout … Read article

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

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