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.

  1. 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>
    
  2. 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...

Log in or registerto write something here or to contact authors.