﻿First the main stuff

/*
  The star selector is used to target every element.  This is
  often used to zero out the margin and padding.  This
  creates some common ground from which to begin.
*/
* {
}

/*
  body is used to provide basic page styles meant to be inherited
  by nearly all of the page’s children: font-face, size, alignment,
  etc. Some use the html selector, but I have never done that so
  it’s not listed.
*/
body {
}  

/*
  The wrapper div can be used to contain the page itself. It can
  also redefine some characteristics inherited from the body. It
  is high on this page as it’ll contain everything else used.
*/
#wrapper {
}

Now to offer some very common elements
/*
  Here are the headings. These may be redefined throughout the
  document as needed, if needed. This is especially true of the h1
  element as it may have special usage as the main page heading,
  and maybe as a link.
*/
h1, h2, h3, h4, h5, h6 {
}

/*
  A page without paragraphs would be pretty unusual. Let’s make
  sure the p element is included. This, too, may be redefined
  throughout the document  as needed, if needed.
*/
p {
}

/*
  Most pages will have links. Let’s style them using a anchor
  element. Some will write this as a:link. I don’t — I don’t
  see the need
*/
a 
{    text-align: center;
}


/*
  Links really should have some interactivity characteristics for
  accessibility and usability reasons. The a:hover pseudo-class is
  offered as is a:focus. Internet Explorer (IE) doesn’t support
  a:focus, but it does use the a:active state so it’s here too.
*/
a:hover, a:focus, a:active 
{
	text-decoration: underline; 
}

/*
  Focus/active should be different than hover is some regards, such
  as providing a background color to make it highly visible to
  keyboard users. Thus, certain focal styles may be redefined.
*/

a:focus, a:active {
}

/*
  In addition to background images, most web pages will offer
  embedded images (img), so I will offer them here. Mostly this
  is used to remove borders and text-decoration
  (if the image is a link).
*/
img, a img {
}

Less Common Elements

/*
  I’m not going to add the table element as its purpose is quite
  specific and not used very often by the typical CSS developer
  (unless they are offering tabular data). This is also the case
  for dfn (definition), code, pre (preserve [whitespace]),
  kbd (keyboard), ins (insert),  del (delete),
  i (italic [presentational]), and b (bold [presentational]).
  But you will likely want to use those I am offering — though
  you may not style them all.
*/

small {
}

abbr, acronym { /* Also see .abbr class for a span used by IE */
}

blockquote {
}

cite {
}

em {    text-align: center;
}

strong {    color: #993300;
    font-size: small;
}

Form Elements

/*
  Offering some form styles, since most sites have a form or two,
  are really quite common. And offering focal styles is quite
  useful to accessibility for those using keyboards. But please
  know that neither the :focus or :active pseudo classes (on
  elements other than anchors) are available to IE user so
  JavaScript will be needed to make it work. Since not everyone
  has JavaScript enabled, it is important that the form’s
  contrast is usable without script support.
  Since submit- and reset-type inputs are affected by
  the text-type input styles, you may want to offer an
  input.button class. The same applies to checkboxes and radio
  buttons.
*/

form {
}

fieldset {
}

legend {
}

label {
}

input {
}

select {
}

option {
}

textarea {
}

input:focus, select:focus, option:focus, textarea:focus {
}

Some typical IDs

/*
  Call them what you like, but these are some really common IDs
  you may use yourself. I try to make the names as informative as
  possible so as to not confuse myself down the road. Using common
  names like this offers insight to any editor later on. Note that
  the “wrapper” ID is covered above as it needs
  to be high up in the cascade.
*/

#header { /* may also be masthead, banner, etc., and may include
                                     the h1 element */
}

#content {
}

#sidebar {
}

#navigation {
}

#footer {
}
.escrowLinks {
	 vertical-align:bottom; background-color:#990000; text-align:center	
}
	


Some typical Classes

/*
  Just like the IDs above, I use these on nearly every site I make.
  These should be pretty self-explanatory with exception to offset
  which I’ve filled in. It’s used in lieu of display : none;
  (.hidden class) so as to remove items from view while still
  making them available to other users. If anchors,  you can use
  a:focus/a:active to bring them back in view. Useful for hidden 

  skip/jump links, etc.
*/

.bold {
}

.italic {
}

.hidden {
}

.offset { /* would be position : abosolute; top : -9000px;
                                 left : -9000px; */
}

.highlight { /* useful for adding spot colors */
}

.tiny { /* use small element to make small, but for styled-only
                               small text, this is class. */
}

.error {
}

.abbr { /* use with a span to style abbr for IE as abbr isn’t
                                supported */
}

