Common CSS Mistakes To Avoid When Customizing Your WordPress Theme

Irrespective of how well-designed your WordPress theme may be, you
may want to change its layout to match the changing web trends or users' needs.
In order to make modifications to every WordPress theme layout, you'll have to
make changes to your theme's CSS file (or style.css).

What's more? The CSS file gives you the ability to format your
theme's elements, in order to improve the visual aesthetics of layout. In
essence, you can make any changes to your WordPress theme's as you want using
the CSS stylesheet. For instance, you can change the position of sidebar, size
of the header and footer in theme's web pages and so on.

When writing a CSS for the WP powered site, you can easily make
changes to your theme layout with a few clicks, but you can even mess up your
layout while making tweaks to your CSS. In case, you encounter any issue with
the website theme layout, you'll most likely visit a WordPress forum or
community to find what just went wrong. Indubitably, there are a number of
willing volunteers ready to help you, but wouldn't it be better if you could
resolve the problem on your own following some simple steps.

So to help you, I've compiled a list of some common CSS mistakes
that WordPress users (especially beginners) occasionally make during theme
customization.

Missed Spelling Errors

Perhaps the most common CSS mistake that a novice often makes when
customizing a WP theme is missed spelling errors. But, the irony is that even
professionals make missed spelling errors! Theme customization is not a simple
task and requires to pay attention to several aspects, and thus it's easy to
overlook spelling errors. For instance, it's easy to write "left" as
"leftt", or you may assign "11ps" for a margin instead of
"11px". Wondering how you can deal with this problem? Don't worry, as
CSS validator help catches missed spelling mistakes for us.

Forgetting Little Details Regarding CSS Selectors

Regardless of how creative you may be in writing CSS, there are
some guidelines you need to follow. Each CSS selector is segregated into 3
different classes, such as:

·ID

·Class

·HTML tags

It is important for you to ensure that the selector needs to be identified
either as an ID or a class except when it is an HTML tag. Also, make sure that
the selector is defined in the right format as shown below:

{ property: value;
property: value; }

As you can see in the above line of code, each selector contains some
properties (along with values), curly brackets, colons and semi-colons. In
case, you miss any of these little details, your CSS selectors won't work.
Fortunately, CSS validator make you learn about the such little forgotten
details.

Placing Design in Wrong Selector

Even though, you have created an excellent website design, adding
it in #content when the design was actually meant to be added in the
#content-text selector won't make any changes to your theme layout. There's
nothing to worry, as you can immediately see the mistake you've made when
viewing the page. All you need to do is cut and paste your design contents in
the right tag, and once it's completed make sure to delete your design from
#content. Worried what happens if you lost the code? You can refer to your
backup file.

Note: Make sure to create a backup for your CSS stylesheet, so
that you can get your lost data as and when required.

Placing Content in Wrong Template Module

There's no denying that WordPress new modular templates are very
useful, however, one problem with using such templates is that users often do
mistakenly make modifications to the wrong module file. That's because, the
files have similar names. For instance, you may make changes within comments.php
rather than comments-popup.php. In case such an accident happens, a backup of
your file can prove very useful for you.

Multiple Choices May Cause Problems

In many cases, developers often create two references to the same
CSS selectors. If you're having several selectors with conflicting information,
CSS can't recognize which reference it must use. You will most likely come
across this issue when you bring up your existing CSS stylesheet over a new
one. For example, in case you're having a fight with a selector for, let's say,
h2 heading and nothing happens then make sure to search throughout your
stylesheet to see if it contains a second reference to that selector or not.

Conclusion

If you made some changes to your CSS file to customize your
WordPress theme, and found the theme broken or cannot see any changes, it is
recommended that you should go through all of the aforementioned key points.
This will help you learn about the common mistakes you might have made when
writing CSS.

Author Bio:

Jack Calder is working as Web developer in Markupcloud Ltd. Which is the toppsd to htmlconversion company. Instead of all these things he also shares important & useful information regarding new updates.

Publisher's Last Words:

This is a guest post by Jack Calder, Thanks to Jack Calder for this awesome and useful information.if you want to post your article on http://www.allaboutcomputing.net you can contact me. For more about Computer programming and for many more about Computer or web designing stay connected with http://www.allaboutcomputing.net .

I hope you have got answers of some Questions by this small post and I know you have lot of questions, So please feel free to ask in comment section or you can mail me my e mail id is : tushar.bedekar11@gmail.com

About the Author

Tushar Bedekar is the founder of this Webpage .He is a student of "Electronics and Communication Engineering" and a part time blogger. He has many blogs and websites. The Aim of this Webpage is to help other people in updating their knowledge about Basic Computing and Programming. Thanks for your appreciation and also thanks to " THE YOUNG DEVELOPERS " Team . You can find him on FACEBOOK and GOOGLE +and LINKEDIN