My stylesheet sample for Florida Virtual Schools

This is the css code written from scratch other than the integrated rounded corners and the menu options. I enjoy looking through templates, gathering ideas, and learning new tricks that CSS allows for to make a website more appealing and state of the art.

body {
background-color: #FFCC66;
background-image: url("images/butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

/*background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
The list of order is as follows:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
margin properties - top, right, bottom, left
*/
margin: 10px 30px 10px 30px;
}

h1 {
color: #990000;
background-color: #FC9804;
font-family: arial, verdana, sans-serif;
font-variant: small-caps;
font-size: 25px;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 10px;
}

h2 {
font-family: "Times New Roman", serif;
font-style: italic;
font-variant: small-caps;
font-size: 12pt;
letter-spacing: 3px;
}

h3 {
font-size: 120%;
}

/* Menu */


#menu {
height: 70px;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 140px;
height: 45px;
padding-top: 25px;
text-decoration: none;
text-align: center;
letter-spacing: -2px;
font-size: 25px;
color: #B8BD52;
}

#menu a:hover {
color: #1A1A1A;
}

#menu .active a {
background: url(images/img03.jpg) no-repeat;
color: #FFFFFF;
}

.rounded:before {
background: transparent url(images/top-right.png) scroll no-repeat top right;
margin-bottom: -20px;
height: 30px;
display: block;
border: none;
content: url(images/top-left.png);
padding: 0;
line-height: 0.1;
font-size: 1px;
}

.rounded:after {
display: block;
line-height: 0.1;
font-size: 1px;
content: url(images/bottom-left.png);
margin: 0 0 -1px 0;
height: 30px;
background: white;
background: transparent url(images/bottom-right.png) scroll no-repeat bottom right ;
padding: 0;
}

blockquote {
background: #FC9804;
}

.rounded * {
padding-left: 16px;
padding-right: 16px;
}

p {
/* short hand properties order of values
font-style | font-variant | font-weight | font-size | font-family
*/
font: 1em arial, verdana, sans-serif;
text-indent: 30px; /*
To make your website accessible for everybody, you should use adjustable units such as '%' or 'em'.
*/
}

li {
font: 1em arial, verdana, sans-serif;
text-transform: lowercase;
}

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

/* a class is specified as a.classname - a for the anchor and classname for the class seperated by a period

ids and divs are specified using the #
#understanding is a div in mystyle.html
*/

#emphasize{
text-decoration:underline;
}

#understanding {
background:white;
padding: 10px 20px 10px 20px;
border-width: thin;
border-style: solid;
border-color: orange;
width: 650px;
}

#picture {
float:right;
border-width: thick;
border-style: solid;
border-color: orange;
width: 144px;
}

.floatstop {
clear:both;
}

#w3 {
float:right;
}

#column1 {
float:left;
width: 50%;
}

#column2 {
float:left;
width: 50%;
}

#footer {
position: relative;
width: 95%;
clear: both;
padding: 10px;
background-color: #FC9804;
text-align: right;
font-style: bold;
font-variant: small-caps;
font-size: 12pt;
}