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.