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 rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">

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

Open the  main.css file in your code editor.

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

body

(Set Font and separate Jumbotron Element from the Fixed Navbar)

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

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

(Add color to the footer links)

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

.jumbotron

(Pulls in main hero background image)

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

.jumbotron h1, .jumbotron p

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

.jumbotron h1, .jumbotron 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: 70px;
	padding-bottom: 20px;
}
/*Define Link Styles*/

footer a, footer a:link, footer a:visited {
	color: #FB855B;
}
.jumbotron {
	background-image: url(../img/hero-mars.jpg);
	background-color: #000;
	background-repeat: no-repeat;
}
.jumbotron h1, .jumbotron 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. The finished product should look like this.