CSS (Cascading Style Sheets)

This page is for things that I commonly forget regarding CSS.

An HTML entity can have more than one class if the class names are separated by a space. ID selectors on the other hand can only be one.

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>

If you want to define a specific css style that only pertains to items having both class names, you can do this:

.warning.urgent{background: silver;}

This allows the author to select an element that is the following adjacent sibling of another element. An explanation of this case would be if you want paragraphs spaced a certain way, but for any paragraph following a heading to have no top margin.

table + p {margin-top: 2.5em;} /* any paragraph that follows a table will have a top margin of 2.5em */
h1 + * {margin-top: 0;} /* make anything that follows an h1 have no top margin */

p {font-family: Helvetica, Arial, sans-serif;}
li {font-family: Times, TimesNR, "New Century Schoolbook", serif;}

Values:
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

White space issues exist between browsers. Not all browsers fully implement white-space standards, and some have adopted features not yet adopted as a standard. Some of those browser-specific features are listed in the example below.

Values:
normal | nowrap | pre | pre-wrap | pre-line | inherit

example code for multiple browsers:

/* note that IE Mac is still broken */		
/*white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */	

Instead of using an img tag with an anchor tag (a), use css to pad a block with a background image, then only have the link text in the html code.