elements with div {}.
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to
select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
RESET all these elements
------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin:0; /* margin generates space around elements */
padding:0; /* padding generates space around content */
}
table{
border-collapse:collapse; /* border-collapse sets table borders into a single border */
border-spacing:0; /* border-spacing sets the distance between the borders of adjacent cells
(for "separated borders" model only) */
}
fieldset,img{
border:0; /* shorthand to set all border properties in one declaration.
syntax:
boder: border-width border-style border-color|initial|inherit;
*/
}
address,caption,cite,code,dfn,th,var{
font-style:normal;
font-weight:normal;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:''; /* used with :before and :after pseudo-elements to insert generated content */
}
abbr,acronym{
border:0;
}
/*------------------------------------*\
MAIN
Set the overall look of the page body
\*------------------------------------*/
body{
font-family:Bookman,serif;
font-size:1.50em;
color:#333;
width:960px;
margin:0 auto;
padding:10px;
}
/*------------------------------------*\
The '#' denotes an ID
\*------------------------------------*/
#bg { position: fixed; top: 0; left: 0; } /* page background */
/* The .class selector selects elements with a specific class attribute. You can also specify that only
* specific HTML elements should be affected by a class by starting with the element name, then period,
* followed by the name of the class, e.g., p.hometown { background-color: yellow; ). HTML elements can also
* refer to more than one class, e.g.,
This paragraph refers to two classes.
* Im not sure these do anything. They seem to be overridden in the code to adust screen width.
*/
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
/*------------------------------------*\
NAV
This is copied wholesale from some example of how to do navigation
with some modifications to fit with my website.
\*------------------------------------*/
#nav{
list-style:none; /* list-style is a shorthand property use to set all list properties
in one declaration */
font-weight:normal; /* font-weight:bold; */
margin-bottom:10px; /* set bottom margin. can also specify a percentage as x% of the width
of the containing element */
/* Clear floats */
float:left; /* specifies whether or not an element should float. can be used
to wrap text around imagaes. */
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative; /* specifies positioning method used for an element: static,
relative, fixed, or absolute. */
}
#nav a{
display:block; /* the most important CSS property for controlling layout, specifying
if and how an element is displayed. Every HTML element has a default
display value depending on what type of elemen it is. The default
for most elements is 'block' or 'inline'.
Block-level elemens always start on a new line and take up the full
width available, stretching out to the left and right as far as it can.
E.g.,