|
|
Help > Pages > Cascading Style Sheet Examples | email help@skyBuilders.com |
/* skyBuilders CSS Template copyright (c) 2002, skyBuilders.com -->
/* This is the base stylesheet. Copy and modify. */
/* list of all types - set default values here, override later */
a, address, blockquote, body, cite, code, dd, del, dfn,
div, dl, dt, em, form, h1, h2, h3, h4, h5, h6, iframe, img, kbd,
li, object, ol, p, q, samp, small, span, strong, sub, sup, ul, var,
applet, big, center, dir, font, hr, menu, pre,
abbr, acronym, bdo, button, fieldset, ins, label {
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
text-decoration: none;
border-color: #cccccc;
border-style: none;
}
body {
font-size: .9em;
font-weight: normal;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Times, Times New Roman, serif;
font-size-adjust: .58;
margin-top: 1em;
margin-right: 8%;
margin-bottom: 2em;
margin-left: 10%;
min-width: 100px;
max-width: 500px; /* controls length of lines */
}
p, blockquote, dir, menu {
/* inherit from body */
}
b {
font-weight: bold;
}
i {
font-style: italic;
}
strong {
font-style: normal;
font-weight: bold;
/* color: #ffff33;
background: #333333; */
}
em {
font-style: normal;
font-weight: italic;
/* color: #ffff33;
background: #333333; */
}
em strong, strong em {
font-style: normal;
font-weight: bolder;
/* color: #ffff33;
background: #333333; */
}
/* links */
a:link {
text-decoration: underline;
font-weight: bold;
/* color: #6666ff;
background: #cccccc; */
}
a:visited {
text-decoration: underline;
font-weight: bold;
/* color: #ff66ff;
background: #cccccc; */
}
a:active {
text-decoration: underline;
font-weight: bold;
/* color: #ff6666;
background: #cccccc; */
}
a:hover {
text-decoration: underline;
font-weight: bold;
color: #66ff66;
/* background: #cccccc; */
}
a.offsite {
text-decoration: none;
font-weight: normal;
color: #0000ff;
background: #cccccc;
}
/* headers */
h1 {
font-family: Helvetica, Arial, sans-serif;
font-size-adjust: .53;
font-size: 2em;
font-weight: 400;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #3333ff;
margin-top: 2em;
margin-bottom: .33em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
h2 {
font-family: Helvetica, Arial, sans-serif;
font-size-adjust: .53;
font-size: 1.75em;
font-weight: 400;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #3333ff;
margin-top: 1.75em;
margin-bottom: .33em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
h3 {
font-family: Helvetica, Arial, sans-serif;
font-size-adjust: .53;
font-size: 1.58em;
font-weight: 400;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #3333ff;
margin-top: 1.58em;
margin-bottom: .33em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
h4 {
font-family: Helvetica, Arial, sans-serif;
font-size-adjust: .53;
font-size: 1.33em;
font-weight: 500;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #3333ff;
margin-top: 1.33em;
margin-bottom: .33em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
h5 {
font-family: Helvetica, Arial, sans-serif;
font-size-adjust: .53;
font-size: 1.17em;
font-weight: 600;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #3333ff;
margin-top: 1.17em;
margin-bottom: .33em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
h6 {
font-family: Helvetica, Arial, sans-serif;
font-size-adjust: .53;
font-size: 1em;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #3333ff;
margin-top: 1em;
margin-bottom: .33em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
/* lists */
ul, ol, dl, dd, li {
font-family: Helvetica, Arial, sans-serif;
}
dt {
font-family: Helvetica, Arial, sans-serif;
font-size-adjust: .53;
font-size: 1.17em;
font-weight: 600;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
ol li {
list-style-type: decimal;
}
ol ol li {
list-style-type: upper-alpha;
}
ol ol ol li {
list-style-type: upper-roman;
}
ol ol ol ol li {
list-style-type: lower-alpha;
}
ol ol ol ol ol li {
list-style-type: lower-roman;
}
/* tables */
table, tbody, tr, td {
font-size: 1em;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Times, Times New Roman, serif;
font-size-adjust: .58;
}
th {
vertical-align: baseline;
font-size: 1em;
font-weight: bold;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Times, Times New Roman, serif;
font-size-adjust: .53;
}
tfoot, thead {
font-size: 1em;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Times, Times New Roman, serif;
font-size-adjust: .53;
}
div {
font-size: 1em;
font-weight: normal;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Times, Times New Roman, serif;
font-size-adjust: .58;
margin-top: 1em;
margin-right: 8%;
margin-bottom: 2em;
margin-left: 10%;
width: 100%;
}
span {
color: #000000;
font-size: 1em;
font-weight: normal;
font-family: Times, Times New Roman, serif;
font-size-adjust: .58;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
img {
float: right;
clear: both;
}
hr {
margin-top: .75em;
margin-bottom: .75em;
border-top-width: 0;
border-bottom: 0;
padding-top: 0;
padding-bottom: 0;
color: #999999;
height: 1px;
}
/* deprecated, use div align="center" */
center {
}
/* deprecated, use body, p, div, and span with classes, ids */
font {
}
/* HTML extensions - text-level elements */
abbrev {
font-variant: small-caps;
letter-spacing: 0.1em;
}
acronym {
font-variant: small-caps;
letter-spacing: 0.1em;
}
address {
font-style: normal;
letter-spacing: .1em;
margin-top: 1.58em;
margin-bottom: 1.58em;
border-top-width: 0;
border-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
cite {
font-style: italic;
}
code {
font-family: Courier, Courier New, monospace;
}
del {
text-decoration: line-through;
background: #990000;
}
dfn {
font-style: italic;
}
ins {
text-decoration: underline;
background: #000099;
}
kbd {
font-style: bold;
font-family: Courier, Courier New, monospace;
}
q {
font-style: italic;
}
var {
font-style: bold;
font-style: italic;
}
/* classes */
.author {
text-transform: capitalize;
font-variant: small-caps;
letter-spacing: 0.1em;
font-size-adjust: .53;
font-size: 1.58em;
font-weight: 400;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
color: #cccccc;
margin-top: 1.58em;
margin-bottom: .33em;
}
.box {
border-color: #999999;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-top-width: 1;
border-right: 1;
border-bottom: 1;
border-left: 1;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: .5em;
width: auto;
}
.byline {
text-transform: capitalize;
font-variant: small-caps;
letter-spacing: 0.1em;
font-size-adjust: .53;
font-size: 1.0em;
font-weight: 400;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
color: #cccccc;
}
.callout {
width: 100%;
font-size: 1.5em;
color: #3333ff;
border-color: #999999;
margin-top: 1.5em;
margin-right: 5em;
margin-bottom: 1.5em;
margin-left: 5em;
border-top-width: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: .5em;
}
.calloutLeft {
width: 30%;
float: left;
font-size: 1.5em;
color: #3333ff;
border-color: #999999;
margin-top: .5em;
margin-right: .5em;
margin-bottom: .5em;
margin-left: .5em; /* negative value to outdent */
border-top-width: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: .5em;
}
.calloutRight {
width: 30%;
float: right;
font-size: 1.5em;
color: #3333ff;
border-color: #999999;
margin-top: .5em;
margin-right: .5em; /* negative value to outdent */
margin-bottom: .5em;
margin-left: .5em;
border-top-width: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: .5em;
}
.dateline {
text-transform: capitalize;
font-variant: small-caps;
letter-spacing: 0.1em;
font-size-adjust: .53;
font-size: 1.0em;
font-weight: 400;
font-style: italic;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
color: #cccccc;
}
.index {
vertical-align: super;
font-size: .5em;
font-style: normal;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
}
.linksLeft {
width: 30%;
float: left;
border-color: #999999;
margin-top: .5em;
margin-right: .5em;
margin-bottom: .5em;
margin-left: .5em; /* negative value to outdent */
border-top-width: 1;
border-right: 1;
border-bottom: 1;
border-left: 1;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: .5em;
}
.linksLeft a:link, a:visited, a:active {
color: #6666ff;
}
.linksLeft a:hover {
color: #0000ff;
font-weight: bold;
}
.linksRight {
width: 30%;
float: right;
border-color: #999999;
margin-top: .5em;
margin-right: .5em; /* negative value to outdent */
margin-bottom: .5em;
margin-left: .5em;
border-top-width: 1;
border-right: 1;
border-bottom: 1;
border-left: 1;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: .5em;
}
.linksRight a:link, a:visited, a:active {
color: #6666ff;
}
.linksRight a:hover {
color: #0000ff;
font-weight: bold;
}
.note {
font-style: italic;
}
.title {
font-size: 2.5em;
font-style: italic;
font-weight: 400;
font-style: italic;
font-family: cursive;
font-size-adjust: .53;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #000066;
margin-top: 2em;
margin-bottom: .33em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
.subhead {
font-size: 1.5em;
font-style: italic;
font-weight: 400;
font-style: italic;
font-family: cursive;
font-size-adjust: .53;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #000066;
margin-top: .75em;
margin-bottom: .75em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
.subtitle {
font-size: 1.5em;
font-style: italic;
font-weight: 400;
font-style: italic;
font-family: cursive;
font-size-adjust: .53;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
color: #000033;
margin-top: .75em;
margin-bottom: .75em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
.warning {
text-transform: none;
font-style: normal;
font-weight: bolder;
background: #ffff00;
color: #000000;
}
/* pseudo-elements */
p.firstPara: first-letter {
font-size: 4em;
font-family: Helvetica, Arial, sans-serif;
float: left;
}
p.firstPara: first-line {
text-transform: uppercase;
}
/* ids */
#colophon {
display: none;
}
/* contextual child selector */
div > p:first-child, body > p:first-child, td > p:first-child {
margin-top: .75em;
margin-bottom: .75em;
border-top-width: 0;
border-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
/* sibling selectors for following paragraphs */
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, div + p {
margin-top: .75em;
margin-bottom: .75em;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom: 0;
}
/* indent first lines on paragraphs preceded by paragraphs */
p + p {
text-indent: 2em;
margin-top: .75em;
margin-bottom: .75em;
border-top-width: 0;
border-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
/* outdented first line (negative indent) */
/*
p.outdent {
text-indent: -1em;
margin-top: .75em;
margin-bottom: .75em;
border-top-width: 0;
border-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
*/
Copyright © 2002 skyBuilders.com, Inc.
77 Huron Avenue, Cambridge, MA 02138 617-876-5680