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]


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>
</head>

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

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:

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;
  padding: 6px;
  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>

Regular

With Class

With Span

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;
	padding: 1px;
	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;
	padding: 2px;
}
.btnRight {
	color: #ffffff;
	background: #886;
	padding: 2px;
}

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>

RSS  2.0         


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


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: )