Navigate > /Stylepicker

 Dxhtml.com Homepage

Stylepicker stylesheet picker

This is a little perl script that will help you design your own stylesheet. Cascading style sheets are an easy way to separate style from html content, allowing you to control the look and feel of an entire web-site by creating a single stylesheet file.

How to use stylepicker

Don't like what you see? The first style is completely random, so it probably sucks. Click on the buttons below to change the stuff you don't like. If you want to change everything, click on the everything button.

How to use your stylesheet

If you have a style you want to keep, do the following:

  1. Select and copy the code between the horizontal rules at the bottom of this page.
  2. Paste into your favourite text editor.
  3. Save the file, call it something like:
    mystylesheet.css
    
  4. Put a reference to your stylesheet in the head of all your html documents like this:
    <head>
    <title>My cool collection of toenail clippings</title>
    <link rel="stylesheet" href="mystylesheet.css" type="text/css">
    </head>
    

Other useful stuff

The stylesheet for this page


body {
background: #000000;
color: #33FF66;
margin-left: 6%;
margin-right: 6%;
font-style: italic;
font-family: Georgia, Times, serif;
}

h1, h2, h3, h4, h5, h6 {
font-style: normal;
background: #33FF66;
color: #000000;
text-align: right;
font-weight: normal;
font-family: Georgia, Times, serif;
}

ul, dl, p, td, li, dt, dd {
background: #000000;
color: #33FF66;
font-style: italic;
line-height: 148%;
font-family: Georgia, Times, serif;
}

ul li {
list-style: square;
}

ol li {
list-style: decimal;
}

a:link, a:visited {
background: #000000;
color: #33FF66;
}

a:hover, a:active {
background: #33FF66;
color: #000000;
}

hr {
color: #33FF66;
background: #000000;
height: 7px;
}

pre, tt {
background: #000000;
color: #33FF66;
font-family: courier, monospace;
font-style: normal;
}

Valid CSS! Valid HTML4!