Style Sheets: Template Source Code :: Tutorials

Style Sheets: 'Core CSS' Source Code

Below is the Actual Style Sheet

Notice that Helvetica and Arial are defined in addition to sans-serif, as in 'Arial','Helvetica',sans-serif. This is for support with various operating systems. Arial is generally found on most systems but not so common on the MacIntosh which uses Helvetica.
Helvetica and Arial can generally be swapped depending on your own rendering tastes, but both are provided for support on both platforms. As a last option sans-serif is defined, a default browser font similar in type to the prior two desired font types. If you would like to specify a serif font you would use: 'Times New Roman','Times',serif. For a fixed width font use: 'Courier New','Courier',monospace.
You should note, however, that the sans-serif, serif, and monospace fonts are generally unique to each browser. These are fall back-fonts, provided within the browser itself, should the previous font definitions not be available from the computer's installed font sets. (skip code)
/* =============================================================================
       'Core CSS'    Typical CSS formatting of all HTML 4.0+ elements.

This style sheet has been especially designed to be compatible with the largest
number of browsers possible while giving the definitions needed for higher CSS
support. Some definitions recommended by W3C and others have been removed due to
poor, or incompatible, support in some browsers, mostly versions of Navigator 4
(N4). The values used in this 'original' file are what are considered defaults.

Each tag is presented in the following manner for consistency and ease of use.
[Note: For N4 support each tag must have its own independent definition.]

TAGNAME {
  O - object: overall characteristics (These should be left as is, if defined.)
  R - render: margin, padding, border, spacing, positioning (Adjust as needed.)
  D - display: font, size, decoration, colors (Adjust as needed.)
}

Be sure to test any changes you make with a number of operating systems,
browsers, and versions of both before implementing the changes. If you decide to
set margins you should only be setting them to zero.

Items to note in regards to N4: bolder and smaller is unsupported, setting
margins for most items will add to the current settings rather than reset them.
Table footers are rendered where they are to be placed in the code (after the
head), rather than after the body as defined in the HTML 4 specs.

If using a reference to a background image, use an absolute or full reference
rather than a local, relative reference. There is mixed support for relative CSS
references. Use of ./ or ../ may be relative to the CSS file's location as with
Explorer, or may be relative to the HTML document as with Navigator.

## All comments are provided for development and can be removed for site use. ##
============================================================================= */

/* BIDIRECTIONAL SETTINGS (Do Not Change This Section) ====================== */
bdo[dir="rtl"] {
	/* 0 */
	direction: rtl;
	unicode-bidi: bidi-override;
}
bdo[dir="ltr"] {
	/* 0 */
	direction: ltr;
	unicode-bidi: bidi-override;
}
*[dir="rtl"] {
	/* 0 */
	direction: rtl;
	unicode-bidi: embed;
}
*[dir="ltr"] {
	/* 0 */
	direction: ltr;
	unicode-bidi: embed;
}


/* VISUAL CHARACTERISTICS =================================================== */

/* Overall Structure -------------------------------------------------------- */
* { /* Sets all document elements to use common formatting */
	font-family: 'Arial','Helvetica',sans-serif;
}
head {
	display: none;
}
body {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px;
	padding: 8px;
	/* D */
	background-color: #ffffff;
	color: #000000;
}
frame {
	/* 0 */
	unicode-bidi: embed;
	display: block;
}
frameset {
	/* 0 */
	unicode-bidi: embed;
	display: block;
}
iframe {
	/* 0 */
	unicode-bidi: embed;
	display: block;
}
noframes {
	/* 0 */
	unicode-bidi: embed;
	display: block;
}
noscript {
	/* 0 */
	unicode-bidi: embed;
	display: run-in;
}
object {
	/* 0 */
	unicode-bidi: embed;
	display: run-in;
}
applet {
	/* 0 */
	unicode-bidi: embed;
	display: run-in;
}

