Cheat Sheet: CSS Properties

Let’s review some of the most common CSS properties and their shorthand versions.

Typography

Fonts should be specified as a “stack” of multiple fonts: this provides fallbacks if the first font is not available to the user. Make sure to put quotation marks (single or double) around multi-word font names, and to end the font stack with an appropriate generic keyword (serif, sans-serif, monospace). If you put the page’s primary font on the body tag, nested elements like paragraphs, lists, etc. will inherit the font without you having to specific it again:

body {font-family:"Helvetica Neue", helvetica, arial, sans-serif;}

body blockquote {font-family:georgia, "Times New Roman", times, serif;}

body code {font-family: monospace;} /* code samples on this site use this rule along with background-color:yellow; */

Set type size and leading:

body p {font-size:12px; line-height:15px;}

You’re welcome to use the shorthand font property, but it’s fairly picky about the minimum properties:

body p {font: 12px georgia, "Times New Roman", times, serif; } /*  "font size font-family" is the fewest properties you can declare with the font shorthand; otherwise the whole line gets ignored */

We probably also want to specify a line-height; to do that, use a slash after the font-size and put your line-height there:

body p {font: 12px/15px georgia, "Times New Roman", times, serif;}

If you want to add all the other possible options, they need to come before the mandatory settings:

body p {font: italic small-caps bold 12px/15px georgia, "Times New Roman", times, serif; } /* all the fixins: font-style, font-variant, font-weight, font-size, line-height, font-family */

Some other typographic properties:

p em {font-style:italic;} /* a little redundant: browsers tend to italicize the emphasis tag by themselves */
p strong {font-weight:bold;} /* a little redundant: browsers tend to bold the strong tag by themselves */
span.caps {text-transform:uppercase; letter-spacing:1px; } /* better method for small-caps than using font-variant:small-caps */

Don’t forget you can use the normal value to override previous bold/italic settings (or the defaults):

p strong {font-weigh:normal; color:red;} /* in this design a color change stands in for bold */

Realign the text of an element (only works on block-level elements):

h2 {text-align: center;}
p.caption {text-align:right;}

Indent the first line of an element:

article p {text-indent:20px; margin:0;} /* NB: In classical book typography, you would not also add margins between paragraphs;  text-indent is enough to signal a new paragraph. */

A large negative text-indent is often used to hide the text of an element while still applying other properties to it (which can’t be done using display:none;). This is the basis of the classic “image replacement” technique, where text content is hidden and replaced with a (background) image:

h1#logo {text-indent:-9999px; background: white url(logo.png) no-repeat 0 0; width:200px; height:100px; }

The Box Model

The box model can be confusing, but it comes down to two fundamental ideas. First, margin creates space between elements, while padding creates space inside elements. The difference is a lot more obvious when an element has a background, a border, or both.

You can specify the values on particular sides individually:

div#sidebar {margin-top:20px; margin-bottom: 10px; padding-top:20px; padding-bottom: 10px;}

Or use the margin and padding shorthands. Use an analog clock as a reminder of the order (top right bottom left)

div#sidebar {margin: 20px 10px 5px 7px;} /* margins-top: 20px, margin-right:10px, margin-bottom:5px, margin-left: 7px */

The other shorthands:

div#sidebar {margin:20px 10px;} /* margin-top AND margin-bottom are 20px, margin-left AND margin-right are 10px */
div#sidebar {margin:12px 7px 8px;} /* margin-top is 12px, margin-left AND margin-right are 7px, margin-bottom is 8px; */

So here’s how we would apply a gray background to blockquotes, inset the type inside that gray box by 5px, and then inset the whole thing by 20px on either side from its container’s edges:

blockquote {margin: 0 20px 0 20px; padding:5px; background-color:gray;}

The second big idea behind the box model: margin and padding both get added to any width and height settings you have specified, which is a little unintuitive.

div#sidebar {width:200px; padding:20px; margin:20px 10px; }/* takes up 260px of horizontal space */
nav  {height:50px; padding:10px 20px; margin-bottom:20px; }/* takes up 90px of vertical space */

Lists

Unordered lists (ul) and ordered lists (ol) both have list items (<li>) nested inside them. By default, browsers add bullets to unordered lists and sequential numbers to ordered lists.

Traditionally the ul has been used for all sorts of text content that needs to be grouped together but doesn’t involve running text (as in a paragraph). A set of navigation links are the most common example, and we can use CSS to style them any way we want. (NB: list-style is technically shorthand for list-style-type, list-style-position, and list-style-image, but it’s rare to need those three properties on their own).

nav ul {list-style:none; } /* remove bullets *
#main ul {list-style:disc; } /* change bullet style from solid circle to disc */

Borders

Borders are useful both to create visual boxes and also to create horizontal or vertical lines. Here’s we put borders on all four sides of the element:

div#sidebar {border-width: 2px; border-color:gray; border-style: solid;}

The shorthand below is useful, especially when applying a border to just one side (border-top, border-right, etc.). Remember to always use the sequence border-weight, border-style, border-color:

div.sidebar {border: 5px solid gray;} /* put a border around the whole sidebar */
div.sidebar a {border-bottom: 1px dotted blue;} /* underline links inside the sidebar */

Backgrounds

When applying background colors, it’s simplest to use the background-color property on its own

div#sidebar {background-color:gray;}

But when applying a background image, I recommend the background shorthand. Include all these elements and don’t change the order: background-color, background-image, background-repeat, background-attachment, background-position. Note that transparent is a legitimate and useful value for background-color. background-position requires horizontal and vertical values (e.g. 2px 5px, left top, center center, 30% 50%, etc. And finally, background-attachment can be scroll (the default) or fixed.

section#main {background: transparent url(images/pattern.png) repeat-x left top;}