/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */
/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */
/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */
/* basic elements */
html {
margin: 0;
padding: 0;
}
This neutralizes all default browser margins and padding for all content.
body {
font: 75% georgia, sans-serif;
line-height: 1.88889;
color: #555753;
background: #fff url(blossoms.jpg) no-repeat bottom right;
margin: 0;
padding: 0;
}
This sets the default style for body content. Font is 75% of the browser default size and will be font Georgia if it is available, otherwise ssans-serif. The space between lines will be greater than the default; there is a background color and, again, margin and padding are set to zero.
p {
margin-top: 0;
text-align: justify;
}
This is a standard selector. All content within all paragraph tags will be justified with no top margin.
h3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #7D775C;
}
This is a standard selector and will effect all content within a h3 tag. The font will be 1.4 times the body font size and will have a unique color.
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
This is an attribute selector with a pseudo class. All links will be in bold, not underlined, and a unique color.
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
This is a pseudo class--a link that has been clicked on ("visited") will have a different color than an un-visited link.
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
This is a pseudo class--when hovering over or clicking on a link, the color of the font will change and the text will be underlined.
acronym {
border-bottom: none;
}
This is an attribute selector. Any text within an acronym tag will not have a border.
/* specific divs */
#container {
background: url(zen-bg.jpg) no-repeat top left;
padding: 0 175px 0 110px;
margin: 0;
position: relative;
}
This sets the style for all tags with an id of "container". The background is an image that is positioned at the top left of the parent tag, sets padding on the right and left of the div, and sets the position as relative with no value set.
#intro {
min-width: 470px;
}
All tags with an id of "intro" will not be narrower than 470 pixels.
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url(h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
This is a contextual selector that sets a style for all h1 tags with a tag with an id of "pageHeader". In this case, it replaces the text of the h1 tag with an image that has a top margin of 10 pixels, is 219 px wide, 87 px tall, and floats left.
#pageHeader h1 span {
display:none
}
This is a contextual selector-child. It sets all content within any span tag that follows a h1 tag that is within a tag with an id of "pageHeader" to not be visible.
#pageHeader h2 {
background: transparent url(h2.gif) no-repeat top left;
margin-top: 58px;
margin-bottom: 40px;
width: 200px;
height: 18px;
float: right;
}
This is a contextual selector that sets a style for all h2 tags with a tag with an id of "pageHeader". In this case, it replaces the text of the h1 tag with an image that has a top margin of 58 pixels, a bottom margin of 40 pixels, is 200 px wide, 18 px tall, and floats right.
#pageHeader h2 span {
display:none
}
This is a contextual selector-child. It sets all content within any span tag that follows a h2 tag that is within a tag with an id of "pageHeader" to not be visible.
#pageHeader {
padding-top: 20px;
}
All tags with an id of "pageHeader" will have top padding of 20 pixels.
#quickSummary {
clear:both;
margin: 20px 20px 20px 10px;
width: 160px;
float: left;
}
All tags with an id of "quickSummary" will be below the prior content (not floated relative to prior content), will float left (probably creating a left column), will have top, right, and bottom margins of 20px and a left margin of 10px, and will be 160px wide.
#quickSummary p {
font: italic 10pt/22pt georgia;
text-align:center;
}
This is a contextual selector. Content within a paragraph tag that is within a tag with an id of "quickSummary" will be italicized and aligned center.
#preamble {
clear: right;
padding: 0px 10px 0 10px;
}
All content within a tag with an id of "preamble" will float below any right-floated elements preceding it.
#supportingText {
padding-left: 10px;
margin-bottom: 40px;
}
All content within a tag with an id of "supportingText" will have 10 pixels of padding to the left and a bottom margin of 40px.
#footer {
text-align: center;
}
All content within a tag with an id of "footer" will be aligned center.
#footer a:link, #footer a:visited {
margin-right: 20px;
}
this is a multiple selector and a pseudo class. Links within a tag with an id of "footer" will have a right margin of 20px both when they have not yet been clicked on and after they have been clicked on.
#linkList {
margin-left: 600px;
position: absolute;
top: 0;
right: 0;
}
All content within a tag with an id of "linkList" will have a left margin of 600px, position will be absolute in relation to the first parent tag with a position other than static and will be positioned in the very top right corner relative to that parent tag.
#linkList2 {
font: 10px verdana, sans-serif;
background: transparent url(paper-bg.jpg) top left repeat-y;
padding: 10px;
margin-top: 150px;
width: 130px;
}
All content within a tag with an id of "linkList2" will have font sized 10 pixels, in Verdana, with a background image that repeats to fill up the column to the end of the parent div; the content will have padding on all sides of 10 pixels, a top margin of 150 pixels, and will be 130 wide.
#linkList h3.select {
background: transparent url(h3.gif) no-repeat top left;
margin: 10px 0 5px 0;
width: 97px;
height: 16px;
}
This is a contextual selector that sets the style for any h3 tag with a class of "select" that is child of a tag with an id of "linkList".
#linkList h3.select span { display:none }
#linkList h3.favorites {
background: transparent url(h4.gif) no-repeat top left;
margin: 25px 0 5px 0;
width: 60px;
height: 18px;
}
This is a contextual selector that sets the style for any h3 tag with a class of "favorites" that is child of a tag with an id of "linkList". The content will have a background image that does not repeat, top margin of 25px, bottom margin of 5px, and no margin on left and right. The height of the content within the h3 tag will be 18px and the width will be 60 pixels.
#linkList h3.favorites span { display:none } This is a contextual-child selector that sets the style for any span tag with a h3 tag with a class of "favorites" that is child of a tag with an id of "linkList". The content will not be visible.
#linkList h3.archives {
background: transparent url(h5.gif) no-repeat top left;
margin: 25px 0 5px 0;
width:57px;
height: 14px;
}
Contextual selector by class
#linkList h3.archives span {
display:none
}
Contextual-child selector
#linkList h3.resources {
background: transparent url(h6.gif) no-repeat top left;
margin: 25px 0 5px 0;
width:63px;
height: 10px;
}
Contextual selector by class
#linkList h3.resources span {
display:none
}
Contextual-child selector
#linkList ul {
margin: 0;
padding: 0;
}
Contextual selector
#linkList li {
line-height: 2.5ex;
background: transparent url(cr1.gif) no-repeat top center;
display: block;
padding-top: 5px;
margin-bottom: 5px;
list-style-type: none;
}
Contextual selector
#linkList li a:link {
color: #988F5E;
}
Contextual selector and pseudo class.
#linkList li a:visited {
color: #B3AE94;
}
Contextual selector and pseudo class.
#extraDiv1 { background: transparent url(cr2.gif) top left no-repeat; position: absolute; top: 40px; right: 0; width: 148px; height: 110px; }
Sets style for content within a tag with an id of "extraDiv1"..accesskey {
text-decoration: underline;
}
Class selector--any test within a tag with a class of "accesskey" will be underlined.
