Why knowing CSS will give you an edge on WordPress

Why knowing CSS will give you an edge on WordPress

The amazing advantage of using WordPress is that it is a simple and easy platform where you can build AMAZING websites on. I believe it goes without saying that knowing the code behind the CMS will always give you an edge on WordPress.

For example, this very website was built using WordPress and a few neat plugins I’ll show you later on. But the one problem WordPress has is that in times it can be very limiting. Unless you pay for very high-end plugins, templates and widgets, you don’t really get as much customizability.

Now, for the most part, I use free templates. Why? Because generally all I need is a nice header, menu and footer. Everything else I do it from scratch!

Let me explain. The first thing I look out for when selecting a template is that it HAS to be mobile friendly. I’ll talk about how crazy important this is on another post. Anyway, after that I make sure the template allowes for custom CSS.

But, what is CSS? Whell CSS stands for: Cascading Style Sheet. What CSS does is it places ALL the style of your website into one location (.css file). It is from this file that your website grabs all the styling like color, font, size, borders, dimensions, width, height, etc.

Literally everything is on that CSS file. Now, the issue when editign that CSS source file is that if you accidently write something wrong, mis a coma, a dot or anything is out of place, your whole website will go berserk!

This is why I love when a template allowes custom CSS. Why? Because I can play around with the styling without actually touching the style.css source file. In other words it is safer. But be ware because it depends on the class and elements you are playing around with. Custom CSS has the ability to change style on a site wide scale so be careful with the type of style you are editing. 

Anyway, knowing CSS has always given me an edge when building sites. Sometimes very small details mean the world to me or to my clients, and despite the amazing powers of WordPress, at times these small details are not allowed with the tools that I have. 

For example, I just built my blog page where all my blog posts are to be dispayed but I wanted each post to have a shadow displayed on the back. You know, to give the efect that each post is hovering over the page. But the problem was that the plugin I was using didn’t allow me to add a box shadow. 

So what did I do you ask? HAHA! I added custom CSS to my website targeting that specific class. Let me show you.

 

I right-clicked over the blog post preview and selected “Inspect Element”. With this I noticed that every blog preview has a CSS Class named “item”.

So I simply headed over to my Additional CSS section, specified the class I wanted to edit, and added the Box Shadow code that I wanted.

And vioala! Now each of my blog post previews has the Box Shadow effect that I wanted.

The point of all this is to show you that you don’t always need to have fancy expensive plugins when building a website on WordPress to get all the bells and whistles. If you know and understand the code behind all these fancy plugins, you can actually replicate the same thing for FREE!