CSS Info

1. The XHTML Header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <title>xhtml Template</title>
      <style>
         /* <!CDATA[ */
            @import url(mystyle.css);
         /* ]]> */
      </style>
      <link rel="shortcut icon" href="favicon.ico" />
   </head>

The !DOCTYPE tells browsers what kind of XHTML the page is written in.
The HTML tag, tells browsers the namespace (again that the page is written in html) and the language.
The content type META tag tells browsers what character set to use, in this case the standard character set for English language pages.
The TITLE tag names the page and appears in the Title Bar of the browser.
The STYLE tag informs the browser where to find the style sheet for the page. @import avoids problems with non-CSS compliant browsers, because they won't find the style sheet at all and the page will appear without applied style This requires you to plan for how the page will look whether the style sheet is applied or not, but is the most accessible way to design the pages both for browsers, and visually impaired/blind visitors.
The LINK tag attaches a favicon for your website. It is optional but can help visually identify your website for visitors.

2. Standard Format for CSS

XHTML tag used	<p>	<h1>, or <h2>, etc.	<p id="nav">	<p class="divider">
CSS styling	p { color: #00FF00 }	h1, h2, h3, h4, h5, h6 { color: #00FF00 }	#nav p { color: #00FF00 }	p.divider { color: #00FF00 }

IDs can be used once on a page. It can be used for inline styles and/or you can use the SPAN tag. If you need to use an effect more than once on a page, that is a Class, though it is otherwise implemented in the XHTML like an ID. IDs and classes can also be independent of any one tag. If you use the following CSS...

#nav {
color: #00FF00
}

.divider {
color: #00FF00
}

then the id="nav" or class="divider" can be included in any tag that supports them, and the effects specified for that ID or class will be applied. (In this case, that text should be green.) Note that while this gives you greater flexibility, you can still only use an ID once on a page. If you need to use it multiple times, you'll need to do it as a class.

CSS comments are of the form... /* This is a CSS comment */ The comment can be alone or on the same line as a CSS rule, and it can be one or multiple lines as long as the /* begins the comment and the */ ends it.

Borders must specify the type of border before it will display. There is no default type. 4px is the default size. White is the default color.

CSS Shorthand for Boxes

One value (margin: 10px;): Applied to all edges.
Two value (margin: 10px 20px;): First applied to top/bottom edges. Second applied to left/right edges.
Three value (margin: 10px 20px 5px;): First applied to the top edge. Second applied to left/right edges. Third applied to the bottom edge.
Four value (margin: 10px 5px 10px 20px;): Applied clockwise. First applied to the top edge. Second applied to the right edge. Third applied ot the bottom edge. Fourth applied to the left edge.

Earthchronicle.com Home (Timelines, Ref. Shelf, Interactive)	Chronicle Subjects (Alphabetical or ECAN Codes)	I Have Something to Add!	Site Index	Reader's Guide
Have a Question? Ask Us! Have an update, suggestion, or found an error? Email Us!

Author:		Date Received:
Editor:		First Date Posted:
Proofreader:		Last Date Revised:
Researcher(s):
Subjects:

Earthchronicle.com Home (Timelines, Ref. Shelf, Interactive)	Chronicle Subjects (Alphabetical or ECAN Codes)	I Have Something to Add!	Site Index	Reader's Guide
Have a Question? Ask Us! Have an update, suggestion, or found an error? Email Us!

Main Points

1. The XHTML Header

2. Standard Format for CSS

CSS Shorthand for Boxes

3.