The Common DOCTYPES

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Avatar of Chris Coyier
Chris Coyier on

Results from Anniversary Survey

I collected a bunch of data from you guys when you filled out that form to enter the 2-Year Anniversary Giveaway. I figured I’d aggregate it into some graphs, courtesy of Wufoo.…

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Removing Dotted Outline

a {
   outline: 0;
}

Be careful removing outline styles from links, as they are a usability feature. If you do, make sure to define clear focus styles.

If your problem is that the dotted outlines travel all the way …

Avatar of Chris Coyier
Chris Coyier on

Link Nudging

$("a").hover(function() {
       $(this).stop().animate({paddingLeft : "10px"},200);
},function() {
       $(this).stop().animate({paddingLeft : "0px"},200);
});

Make sure to change the selector to only target the links you want to have nudging, e.g. “#sidebar ul li a”…

Avatar of Chris Coyier
Chris Coyier on

Better Helvetica

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

Might as well use the nicest Helvetica you can……

Avatar of Chris Coyier
Chris Coyier on

Give Clickable Elements a Pointer Cursor

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}

Some elements that are clickable mysteriously don’t trigger a pointer cursor in browsers. This fixes that, and provides a default class “pointer” for applying it to other clickable things …

Avatar of Chris Coyier
Chris Coyier on

How to use @font-face in CSS

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

Without …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Run Loop on Posts of Specific Category

<?php query_posts('cat=5'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <?php the_content(); ?>
<?php endwhile; endif; ?>

If you were to use this, for example, in a left sidebar which ran before the main …

Avatar of Chris Coyier
Chris Coyier on