docs:programming:css:css_notes [hartungdesign.net wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== CSS (Cascading Style Sheets) ======
This page is for things that I commonly forget regarding CSS.

===== multiple classes =====
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.
<code>
<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>
</code>

If you want to define a specific css style that only pertains to items having both class names, you can do this:
<code>
.warning.urgent{background: silver;}
</code>

===== adjacent sibling selector =====
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.
<code>
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 */
</code>

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

===== vertical-align =====
<code>
Values:
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
</code>

===== white-space =====
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.
<code>
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 */	
</code>

===== image beside text as a link =====
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.