/* Headers, Best Defined in Typeset (em) Font Sizes ------------------------- */
h1 {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	/* margin: 0px; */ /* Optional */
	padding: 1px;
	font-size: 1.4em;
	font-weight: 900;
}
h2 {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px; /* Optional */
	padding: 1px;
	font-size: 1.2em;
	font-weight: 900;
}
h3 {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px; /* Optional */
	padding: 1px;
	font-size: 1.1em;
	font-weight: 900;
}
h4 {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px; /* Optional */
	padding: 1px;
	font-size: 1em;
	font-weight: 900;
}
h5 {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px; /* Optional */
	padding: 1px;
	font-size: 0.93em;
	font-weight: 900;
}
h6 {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px; /* Optional */
	padding: 1px;
	font-size: 0.86em;
	font-weight: 900;
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Verdana','Arial','Helvetica',sans-serif;
}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *{
	font-family: 'Verdana','Arial','Helvetica',sans-serif;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a[name]{
	text-decoration: none; /* corrects hover for some browsers */
	/* May also have to set a text color here to complete correction. */
}

/* Tables ------------------------------------------------------------------- */
table {
	/* 0 */
	unicode-bidi: embed;
	display: table;
	/* R */
	caption-side: top;
	empty-cells: show;
	background-image: none;
}
caption {
	/* 0 */
	unicode-bidi: embed;
	display: table-caption;
	/* R */
	margin: 0px;
	padding: 0px;
	text-align: center;
}
colgroup {
	/* 0 */
	unicode-bidi: embed;
	display: table-column-group;
}
col {
	/* 0 */
	unicode-bidi: embed;
	display: table-column;
}
thead {
	/* 0 */
	unicode-bidi: embed;
	display: table-header-group;
}
tfoot {
	/* 0 */
	unicode-bidi: embed;
	display: table-footer-group;
}
tbody {
	/* 0 */
	unicode-bidi: embed;
	display: table-row-group;
}
tr {
	/* 0 */
	unicode-bidi: embed;
	display: table-row;
	background-image: none;
}
th {
	/* 0 */
	unicode-bidi: embed;
	display: table-cell;
	/* R */
	vertical-align: middle;
	text-align: center;
	background-image: none;
	font-size: 83%;
	font-weight: 800;
}
td {
	/* 0 */
	unicode-bidi: embed;
	display: table-cell;
	/* R */
	vertical-align: top;
	background-image: none;
}

/* Definition and Item Lists ------------------------------------------------ */
dl {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin-bottom: 1.33em;
}
dt {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin-top: 1.33em; /* required here, instead of DD, for N4 support */
}
dd {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px 0px 0px 2em;
}
ol {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin-top: 0px;
	list-style-type: upper-alpha;
}
ul {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin-top: 0px;
	list-style-type: square;
}
li {
	/* 0 */
	unicode-bidi: embed;
	/* R */
	margin-top: 3px; /* Used to provide spacing between list items */
}

/* NOTE: List Nesting Specifics are 'generally' unsupported by N4 */
ul ol, ol ol { /* Second Level Ordered List */
	/* D */
	margin-top: 0px;
	margin-bottom: 0px;
	/* R */
	list-style-type: decimal;
}
ol ol ol, ol ul ol, ul ol ol, ul ul ol { /* Third Level Ordered List */
	/* D */
	margin-top: 0px;
	margin-bottom: 0px;
	/* R */
	list-style-type: lower-alpha;
}
ol ul, ul ul { /* Second Level Unordered List */
	/* D */
	margin-top: 0px;
	margin-bottom: 0px;
	/* R */
	list-style-type: disc;
}
ol ol ul, ol ul ul, ul ol ul, ul ul ul { /* Third Level Unordered List */
	/* D */
	margin-top: 0px;
	margin-bottom: 0px;
	/* R */
	list-style-type: circle;
}

/* Web Forms ---------------------------------------------------------------- */
form {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px;
}
input {
	/* R */
	vertical-align: top;
	line-height: 1em; /* Best to leave as defined for N6 support */
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
	color: #000000;
}
input[type="hidden"] {
	/* 0 */
	unicode-bidi: embed;
	visibility: hidden;
}
input[type="image"] {
	/* R */
	vertical-align: top;
	border: 0px; /* Ignored by N4 */
	color: #000000;
}
input[type="radio"] {
	/* R */
	vertical-align: top;
	/* D */
	background-color: inherit;
	color: #000000;
}
input[type="checkbox"] {
	/* R */
	vertical-align: top;
	/* D */
	background-color: inherit;
	color: #000000;
}
input[type="submit"] {
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
	color: #000000;
	cursor: pointer;
}
input[type="reset"] {
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
	color: #000000;
	cursor: pointer;
}
input[type="file"] {
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
	font-weight: normal;
	color: #000000;
	cursor: pointer;
}
input[type="button"] {
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
	color: #000000;
	cursor: pointer;
}
select {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	vertical-align: top;
	line-height: 1em; /* Best to leave as defined for N6 support */
	/* D */
	font-family: 'Courier New','Courier',monospace; /* Ignored by N4 */
	font-size: medium;
	color: #000000;
}
option {
	/* D */
	font-family: 'Courier New','Courier',monospace; /* Ignored by N4 */
	font-size: medium;
	color: #000000;
}
textarea {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	line-height: 1em;
	/* D */
	font-family: 'Courier New','Courier',monospace; /* Ignored by N4 */
	font-size: medium;
	color: #000000;
}
fieldset { /* Not supported by N4 */
	/* Careful, word and line spacings vary with layout formating.  */
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px 0px 1.33em 0px;
	border: 2px solid #cccccc;
	padding: 0.25em;
}
legend {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	line-break-after: always;
	padding: 2px;
}
label {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	border-bottom: 1px dashed #cccccc;
}

/* General Content, Best Defined in Percentage (%) Font Sizes --------------- */
p {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px 0px 1.33em 0px;
}
div {
	/* 0 */
	unicode-bidi: embed;
	display: block;
}
strong {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	font-weight: 900;
}
em {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	font-weight: 800;
	font-style: italic;
}
strong em, em strong {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	font-style: italic;
	font-weight: 900;
}
b {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	font-weight: 800;
}
i {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	font-style: italic;
}
pre, pre *{
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px 0px 1.33em 0px;
	padding: 0.25em;
	/* D */
	font-family: 'Courier New','Courier',monospace;
	background-color: #f9f9f9;
	font-size: medium;
}
kbd, kbd *{
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	padding: 0px 2px 0px 2px;
	border: outset #ccc;
	border-width: 1px 2px 2px 1px;
	/* D */
	font-family: 'Courier New','Courier',monospace;
	background-color: #f9f9f9;
	font-size: medium;
}
address {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	font-style: italic;
	font-weight: 700;
}
blockquote {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	border: 1px solid #cccccc;
	margin: 0px 0.25em 1.33em 0.25em;
	padding: 0.25em;
}
q{
	unicode-bidi: embed;
	display: inline;
}
cite {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	font-style: italic;
}
var {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	font-style: italic;
}
big {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
}
small {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
}
sub {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	vertical-align: sub;
}
sup {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	vertical-align: super;
}
abbr {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	border-bottom: 1px dotted #cccccc;
	cursor: help;
}
acronym {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* R */
	letter-spacing: 0.1em;
	border-bottom: 1px dotted #cccccc;
	font-variant: small-caps;
	cursor: help;
}
hr { /* Limited HR color support, however set all 3 colors if used */
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	outline: 0px;
	height: 2px;
	border: 0px solid #cccccc; /* Always set size to Zero for N4 Support */
	/* D */
	background-color: #cccccc;
	color: #cccccc;
}
img {
	margin: 0px;
	border-width: 1px;
	padding: 0px;
}
br {
	/* 0 */
	unicode-bidi: embed;
	display: block;
}

/* Depricated Elements ------------------------------------------------------ */
dir {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px 0px 1.33em 4em;
}
menu {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	margin: 0px 0px 1.33em 4em;
}
s {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	text-decoration: line-through;
}
strike {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	text-decoration: line-through;
}
del {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	text-decoration: line-through;
}
u {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	text-decoration: underline;
}
ins {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	text-decoration: underline;
}
center {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* R */
	text-align: center;
}
tt {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
}
code {
	/* 0 */
	unicode-bidi: embed;
	display: block;
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
}
samp {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	/* D */
	font-family: 'Courier New','Courier',monospace;
	font-size: medium;
}

/* Anchors ------------------------------------------------------------------ */
a {
	/* 0 */
	unicode-bidi: embed;
	display: inline;
	text-decoration: none;
}
a[name]{
	/* D */
	text-decoration: none;
}
a[href] {
	/* D */
	text-decoration: underline;
}
a:focus {
	/* R */
	outline: thin;
}
a:link {
	/* D */
	text-decoration: underline;
	color: #0000ff;
}
a:visited {
	/* D */
	text-decoration: underline;
	color: #990099;
}
a:active {
	/* D */
	text-decoration: underline;
	color: #cc0000;
}
a:hover {
	/* D */
	text-decoration: underline;
	color: #cc0000;
}

/* SCREEN CHARACTERISTICS ==++=============================================== */
@media screen {
 /* Any definition specific for screen (browser) rendering should go here. */
}

/* PROJECTION CHARACTERISTICS =============================================== */
@media projection {
 /* Any definition specific for projection rendering
  (often at a lower resolution and higher contrasts) should go here. */
}

/* PRINTING CHARACTERISTICS ================================================= */
@page {
	margin: 0.5in;
	size: portrait;
}
@media print {
	body {
		background-image: none;
		background-color: #ffffff;
		color: #000000;
	}

	/* Headers */
	h1 {
		/* R */
		page-break-after: avoid;
		page-break-inside: avoid;
	}
	h2 {
		/* R */
		page-break-after: avoid;
		page-break-inside: avoid;
	}
	h3 {
		/* R */
		page-break-after: avoid;
		page-break-inside: avoid;
	}
	h4 {
		/* R */
		page-break-after: avoid;
		page-break-inside: avoid;
	}
	h5 {
		/* R */
		page-break-after: avoid;
		page-break-inside: avoid;
	}
	h6 {
		/* R */
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	/* Tables */
	tbody {
		page-break-inside: avoid;
	}
	tr {
		page-break-inside: avoid;
	}
	th {
		page-break-inside: avoid;
	}
	td {
		page-break-inside: avoid;
	}

	/* General Content */
	blockquote {
		/* R */
		page-break-inside: avoid;
	}
	pre {
		/* R */
		page-break-inside: avoid;
	}
	ul {
		/* R */
		page-break-before: avoid;
	}
	ol {
		/* R */
		page-break-before: avoid;
	}
	dl {
		/* R */
		page-break-before: avoid;
	}
}


/* SCREEN READER CHARACTERISTICS ============================================ */
@media aural {
	/* Headers */
	h1 {
		/* R */
		pitch-range: 90;
		pitch: x-low;
		richness: 90;
		stress: 20;
		voice-family: 'paul',male;
	}
	h2 {
		/* R */
		pitch-range: 80;
		pitch: x-low;
		richness: 90;
		stress: 20;
		voice-family: 'paul',male;
	}
	h3 {
		/* R */
		pitch-range: 70;
		pitch: low;
		richness: 90;
		stress: 20;
		voice-family: 'paul',male;
	}
	h4 {
		/* R */
		pitch-range: 60;
		pitch: medium;
		richness: 90;
		stress: 20;
		voice-family: 'paul',male;
	}
	h5 {
		/* R */
		pitch-range: 50;
		pitch: medium;
		richness: 90;
		stress: 20;
		voice-family: 'paul',male;
	}
	h6 {
		/* R */
		pitch-range: 40;
		pitch: medium;
		richness: 90;
		stress: 20;
		voice-family: 'paul',male;
	}

	/* General Content */
	li {
		/* R */
		pitch: medium;
		richness: 60;
	}
	dt {
		/* R */
		pitch: medium;
		richness: 60;
		stress: 80;
	}
	dd {
		/* R */
		pitch: medium;
		richness: 60;
	}
	pre {
		/* R */
		pitch-range: 0;
		pitch: medium;
		richness: 80;
		stress: 0;
	}
	em {
		/* R */
		pitch-range: 60;
		pitch: medium;
		richness: 50;
		stress: 60;
	}
	i {
		/* R */
		pitch-range: 60;
		pitch: medium;
		richness: 50;
		stress: 50;
	}
	strong {
		/* R */
		pitch-range: 60;
		pitch: medium;
		richness: 90;
		stress: 90;
	}
	b {
		/* R */
		pitch-range: 60;
		pitch: medium;
		richness: 90;
		stress: 80;
	}

	/* Anchors */
	a:link {
		/* R */
		voice-family: 'harry',male;
	}
	a:visited {
		/* R */
		voice-family: 'betty',female;
	}
	a:active, a:hover {
		/* R */
		pitch-range: 80;
		pitch: x-high;
		voice-family: 'betty',female;
	}

	/* Depricated Elements */
	code {
		/* R */
		pitch-range: 0;
		pitch: medium;
		richness: 80;
		stress: 0;
	}
	tt {
		/* R */
		pitch-range: 0;
		pitch: medium;
		richness: 80;
		stress: 0;
	}
	dfn {
		/* R */
		pitch-range: 60;
		pitch: high;
		stress: 60;
	}
	s {
		/* R */
		richness: 0;
	}
	strike {
		/* R */
		richness: 0;
	}
	u {
		/* R */
		richness: 0;
	}
}
[Updated: Sunday, November 18, 2007]
'Eye' Focus: Web Support Tutorials

'Eye' Focus Home

Web Support Tutorials

1: Basic Site Building

2: Publishing the Site, and Searches

3: Construction for More Appeal

4: Additional Development

Ancestral Soldiers of Honor (ASH)

Photo Albums

My Yahoo! Comics

Windows XP Essentials

Style Sheets: 'Core CSS' Source Code

Below is the Actual Style Sheet
