As you probably remember from the initial template html we added three stylesheets to our document

<!-- Stylesheets - The order of these files is important -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

The second one is where we’ll place a few styles to tweak the appearance and put the finishing touches on the site.

Open the CSS Styles panel in Dreamweaver and select the style.css file from the list, then click the new css rule button at the bottom of the panel.

You’ll need to create several rules for the following elements…

body

(Set Font and separate Hero Element from the Navbar)

body {
	font-family: 'Oxygen', sans-serif;
	padding-top: 60px;
	padding-bottom: 40px;
}

footer a, footer a:link, footer a:visited

(Add color to the footer links)

footer a, footer a:link, footer a:visited{
	color: #FB855B;
}

.hero-unit

(Pulls in main hero background image)

.hero-unit{
	background-image: url(../img/hero-mars.jpg);
	background-color: #000;
	background-repeat: no-repeat;
}

.hero-unit h1, .hero-unit p

(Set text in Hero unit to white and adds a drop shadow)

.hero-unit h1, .hero-unit p{
	color: #FFF;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.8);
}

If you prefer add the entire block to your css file you can grab the whole block below…

/* Your Custom CSS Goes in this File */

body {
	font-family: 'Oxygen', sans-serif;
	padding-top: 60px;
	padding-bottom: 40px;
}

/*Define Link Styles*/

footer a, footer a:link, footer a:visited{
	color: #FB855B;
}

.hero-unit{
	background-image: url(../img/hero-mars.jpg);
	background-color: #000;
	background-repeat: no-repeat;
}

.hero-unit h1, .hero-unit p{
	color: #FFF;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.8);
}

At this point you should save your files and go check them out in the browser. Feel free to add / edit / hack away at the code used in this example. I hope you learned something and feel free to contact me if you have any questions.