The following code is the full CSS required for our design. You can copy and paste this coding into notepad and save it as "main.css" in a folder called "css" in your HTML folder you created earlier. This is the css file that is linked to in the header html from the previous step:

@charset "utf-8";
/* CSS Document */

*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, 
fieldset, table, th, td { 
margin: 0; padding: 0; outline: none; color:#11aef7; 
}

body { 
	font: 9pt/17pt arial; 
	margin: 0px; 
	padding: 0px;
	height: 100%;
	background: #f4f4f4;
	outline: none;
	}
	
.clear { 
	clear: both;
}
	
p {
	font-size: 1.1em; 
	color:#8d8d8d;
}
a { 
	color: #11aef7; 
	text-decoration: none; 
}

#container {
	display: block;
	margin: 0 auto;
	width: 963px;
}

p#logo {
	display: inline;
	float: left;
	width: 199px;
	height: 24px;
	background: url(../images/logo.gif);
	margin-top: 38px;
}

p#logo a {
	display: block;
	width: 199px;
	height: 24px;
	text-indent: -5000px;
}

#top-nav {
	display: inline;
	float: right;
	height: 12px;
	margin: 28px 0 0 0;
}
.corners {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background: #FFF;
	padding: 10px 13px 18px 13px;
}
#top-nav ul {
	list-style-type: none;
}
#top-nav ul li {
	display: inline;
	float: left;
	margin: 0 19px 0 19px;
	font-size: 1.2em;
	font-weight: bold;
}
#active {
	color:#000;
}

#left-column {
	display: inline;
	float: left;
	width: 631px;
	margin-top: 58px;
}
#right-column {
	display: inline;
	float: right;
	width: 275px;
	margin-top: 58px;
}
h1 {
	display: block;
	width: 395px;
	height: 39px;
	background: url(../images/paradise-in-a-bottle.gif);
	text-indent: -5000px;
}	
p#introducing {
	display: block;
	width: 357px;
	height: 29px;
	background: url(../images/introducing.gif);
	text-indent: -5000px;
	margin-top: 10px;
}

#bottle {
	margin-top: 18px;	
}
h2 {
	display: block;
	width: 271px;
	height: 28px;
	background: url(../images/win.gif);
	text-indent: -5000px;
}
p#destination {
	font-size: 1.2em;
	margin: 6px 0 8px 0;
}
#form {
	padding: 20px;
}
legend {
	display: none;	
}
fieldset { 
	border: none;
}
.label {
	font-weight: bold;
	display: block;
	font-size: 1.2em;
	margin: 5px 0 4px 0;
}
.txtfld {
	display: block;
	width: 226px;
	height: 29px;
	background: url(../images/textfield.gif) no-repeat;
	border: none;
	margin-bottom: 8px;
	font-size: 1.3em;
	padding: 8px 0 0 9px;
}
#submit-button {
	display: inline;
	float: right;
}
p#never-share {
	display: inline;
	float: left;
	width: 132px;
	font-size: .95em;
	line-height: 13px;
}

#impurities, #drink-mixer {
	display: inline;
	float: left;
	width: 272px;
	height: 166px;
	margin-right: 40px;
}

#impurities h3, #drink-mixer h3 {
	display:block;
	text-indent:-5000px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 10px;
}
#drink-mixer h3 {
	width: 140px;
	height:23px;
	background:url(../images/drink-mixer.gif);
}
#impurities h3 {
	width: 184px;
	height: 23px;
	background:url(../images/impurities.gif);
}
p.sub-desc {
	text-align:center;
	font-family: georgia;
	margin: 10px 0 15px 0;
	text-transform: uppercase;
}
#impurities a, #drink-mixer a {
	margin: 15px 0 0 81px;
	font-family: georgia;
	text-transform: uppercase;
	text-decoration: underline;
	font-size: 1.3em;
}
#dirt {
	position: relative;
	z-index: 2;
	overflow: visible;
	width:270px;
	height: 88px;
	margin-top: 17px;
	background: url(../images/dirt.gif);
}
#mixer {
	display: block;
	z-index: 2;
	overflow: visible;
	width: 36px;
	height: 94px;
	background: url(../images/mixer.gif);
	margin: -10px 0 0 20px;
}
#social {
	display:inline;
	float: right;
	width:276px;
}
h4 {
	display: block;
	width: 142px;
	height: 24px;
	background: url(../images/lets-get-social.gif);
	text-indent: -5000px;
	margin-bottom: 25px;
}
p#facebook, p#twitter, p#rss {
	dislay: block;
	width: 274px;
	height: 36px;
	margin: 10px 0 16px 0;
}
p#facebook a, p#twitter a, p#rss a {
	display: block;
	width: 274px;
	height: 36px;
	text-indent: -5000px;
}

