4 Common Mistakes Writing WordPress CSS

The layout of a website not only makes it look appealing to a visitors’ eye, but also help distinguish the website from the rest. And every website theme relies on CSS to customize the layout, giving it a more polished look.  Your theme’s CSS file (or style.css) helps to improve the aesthetics of layout, enabling you to format elements for your theme. CSS works in the similar manner within a WordPress website, as it would on any other website. You can make any changes you want to your WordPress theme’s CSS stylesheet.

Wondering what changes you can make to the CSS file? You can change the size of the header and footer, how sidebar shows up on your site, and format several elements (like font, color, text, links and many more). Put it simply, CSS helps in managing the visual aspects of your website. Once you’ve selected a suitable WordPress theme and installed it, you might want to make changes to your CSS stylesheet.  So, you will open your WordPress website admin dashboard and make a few minor tweaks to the style.css file. But, when you save the changes you find your website is broken. One possible reason could be that you made some mistakes while writing the CSS.

Through this post, I would like to bring to your notice 4 most common CSS mistakes that WordPress users often make.

Limited Know-How About Files Placement

If you’re just a novice and new to the working with CSS (ideally in WordPress), the very first thing you should become familiar with is understanding about the placement of files. Additionally, you should also learn about the files you need to work upon.

You can find the HTML markup code in the index.php file and other PHP files saved in your theme’s folder. On the other hand, CSS files are usually saved as style.css file in the theme folder. In order to change the style of particular element, you will have to make changes to the CSS selectors (i.e. patterns using which you can choose the elements you want to style) in your PHP files rather than the  HTML page.

Forgetting Details About CSS Selectors

The CSS selectors are divided into three different categories: ID, Class and HTML Tags. Keep in mind that each CSS selector should be identified using an ID or a class, except that it is a HTML tag. It is important to define a proper format for selector as follows:

{ property: value; property: value; }

Each selector contains “properties” that comes under curly brackets, and the property is being assigned a value following a colon and semi-colon. Your CSS won’t work if you miss out any of these little details.

Forgetting to Keep a Back Up Of Your CSS

Regardless of the WordPress theme you may be using, you will probably want to make changes to your theme’s stylesheet. But, remember that compared to a plain HTML, customizing or writing CSS stylesheets requires great attention to detail. This is simply because stylesheets are less forgiving in terms of mistakes – even a slight misplace of a comma or semicolon in your CSS file can turn your layout turn into a mess.

So, before making any changes to your CSS stylesheet it would be better if you keep a backup of the stylesheet. You can restore the backup in case our website layout becomes disordered. Browse your “wp-content/themes/yourthemename” folder and look for styles.css or stylesheet.css file. And then, save a copy of this file to your system. You can begin editing your existing stylesheet within WordPress dashboard.


Making Multiple Choices

Developers often assign two references to the same selector. If multiple selectors with conflicting information are used in a CSS file, then it becomes difficult for CSS to make out which reference it should use – that doesn’t cause any errors. This problem commonly arises when you don’t want to bring your existing style sheet on top of the new one.


In this post, I have listed 4 of the most common CSS mistakes users or novice developers often make in their WordPress site. Go through each of the aforementioned key points to understand about the mistakes you should avoid when writing a CSS for your WordPress site.

Author Bio

Jack Calder is a specialist Web Designer at Markupcloud Ltd. a Web Design Company. Jack gives valuable and best tips on context of how to convert PSD to HTML and design technique. He possess a huge experience in technology domain and loves all things comes under web Design niche.

Tobias Gebauer

Webworker, web developer and also web designer. I love blogging and working on my websites all the time. I like to share great web design inspiration, freebies and tutorials with the world :).

You may also like...