Back to CSS1 Reference
Here are two examples - purely to demonstrate what CSS1 can do for HTML. (You'll rue the day you got into stylesheets...) These work with Internet Explorer 5.5. YMMV.
- Example 1
Filename: something.css
BODY {
background:
navy
url(res://membg.dll/membg.gif) no-repeat fixed
100% 100%;
border: 12pt outset #0000C0;
color: silver;
font:
normal normal normal medium
120% "Trebuchet MS", sans-serif;
height: 480px;
letter-spacing: 120%;
margin: 6ex;
padding: 5%;
text-align: justify;
text-decoration: overline;
text-indent: 24pt;
width: 640px;
word-spacing: 120%
}
H1 {
background: teal;
border: 3pt double #0000C0;
color: aqua;
}
P {
background: #808080;
border: 2pt dashed #C0C0C0;
color: navy;
}
DIV {
padding: 5%;
}
DIV P {
background: none;
border: none;
color: silver;
}
DIV.1 {
background: maroon;
border: 12pt dashed red;
clear: none;
color: white;
float: left;
width: 30%
}
DIV.2 {
background: olive;
border: 12pt dashed yellow;
clear: none;
color: white;
float: right;
width: 30%
}
Filename: something.html
<HTML>
<HEAD dir="ltr" lang="en-GB">
<LINK href="something.css" rel="stylesheet" type="text/css"/>
</HEAD>
<BODY scroll="no">
<H1>Hello world!</H1>
<P>
Some body text a
Some body text bb
Some body text ccc
Some body text dddd
Some body text eeeee
Some body text ffffff
Some body text ggggggg
Some body text hhhhhhhh
Some body text iiiiiiiii
Some body text jjjjjjjjjj
Some body text kkkkkkkkkkk
Some body text llllllllllll
Some body text mmmmmmmmmmmmm
Some body text nnnnnnnnnnnnnn
Some body text ooooooooooooooo
Some body text
</P>
<DIV class="2">
<P>
DIV class=2
Some body text a
Some body text bb
Some body text ccc
Some body text dddd
Some body text eeeee
Some body text ffffff
Some body text ggggggg
Some body text hhhhhhhh
Some body text iiiiiiiii
Some body text jjjjjjjjjj
Some body text kkkkkkkkkkk
Some body text llllllllllll
Some body text mmmmmmmmmmmmm
Some body text nnnnnnnnnnnnnn
Some body text ooooooooooooooo
Some body text
</P>
</DIV>
<DIV class="1">
<P>
DIV class=1
Some body text a
Some body text bb
Some body text ccc
Some body text dddd
Some body text eeeee
Some body text ffffff
Some body text ggggggg
Some body text hhhhhhhh
Some body text iiiiiiiii
Some body text jjjjjjjjjj
Some body text kkkkkkkkkkk
Some body text llllllllllll
Some body text mmmmmmmmmmmmm
Some body text nnnnnnnnnnnnnn
Some body text ooooooooooooooo
Some body text
</P>
</DIV>
<DIV>
<P>
DIV noclass
Some body text a
Some body text bb
Some body text ccc
Some body text dddd
Some body text eeeee
Some body text ffffff
Some body text ggggggg
Some body text hhhhhhhh
Some body text iiiiiiiii
Some body text jjjjjjjjjj
Some body text kkkkkkkkkkk
Some body text llllllllllll
Some body text mmmmmmmmmmmmm
Some body text nnnnnnnnnnnnnn
Some body text ooooooooooooooo
Some body text
</P>
</DIV>
</BODY>
</HTML>
- Example 2
Filename: stylesheet.css
/* this is tacky, so we'll leave other media alone... ;-) */
@media screen {
/* top right bottom left */
BODY {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(50%,50%,0%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(100%,100%,0%);
color: rgb(0,0,100%);
}
H1 {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dashed rgb(50%,0,50%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(100%,0%,100%);
color: rgb(0,100%,0%);
}
P {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(0%,50%,50%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(0%,100%,100%);
color: rgb(100%,0%,0%);
}
DIV.chapter P:first-letter {
text-transform: uppercase;
font-family: serif;
font-size: 200%;
font-weight: bold;
font-style: italic;
/* margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(67%,33%,0);
padding: 6pt 6pt 6pt 6pt;
*/ background: rgb(33%,67%,100%);
color: rgb(50%,100%,0%);
}
DIV.chapter P:first-line {
/* margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(0,67%,33%);
padding: 6pt 6pt 6pt 6pt;
*/ background: rgb(100%,33%,67%);
color: rgb(0%,50%,100%);
}
SPAN {
/* margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(33%,0,67%);
padding: 6pt 6pt 6pt 6pt;
*/ background: rgb(67%,100%,33%);
color: rgb(100%,0%,50%);
}
OL {
margin: 6pt 6pt 6pt 6pt;
border: 6pt double rgb(100%,0%,0);
padding: 6pt 6pt 6pt 2ex;
background: rgb(25%,100%,75%);
color: rgb(25%,50%,25%);
}
LI {
margin: 6pt 6pt 6pt 6pt;
border: 6pt dotted rgb(0%,100%,0%);
padding: 6pt 6pt 6pt 6pt;
background: rgb(75%,25%,100%);
color: rgb(25%,25%,50%);
}
A {
font-family: cursive;
}
A:link {
background: white;
color: blue;
}
A:visited {
background: white;
color: magenta;
}
A:hover {
cursor: help;
border: 1ex dotted rgb(100%,0,0);
background: yellow;
color: red;
}
A:active {
cursor: wait;
border: 6pt solid black;
background: red;
color: yellow;
}
Filename: uses_stylesheet.html
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>The dangers of stylesheets</title>
</head>
<body>
<div class="chapter">
<h1>
The first "Heading 1"
</h1>
<p>The first paragraph.
It goes on a bit. Most of it's rubbish, however.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
<span>Some text inside a SPAN.</span>
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
</p>
<p>This is the second paragraph.
<ol>
some spare text
<p>para inside list</p>
<li>The first entry in an ordered list.
It goes on a bit. Most of it's rubbish, however.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
<span>Some text inside a SPAN.</span>
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
<p>
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
Wibble. Wibble. Wibble. Wibble. Wibble. Wibble. Wibble.
</p>
Wibble. Wibble. Wibble.</li>
<li>Uh, second one.</li>
<li>Third.</li>
<li>4th.</li>
</ol>
<h1><a name=#here>Some links (this is an H1, too)</a></h1>
<p align="center">Click <a href=#here>this</a> link.</p>
</div>
</body>
</html>
For the record, I have to admit that I use Example 2 as IE5's home page, just to wake me up...
|