meinterest

oday I will styling the post area of our wordpress theme by using CSS. So, here we go now…

 

Step *1: open style.css file and type this code, and save. I prefer to type it under the body { } for organization.

h1{
font-family: Georgia, Sans-serif;
font-size: 20px;
padding: 0 0 10px 0;
}

this code for stylizing the heading tag h1, I used the property (font-family) to set a specific font for my posts, the property (font-size) to set the font size to 20px and the property (padding) to add a padding around the text (0px top, 0px right, 10px bottom, 0px left).

 

Step *2: type this code under # container (also only for organization) and save.

.post{
padding: 10px 0 10px 0;
}

This code for styling the post area, I used the property padding to set a padding or distance around the post area (10px top, 0px right,10px bottom, 0px left). Notice that I used for the post div a class not an id.

 

Add this code under the previous code and save.

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

This code is for styling the font of the post. I used the font-family property to choose a font and the font-size property to choose the font size of my post.

 

Add this code under the previous and save.

.entry{
line-height: 16px;
}

This code is to set more space between lines within the entry div.

 

Step *3: add this code in any where in style.css file and save.

p{
padding: 5px 0 0 0;
}

this code is to add a padding around each paragraph.

 

Step *4: type this code under entry {}and save.

p.postmetadata{
border-top: 1px solid #707070;
margin: 10px 0 0 0;
}

this code is for adding a border in the top of the postmeta area, the thickness of the border is 1px, the type of the border is solid and the color of the border is dark gray. I also set the margin to (10px top, 0px for right,bottom,left).

 

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

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

This code is for styling the navigation. I add a padding only in the top about 10 px, set a font size for the navigation, a font weight and set the space between lines about 18px.

 

Now that’s it for today, the next lesson I will styling the sidebar and footer to finish dealing with CSS, seeya.

 

Filed under: coding, design