Adding CSS

We will now see how adding CSS makes our page look a lot better. We have our style.css created; to it, let's add the body, as shown in the following code block:

body{
    font-family: Arial;
    color: #333;
    margin:0;
    padding:0;
}

Here, we have just added a font-family of Arial; the color of the text is going to be a really dark gray. We have set the body margin to 0 and the padding to 0.

Let's start with some core styles for the unordered list. I want to just take off the margin and the padding, using the following code:

ul{
    margin:0;
    padding:0;
}

Now let's add the links or the a tags, as shown in the following code:

a{
    color:#009acd;
    text-decoration:none;
}
a:hover{
    color:#333;
}
.container{
    width:960px;
    margin:auto;
    overflow:auto;
}
header{
    background: #f4f4f4;
    padding:10px;
    border-bottom: 3px solid #009acd;
}

Here, we have added a light blue color, 009acd, and set text-decoration to none. We also require a hover color; in this case, the hover color will just be dark gray. Next, we have container, which brings everything to the middle. We have set a width of 960, and set margin to auto. The overflow is set to auto. We have header with a light gray background; we have set the padding of the header to 10px and border-bottom to 3px solid, and it's also of that same light blue color.

Now let's add header h1 with a margin and padding of 0:

header h1{
    margin:0;
    padding:0;
    color:#009acd;
    float:left;
}

As you can see, we have also added the color as light blue, and we want to float it to the left.

Then, we also want that <h1> to be a link. For this, we will go to the index.html file and wrap it in a tag, as shown in the following code block:

<header>
   <p class="container">
      <h1>
         <a href="index.html">Advanced Wordpress Theme</a>
      </h1>

Next, we will create header, h1 and a with the color of light blue. The text-decoration is set to none, as you can see in the following code block:

header h1 a{
    color:#009acd;
    text-decoration:none;
}

Now let's add a slogan or a tagline, because WordPress by default has an option for that. So right inside of the <h1> tag, we will put a slogan in a <small> tag, which will say Another Wordpress Theme:

<h1>
   <a href="index.html">Advanced Wordpress Theme</a>
   <small>Another Wordpress Theme</small>
</h1>

Let's style that using the following code:

header small{
    color:#666;
    margin-left:1px;
    font-size: 13px;
}

We have added header small, and given it a color of dark gray. We have set margin-left to 1px margin, and font-size to 13px.

Now for the right side of the header, add the following code:

header .h_right{
    float:right;
}

We have header .h_right and we'll float that to the right.

Now, since it has an input, we'll style the input. Let's just make sure it's only for the text input. To do this, we will enter the following code:

header .h_right input[type="text"]{
    width:250px;
    padding:5px;
    margin-top:5px;
}

Here, we have entered type="text" and set a width of 250px. We have also set a padding of 5px, and a margin-top of 5px.

Let's save it and take a look:

We can see our header.

Next, we'll work on the navigation. We want to have the main nav p for stuff like the height, background color, and similar customizations; however, we do want to have just a regular nav class to do the floats, so that our footer menu can have our list item floated, and stuff like that. So we will not put anything for that yet. We want to do li of the nav element. We'll make sure that we have that. You can see in the code we entered so far that we have the nav class and main-nav. Now, we'll float the list items to the left, and we'll enter display:inline and set a padding on the right of 15px:

nav.nav li{
    float:left;
    display:inline;
    padding-right:15px;
}

Next, we'll add nav.nav a, and make sure that the text-decoration is set to none:

nav.nav a{
    text-decoration:none;
}

Now let's do main-nav:

nav.main-nav{
    height:45px;
    overflow:hidden;
    background:#333;
    color:#fff;
    padding-top:7px;
}

Here, we have set the height to 45px, overflow is hidden, and we have set the background to dark gray. The color of the text will be white, and padding-top is set to 7px.

Now let's add main-nav li:

nav.main-nav li{
    height:40px;
    line-height:40px;
}

We have set height to 40px, and line-height to 40px. Next, we'll add the a tag:

nav.main-nav a{
    color:#fff;
    text-decoration:none;
    padding:8px;
}

