meinterest

inally, we reached the last part of styling wordpress theme using CSS, this time I will show you how to style the sidebar and the footer. Open style.css and let’s begin…

Step *1: type this code under .sidebar{} and save.

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 5px 0 5px;
}

This code for styling the parent unordered list (ul) tag. I used (list-style-type) property to remove the bullets from the unordered list, set margins to (0) and padding to (0 top, 5 right, 0 bottom, 5 left).

Step *2: add this code under the previous code and save.

.sidebar ul li{
padding: 5px 0 5px 0;
}

This code for styling li inside ul. So I used the padding property to give a space between them.

Step *3: add this code under the previous code and save.

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

This code for styling the heading tag h2. I used  the property (font-family) to choose a font and (font-size) property to choose a font size.

Step *4: add this code under the last code and save.

.sidebar ul ul li{
padding: 0;

line-height: 20px;
}

This

code will add a (0) padding to the last li in unordered list to make it look good. And add space about (20px) between lines.

Step *5: now we will style the footer, add this code to the #footer {} and save.

padding-top: 15px;

I add this to add a space between the footer div and container div.

Add this code under the #footer{} and save.

#footer p {

line-height: 18px;

}

This code for styling p tag in the footer, I add a space between lines about 18px.

Now we finished from styling our theme using CSS, the next lesson about dividing the index.php. seeya.

Filed under: coding, design