A miscellany of items pertainging to Cascading Style Sheets (CSS).

Here are some basic syntax rules for CSS. [Ref http://www.w3.org/TR/REC-CSS2/syndata.html#q4]

• CSS style sheets are case insensitive. Note that element name are case sensitive in XML.
• Identifiers (elements, classes, and ID) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). EG: The identifier B&W? may be written as B\&W\? or B\26 W\3F.
• A backslash (\) character indicates three types of character escapes.
1. Inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash (\). EG: The following two selectors are exactly the same:
A[TITLE="a not s\
o very long title"] {/*...*/}
A[TITLE="a not so very long title"] {/*...*/}

2. A backslash cancels the meaning of special CSS characters. Any character (except a hexadecimal digit) can be escaped with a backslash to remove its special meaning. EG: "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.
3. Backslash escapes allow authors to refer to characters they can't easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits ([0..9A..F]), which stand for the ISO 10646 character with that number. If a digit or letter follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:
1. with a space (or other whitespace character): \26 B (&B)
2. by providing exactly 6 hexadecimal digits: \000026B (&B)
In fact, these two methods may be combined. Only one whitespace character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must itself either be escaped or doubled.
• Backslash escapes are always considered to be part of an identifier or a string (i.e., \7B is not punctuation, even though { is, and \32 is allowed at the start of a class name, even though 2 is not).

Here are ways to do the same thing with different browsers

Item IE4+ NN4 NS6
W3C DOM
Move an item horizontally. .style.pixelLeft
.style.left
no .style.left
Move an item vertically. .style.pixelTop
.style.top
no .style.top
Hide an item .style.visibility.hidden no .style.visibility.hidden
Show an item
(Note the initial value is "".)
.style.visibility.visible
no .style.visibility.visible

Quickly apply CSS to an object with code.

EG:

<head>
<style>.hilite{color:#00f;}</style>

<body>
<ul>
<li onmouseover="this.className='HILITE'"
onmouseout ="this.className=''">Blue me.</li>
</ul>
</body>
• Blue me.

IE: Add new rules to a style sheet with this syntax.

EG:

document.styleSheets[i].addRule(newRule, newRuleValue)
document.styleSheets[i].addRule(.myclass, "color:red")

IE: You can turn sets of styles on and off on a page:

• Place a set of styles in a <style> tag.
• Toggle its DISABLED attribute between true and false.
EG:
document.styleSheets[i].disabled = true

You can do some stuff with just headings but you can do funkier stuff with headings if you also have them enclose a span.

EG:

<style type="text/css">
h1.local {
text-align: center;
font-size: 3em;
}
h1 span {
color: #0F0;
background: #040;
border: solid 1px #0E0;
}
</style>
<h1>Regular</h1>
<h1 class="local">With Class</h1>
<h1><span>With Span</span></h1>
<h1 class="local"><span>With Class and Span</span></h1>

# With Class and Span

You can impersonate "blog" style buttons with this CSS:

/* EG: span.button span.buttonleft CSS /span.buttonleft span.buttonright 2.0 /span.buttonright /span.button */

.btn {
background: #fff;
font-family: Geneva, Vera, Arial, Helvetica, sans-serif;
font-size: 0.6em;
font-variant : small-caps;
border : 1px solid #aaa;
}
.btnLeft {
color: #ffffff;
background: #ff6600;
}
.btnRight {
color: #ffffff;
background: #886;
}


Here is how that CSS might be implemented:

<span class="btn"><span class="btnLeft"> RSS </span><span class="btnRight> &nbsp;2.0
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>

To make a navigation link show differently when the current page is on that link, try something like this:

<a href="A.htm" id="navA">A</a> --
<a href="B.htm" id="navB">B</htm> --
<a href="C.htm" id="navC">C</htm>
• Give the body of each page an id different from the other pages:
<body id="A">...
<body id="B">...
<body id="C">...
• Assume each page has this CSS:
body#A a#navA,
body#B a#navB,
body#C a#navC{
color:#000;
text-decoration:none;}
/* or whatever effect you'd like */
• Result: When you are on page B, then the nav links look like this: A B C.
• For a fancier trick: instead of using hand-coding "A", "B", etc., put it in via some server side variable that is unique to the page. EG: In ASP you could use something like Request.ServerVariables("URL") since the URL is unique. You'd have to use this server variable to make the CSS too.
• This ideas was from http://www.hicksdesign.co.uk/journal/271/highlighting-current-page-with-css.

To make a drop shadow on an element (like <img> or <div>), see CSS Drop Shadows [§].

CSS for "spoilers".

I saw this simple technique somewhere recently. The idea is that if you are going to post something that is a spoiler, then warn the readers and then change the CSS for that section of text so that the background and the text are the same color. If someone want to read the spoiler, the merely have to highlight the section.

EG: "The Wizard of Oz is a wonderful movie. However (SPOILER coming) in the end it turns out that the Wizard of Oz is not a wizard at all but a man who used to be a balloonist circus but when he landed in Oz he ended up using fancy machines to make the people think he was a mighty wizard.

Page Modified: (Hand noted: ) (Auto noted: )