Style Sheet Examples
|
Several examples of style sheet effects are demonstrated.
|
Setting general defaults, e.g. text and background colors, and fonts.
BODY {
background: #ffffff;
color: #000000;
font-family: Arial, Verdana, Helvetica;
}
Headers
Setting header style is a simple start to creating an identifiable
style.
H1 {
font-family: "Copperplate Gothic Bold";
background: transparent;
color: #993300;
text-align: center;
}
H2, H3, H4, H5 {
background: transparent;
color: #993300;
margin-top: 4%;
text-align: center;
}
Using DIV to create a new tag (almost..)
Every page should have an introductory paragraph, i.e. an 'abstract'.
See above, just under the main heading.
Body.Plain Div.Abstract,
Body.Plain P.Abstract {
background: #cccc99;
color: #333300;
border: white;
padding: 3%;
font-family: Times, Verdana;
}
Navigation Menu
Gold Helvetica/Verdana on a navy background.
Turn off links underlining to save space and reduce noise/clutter.
It's a menu so the links are obvious enough...
Also, 'visited' is removed as irrelevant in this context.
TH.Nav { background: #0000cc;
color: #ff9900;
}
TH.Menu { background: #3366cc;
color: #ff9900;
}
A:hover { color: #ff6600; }
A.Menu:hover { color: #ff6600; }
A.HoMe:hover { color: #ff6600; }
A.Menu { background: transparent;
color: #ffcc33;
font-family: Verdana,
Helvetica, Arial;
font-size: smaller;
text-decoration: none;
}
A.Menu:visited { background: transparent;
color: #ffcc99; }
A.HoMe { background: transparent;
color: #ffcc33;
font-family: Verdana,
Helvetica, Arial;
text-decoration: none;
}
A.HoMe:visited { background: transparent;
color: #ffcc99; }
eXaMPle Screen
The ht processor
translates XMP tags to PRE inside bordered table cell.
TH.Xmp { background: #eeeeee;
color: #330066;
font-family: courier;
font-weight: normal;
}
Look-up Table
Resource tables, link in left cell and annotation in the right cell.
TH.LuT { background: #cccccc;
color: #000000;
}
TD.LuT { background: #ffffcc;
color: #000000;
font-size: 85%;
}
Information Panel
Emphasises a block of stuff.
This is The WDVL.
TH.Info, TD.Info {
background: #ffffcc;
color: #660000;
font-family: "Comic Sans MS",
Cursive, Verdana;
font-size: smaller;
}
Div.Info, P.Info {
background: #ffff99;
color: #990033;
text-align: left;
padding: 2%;
font-family: "Comic Sans MS",
Cursive, Verdana;
font-size: 85%;
}
Div.Info A { background: transparent;
color: #ff6600; }
HiLite
Just like those yellow markers...
.HL {
background: #ffff99;
color: #000000;
}
TD.HL {
background: #ccffff;
color: #000000;
}
Margins
Plain pages have side margins to reduce the text width,
which is a strain to read if too wide.
Div.Margins {
width: 512px;
text-align: center;
}
TD.Plain {
background: #ffffcc;
color: #000033;
}
Name/Value Tables
| Type | Meaning |
|---|
| Name | An identifier |
|---|
| Value | Its contents |
|---|
.Type {
background: #cccccc;
color: #660000;
}
.Name {
background: #eeeeee;
color: #660000;
vertical-align: top;
text-align: right;
}
.Value {
background: #ffffee;
color: #000066;
}
Drop
sets off a word or phrase like this.
.Drop { background: #333366;
color: #ffcc33;
font-family: "Copperplate Gothic Light",
Helvetica, Verdana, Arial;
}
Buttons
See the menu bar at bottom.
A.Button:hover { color: #ff6600; }
A.Button{
text-decoration: none;
color: #003366;
background: #ffcc66;
}
.Button {
font-size: 9pt;
text-align: center;
text-decoration: none;
color: #003366;
background: #ffcc66;
margin-bottom: 2pt;
border-top: 2px solid #ffff99;
border-left: 2px solid #ffff99;
border-right: 2px solid #cc9933;
border-bottom: 2px solid #cc9933;
font-family: Verdana, Arial,
"Comic Sans MS";
}
Banners
See the banner right at the top of the window.
.Banner {
width: 468;
font-size: 12pt;
text-align: center;
text-decoration: none;
color: #003366;
background: #ffcc66;
border-top: 4px solid #ffff99;
border-left: 4px solid #ffff99;
border-right: 4px solid #cc9933;
border-bottom: 4px solid #cc9933;
font-family: Verdana, Arial,
"Comic Sans MS";
}
Nova Black
Golden Brown on a black background.
TD.Nova,
Body.Nova { background: #000000;
font-family: "Times New Roman";
font-weight: light;
color: #ffcc00;
}
Body.Nova A.Button{ background: gold;
color: #003366; }
Body.Nova A.Banner{ background: transparent;
color: #003366; }
Body.Nova A { background: transparent;
text-decoration: none;
color: #ffd766; }
Body.Nova H1,
Body.Nova H2,
Body.Nova H3,
Body.Nova H4 {
background: transparent;
color: white;
margin-top: 4%;
text-align: center;
filter: Blur(Add=1, Direction=0, Strength=8);
}
Body.Nova Div.Abstract {
background: #000000;
color: #ffffff;
font-family: Times, Verdana;
}
Body.Nova A.Abstract {
background: transparent;
color: #ffeedd;
}
Body.Nova TH.LuT { background: black;
color: #ffff99;
}
Body.Nova TD.LuT { background: navy;
color: #ffff99;
}
|
