In this video, we're going to start styling our page. For the code, go to "www.github.com/jordanhudgens/social-network-html-css".

For styles, go to a file called "main.css". As you can see, this has almost 5000 lines of code, so I'm just going to copy paste it, and we'll go through it. It would take an enormous amount of time for us to type it all out, this is why we're doing it this way.

Don't let such a long file intimidate you, as many of the classes will have overlapping styles.

So, let's get started! I'm going to create a folder called "css", and a subfolder called "common". Inside this, we're going to create a file called "main.css", and we'll paste all the code in this file.

First off, let's link CSS within our HTML file, below the bootstrap link because bootstrap is our foundation, and we want our CSS styles to be built on it.

<link href="vendor/bootstrap-3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/common/main.css" rel="stylesheet">

If you refresh the page, this is how it should look.

If you see the buttons, they look a lot different from the default bootstrap buttons, and this is because we have overridden them with our custom styles. Also, check for responsiveness by reducing the size of the page.

I think it's pretty impressive, but we still have some work to do.

Before that though, let's walk through our CSS code. We obviously can't go through line by line because it's too much, and also much of it is what you already know. So, we'll talk only about a few things here.

There are some styles that affect the entire page.

* {
  outline: none;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

We want the entire page to have a height of 100%, and want no outline. The a links and pseudo classes also have no outline or text decoration.

a {
  border-radius; 0px;
  text-decoration: none;
}

a:active, a:hover, a:focus {
  outline: none;
  text-decoration: none;
}

Next, we'll move on to something important. If you see the .btn-default class, you can see how we have overridden the default bootstrap class. You can even compare it to the .btn-default class located in bootstrap.css.

This is the default one in bootstrap.css

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

Compare it with what we have in our CSS code.

.btn-default {
  background: #0991A9;
  padding: 11px 35px;
  color: #fff;
  font-size: 14px;
  font-family: Museo-500, sans;
  border-radius: 0px;
  border: none;
}

We also have some custom buttons called .btn-dotted.

.btn-dotted {
  color: #666666;
  font-size: 14px;
  font-family:Museo-500, sans;
  text-transform: uppercase;
  height: 50px;
  text-align: center;
  background: none !important;
  border: 1px #989898 dotted;
  border-radius: 0px;
  margin-bottom: 109px;

You can't find this class in bootstrap.css because this is a custom class we've created for this page.

So, to override classes, you'll have to use the same class name, but inside it, you can define your own style.

However, to do that, your link to stylesheet must be below that of the bootstrap, as the style is of a cascading nature.

If you reverse the code, the default style of bootstrap will not be overridden, so you'll see only the default style on the page.

Can you see the difference in button styles? This is why it's called cascading stylesheet.