5 Most Common Mistakes To Avoid When Writing CSS For WordPress Site

Creating a web design using WordPress is getting exciting, as more and more interactive themes are sprouting up these days. But, inspite of how well a theme might appear to you, you might still would like to make some tweaks to it.
5 Most Common Mistakes To Avoid When Writing CSS For WordPress Site
You can use your WordPress theme’s CSS file (also called as style.css) to modify the look and feel of your layout. A CSS stylesheet within a WordPress website, works in the same manner as it does on some other standard website. For instance, you can change the position of your sidebar, or make changes to the size of the header section and so on. Additionally, you can even format elements placed on your website including links, fonts, etc.
Though making changes to a WordPress stylesheet is quite easy, however, if you are a beginner, there are chances that you might end up making mistakes while writing the CSS.
In this post, we’ll talk about 5 of the most common problems that you might encounter when working with a CSS file of your WordPress website.

1. Missed Spelling Errors

This is one of the most obvious, and most important points as well. We as designers, often make spelling errors, especially when we work in a hurry to meet our project deadline. For instance, it’s pretty common to write 25ps instead of 25px for setting up a margin in your CSS. It’s easy to overlook missed spelling errors.But, thanks to CSS validators we can learn about these tiny mistakes. 
5 Most Common Mistakes To Avoid When Writing CSS For WordPress Site


2. CSS Selectors Details We Forget

Regardless of how much time and efforts you have spent in writing a CSS, you cannot miss to follow the ground rules. Put it simply, you should not forget about CSS selectors details, or you’ll certainly make mistakes while defining a ‘selector’ property. You just need to keep in your mind that each selector should be determined in the form of an ID or CLASS except in the case it is an HTML tag.

Make sure to define CSS selectors in the following format:

 { property: value; property: value; }

For example, let’s see how you need to write an element selector:

p {
text-align: center;
color: blue; 

In this code, element selector is used to define two properties along with its values: “text-align: center” and “color: blue”. Missing even a single brace, colon or semi-colon will not let your CSS selector (i.e. element selector) to work well. Fortunately, CSS validators once again come in handy, as it helps us catch these little forgotten details.

3. Putting Design in Wrong Selector

Often designers or developers, even after creating a great design come across situations when their design
fails to work.
This CSS issue crops up, when you place your design in a wrong selector. For instance, you might have put your design in “#content” when they need to be placed in “#context-text” doesn’t help your layout. But there’s nothing to worry, just cut and paste the design in the right tag. Once you’ve placed the design in the right selection make sure to delete the design that you placed in the wrong selector.
You can even choose to check out your backup files to fetch the lost code.

4. Working on Incorrect Template Module Section

Even though, the new WordPress modular templates are extremely useful often modifying these templates users mistakenly make the updates in the incorrect template module section. For instance, users modify comments.php file rather than comments-popup.php or any other file with the same name. And so, it is very important to make sure which template module section you need to work upon.
But, in case you messed up while working on the template module section, you can rely upon a backup file to fix the mistake you’ve made.

5. Conflicts May Arise Due to Multiple Choices

Lastly, it is common for a designer to assign same information to more than two references. However, CSS cannot decide which reference it should use, which often results in errors. This problem usually crops up when you’re attempting to use your original CSS stylesheet over the new one.


That’s it! Reading this post will provide you a glimpse of the 5 most common WordPress CSS mistakes that designers usually make when modifying their WordPress website layout.

Leave a Reply