p#twitter {
	background: url(../images/twitter.gif);
}
p#facebook {
	background: url(../images/facebook.gif);
}
p#rss {
	background: url(../images/rss.gif);
}

#bottom-nav {
	margin-top: 80px;	
	height: 12px;
}

#bottom-nav ul {
	list-style-type: none;
}
#bottom-nav ul li {
	display: inline;
	float: left;
	margin: 0 19px 0 19px;
	font-size: 1.2em;
	font-weight: bold;
}
#bottom-nav ul li#terms {
	margin-left: 260px;
}
#bottom-nav ul li#terms a,  #bottom-nav ul li#privacy a {
	color:#969696;
	font-weight: normal;
}
p#copyright {
	margin-top: 25px;
	text-align: center;
	display: block;
}
                

Again, if you're new to this, you're probably overwhelmed and confused! Once you understand it, think about it, and analyze the code, it's not so bad.

How CSS Works

1. As mentioned in the previous step, there are 3 ways to reference html tags. The # sign before a name means it's referencing an ID. A period (.) before a name is referencing a class. And just an HTML tag (like p, body, div, etc..) means it's referencing all occurrences of that tag.
2. After the reference, you will find a "{". This is the beginning of the styling for that given element. All properties go between { and }.
3. After the "{" is where css properties go. It starts off with a property name, followed by a colon (:), and then the value, then finished off with a semi colon. The order in which the properties are listed does not affect anything.
4. You can style multiple attributes in the same declaration by separating the references with a comma. For instance: #id1, #id2, #id3 { properties }.

Fundamental Properties & How They Work

When you're styling and entire layout in CSS, it can get very repetitive. It's a matter of understanding how to do a few things well. Once you know what to do to achieve certain objectives, it's cake. Below is a list of how to do a few simple things, which are utilized in the above CSS code for our layout.

1. Display - Display is a CSS property that is used a lot. It allows you to define the type of "box" an element becomes. 99% of the time I either specify "display: inline;" or "display: block;". You will see both instances used a lot in the coding above. The golden rule is if you have a property that you want other elements to "float" left or right of, you set it to "display: inline;". If no other elements are to appear left or right of it, you set it to block.
2. Float - If you use display: inline;, you must set "float". The valid properties are either "left", "right", "none" or "inherit".
3. Width and Height are no-brainers. You specify the width or height in either pixels (px) or %. One question you might have is how do you know how big certain elements should be? There are several ways, but they all require you to reference the concept design in Photoshop. One way is to check the image dimensions of any given image that you cut up. Sometimes you need to know margin and padding however, and you can do that with the ruler tool in Photoshop.
4. Background - Background is a very important property. It allows you to specify images for use within your layout, as well as background colors. You can see it is used a lot in the coding above.
5. Margin and Padding - Margin and padding are very similar, except opposites. Margin effects the amount of spacing outside of an element, while padding effects the amount of spacing within an element. You can either use margin-top, -bottom, -left, -right specifically (same with padding), or just: "margin: 0px 0px 0px 0px;" (top, right, bottom, left) to set the margin or padding all within one line.
6. Color - Color pertains specifically to the color of a font.
7. Font, font-weight, text-decoration, text-indent, text-transform - are all font related properties.

Once you understand the above fundamentals, things should become more clear. If you're a beginner, it's perfectly natural to feel overwhelmed at this point. The only way to get better is to practice!