/* Make sure you've got a page with well-formed standards based HTML 4.01, link it to this style sheet and you should see the result straight away. */ /* The element is just that, an element. So there's no reason why you can't give it its own style then make it appear around the using a margin - that's all we do here. You might even like to add your own background image properties to this element to get an even more dynamic effect. */ body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: .9em; margin: 15px 0px 0px; color: 222222; background-color: #FFFFFF; } /* The following gives a special effect for

elements which works best if there is only one of them on at the top of each page - so they are a sort of title. / h1 {background-color: #195039; margin: 0px; color: #7bab83; font-size: 1.8em; padding-left: 3px; padding-right: 3px; padding-bottom: 5px; padding-top: 5px; text-align: right; letter-spacing: 2px; font-style: italic; border-bottom: 20px #3a6750 solid; margin-left: -20px; margin-right: -20px; font-weight: normal;} h2 {background-color: #7bab83; color: #195039; padding-right: 3px; padding-left: 3px; padding-top: .5%; padding-bottom: .5%; font-weight: normal; font-size: 1.6em; text-align: left; margin: 0px;} h3 {border-bottom: 3px #195039 double; font-size: 1.3em; font-style: normal; font-weight: bold; color: #195039; text-align: left; padding-left: 3%; padding-right: 3%;} h4 {color: #333333; padding-right: 3%; padding-left: 3%; font-weight: bold; font-size: 1.1em; font-style: normal; text-align: center; text-decoration: underline;} / The following four selectors allow you to select links when they are in the four different states: link - before they have been visited, visited - after it has been visited, hover - when the mouse is over the link, active - when the user clicks the link. / a:link {text-decoration: none; color: #555555 ;} a:visited {text-decoration: none; background-color: #FFFFFF; color: 669999 ;} a:hover { color: #555555; text-decoration: underline; } a:active {background-color: #FFFFFF; color: white; } a.menu:link { font-family: Arial, Helvetica, sans-serif; color: #444444; text-decoration: none; font-size: 0.8em; font-weight: 500; } a.menu:visited { color: #000000; text-decoration: underline; font-weight: normal; } a.menu:hover { color: #FF0000; text-decoration: underline; } a.menu:active { color: #FF0000; text-decoration: none; } p { margin-left: 0%; margin-right: 0%; margin-top: 2%; margin-bottom: 6%; } blockquote {background-color: #FFFFFF; color: white; font-style: italic; margin-right: 6%; margin-left: 6%; font-weight: bold; padding: 5px; border-top: 3px #7bab83 solid; border-bottom: 3px #7bab83 solid;} / This section of the style sheet has just a few selectors and properties to help you find your way around adding style to regular, standards-based HTML 4.01 tables (ie, a table to be used for presenting tabular information). */ .verysmall { font-family: Arial, Helvetica, sans-serif; font-size: 0.74em; color: #333333; } .titles { font-family: Arial, Helvetica, sans-serif; font-size: 0.72em; color: #18957B; font-weight: 400; } .gallerytitle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; font-weight: 400; color: #18957B; text-decoration: none; } .footer { font-size: 0.8em; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666; } .indentmaintext { margin-top: 3px; margin-right: 5px; margin-bottom: 3px; margin-left: 5px; } .small { font-size: 0.85em; } .smallbody { font-size: 0.88em; color: #666666; } a.smallbody:link { color: #336699; text-decoration: underline; }