Understand your Wordpress CSS codes quickly

Imagine you saw a beautiful Wordpress theme and you quickly downloaded and installed the theme in your website As usual, you would like to make some changes to the theme layout e.g. the post font size, headings, header or the sidebar etc.

There is a problem – how do you know which CSS codes (in the Theme Editor) relates to a particular area of the theme layout? Do you want to spend a lot of time, through trial and error, trying to understand the CSS codes?

Here is a tip which will help you to immediately know which specific CSS code relates to the exact spot in the theme layout.

This is the magic:

STEP 1:Select any group of CSS codes (from your Stylesheet) e.g.:

h2.pagetitle {
font-size:20px;
width:450px;
text-align:left;
padding:5px 0 0 15px;
font-weight:bold;
}

Add the following code to the group of CSS codes:

border:5px solid #000000;

This is how your CSS code will look like once you have completed the above step:

h2.pagetitle {

border: 5px solid #000000;
font-size:20px;
width:450px;
text-align:left;
padding:5px 0 0 15px;
font-weight:bold;
}

Click the “Update File” button.

STEP 2: Click the “View Site” button to view your theme layout

You will notice that there is a black rectangular border (5 pixels thick) in a particular area of your theme layout. Using this simple method, you will be able to, from your CSS codes locate the exact spot in your theme layout. You can also use this method in cases when you cannot get the results that you wanted when trying to make changes to your theme layout using your CSS codes – it will tell you whether you are changing the correct spot in your theme layout.

If you like this post, please consider subscribing to this site’s RSS feed. You can also subscribe by email and any new posts will be sent directly to your inbox.

Tags: css codes, learn css codes, understand css codes, wordpress css codes