Here we set the color as white, text-decoration as none, and padding as 8px.

Now we need the hover state:

nav.main-nav a:hover{
    color:#009acd;
}

Here we have nav.main-nava:hover, and the hover color is set to light blue.

We'll save this, and look at our navigation:

As you can see, the whole highlighted area has a class of content, we just want to push it down a little bit and set the line height of all the text:

.content{
    margin-top:30px;
    line-height:1.5em;
}

We have .content with margin-top set to 30px and line-height to 1.5em.

Now we will include a sidebar since we have not done that earlier. For this, let's open the index.html file and add the following code:

<p class="side">
   <p class="block">
   <h3>Sidebar Head</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Nam vel diam hendrerit erat fermentum aliquet sed eget arcu.</p>
   <a class="button">More</a>
   </p>
</p>

We have put our sidebar right underneath the closing </p> tag. We have added a p class with a class of side. We have also added a <p> tag inside called block. Each element in the sidebar should have a class of block. Then we have an <h3> tag, which says Sidebar Head, and we have put a paragraph for which we have grabbed some text. Then, under this, we have placed a button, or a link that is formatted like a button. Now we can see our sidebar.

Let's go back to the style.css file. Here, we'll enter .main, which we'll float to the left, and we enter a width of 65% for it. Then, let's add a width of 30% for side, and float it to the right. Next, for the block style, we will set a border of light gray, which is 1px solid. We will also add some padding of 5px 15px 25px 15px and set the background to a really light gray and overflow to hidden. For h3 in the block, we will set border-bottom, which will be light gray, and solid of 1px; we'll also set a padding of 10px to the bottom:

.main{
    float:left;
 width:65%;
}

.side{
    width:30%;
    float:right;
}

.block{
    border:#ccc 1px solid;
    padding:5px 15px 25px 15px;
    background:#fcfcfc;
    overflow:hidden;
}

.block h3{
    border-bottom:#ccc solid 1px;
    padding-bottom:10px;
}

Let's take a look at this. You can see that now we have our main area and the sidebar:

Next, let's add the article. We will place an article tag with a post class, and we will add border-bottom, margin-bottom, and padding-bottom, as shown here:

article.post{
    border-bottom: #ccc solid 1px;
    margin-bottom:10px;
    padding-bottom:20px;
}

Now let's style the meta area highlighted in the following image; we will give it a blue background:

To do this, let's enter the following code:

article.post .meta{
    background:#009acd;
    color:#fff;
    padding:7px;
}

.button{
    background:#009acd;
    color:#fff;
    padding:10px 15px;
    display:inline-block;
}

We have entered article.post .meta with a padding of 7px. We also added the button class with the padding set to 10px 15px. We also displayed it as an inline block. Let's take a look now:

This looks pretty good.

Let's add the footer now. We will enter footer, give it the .main-footer class, and set a margin on the top of 40px. We'll align everything to the center and give it a dark gray background. We'll set color as white, and height as 60px, padding-top:10px and overflow as auto.

Next we will add the left- and right-hand side of the footer. To do this, we will enter footer.main-footer .f_left with a left float, and we'll do the same thing for the right-hand side, giving it a right float:

footer.main-footer{
    margin-top:40px;
    text-align:center;
    background:#333;
    color:#fff;
    height:60px;
    padding-top:10px;
    overflow:auto;
}

footer.main-footer .f_left{
    float:left;
}

footer.main-footer .f_right{
    float:right;
}

We will now move on to the menu. We'll enter ul with an inline display, and then we have li, as shown as follows:

footer.main-footer li{
    float:left;
    padding-right:10px;
    list-style:none;
}

For li, we have float:left, padding-right set as 10px, and list-style set to none.

Lastly, we'll color the links white. Now, let's take a look:

We'll just want to push footer down a little bit. To do this, enter the following code:

footer.main-footer .f_right{
    float:right;
    margin-top:15px;
}

Now, look at it:

This looks pretty good; it's a very simple design, we didn't want to go all out because the main point of this is to get you familiar with the syntax to create a WordPress theme, not so much about creating a great design. So now that we're done with HTML and CSS, we can move on to create our WordPress theme.