WordPress CSS Tutorial, CSS Made Simple

Hey guys! I know a lot of people are using WordPress today to create websites in the snap of a finger. You do not have to know Cascading Style Sheet(CSS), or even HTML. Everything is done in the customize option. This WordPress CSS tutorial will hopefully make things a little easier on you!

The only problem with customizing without knowing CSS is sometimes you will see something you would like to change, but WordPress does not really have that functionality. Maybe you cannot find it or do not know how to change it.

But I am Not A Programmer?

A programmer is someone that writes programs. All you are doing is reverse engineering something that is already created. A programmer created your WordPress theme and you are allowed to modify it. Do not be intimidated by the prospect of coding. It is so simple and there are so many resources out there to help you. I will show you how to customize your WordPress site here with what knowledge I have gained.

The beauty of being efficient is not recreating the wheel. You want to learn to code your CSS, not create an entirely new sheet. Injecting like 1 or 2 lines of code is nothing to be scared of at all. Here is a sample for you:

body{

color: red;

}

That is it. Literally that simple. You just changed the color of your text. See how easy it is?

Using WordPress Customization,

Here you see we have the home customization menu for WordPress. It is fairly straightforward and to see what happens, just go down each option and make some changes. You will see a lot of things in this menu are customizable, but a lot is missing. Now when you upgrade your WordPress site, more are unlocked, but still, you need to know some CSS to really get what you want.

The way I do this is I find something I want to edit and then go down the customization menu changing things until I find it. A good rule of thumb to know is if you change a lot of stuff and do not want it, just refresh the page and everything will default. Just do not hit save before you do this. Once you have pinpointed the option you wanted to change, then you can go directly to it and save changes.

Inspect Element, The Ultimate User Tool

Inspect element is insanely powerful. A lot of people do not know how powerful it is. You will need to know how to use this to create successful CSS, as it makes things so easy. Here is how you use this powerful tool:

  1. Right-click the part of the web page you want to change.
    1. Here I chose the header because I want my text to be on the left side.
  2. Click inspect element and the CSS will show up on the bottom.
    1. Do not be afraid! This is really easy and simple.
  3. You will be taken directly to the code you click on.
    1. When you mouse over a line of text in inspect element, you will see it highlighted in blue on the web page. This is the code I was taken to.
  4. This part is common sense. The text is in the header, so I will look for the <header> tag.
    1. Here we see the header and it has a class which makes it unique. The class is mh-header.
  5. Now go to the bottom button on your WordPress customization menu called “Additional CSS”.wordpress css tutorial
    1. Here we place code that will instantly be applied. Your code is wrong if nothing happens.
  6. I want to change my header to align left and then change my background color.
    1. Notice I put header at the beginning since it’s in the header. Then I put .mh-header because that is the class.
    2. Use brackets to open and close your code.
    3. Place a semicolon after each line of code, kind of like periods at the end of sentences.

 

Now my text is aligned left and I am happy! Just mess around with coding your CSS until you see something change and then look for ways to mold that into what you need.

 

Now You Are a CSS Pro!

I just used a few simple lines of code to change my header. Sure the customize tool is useful for WordPress, but knowing how to go in there and do it on my own saves me time and headaches. Sometimes you have to dig around the customize menu and do not find what you are looking for or forgot where it was. Hopefully, this will help and save you some time. If you have the programmer bug now that you have had a taste, you should definitely look into the best programming languages to learn.

Still Having Trouble After the WordPress CSS tutorial?

If you are having problems injecting your code, please feel free to comment below! I love to use CSS and beautify designs. The four design principles are a funny acronym known as CRAP. Contrast, Repetition, Alignment, and Proximity. Keep these in mind when designing your website and CSS. Thank you for reading and I hope this helps!

 

-Pat

 

Newsletter


About Pat 26 Articles
I love to play the drums, build websites, learn tech, and explore! My passion is music and technology. I want to be in the fast lane of life, not the slow lane or the sidewalk.

8 Comments

  1. wow i never knew about this feature and it definately solves some of the problems and questions i’ve had. After reading this I feel like a techie and more confident. Thanks so much for the post and teaching this for a newbie like me.

    • Hey Nathan,

      It feels great to know that I helped someone learn some more. I appreciate the comment and I will continue to publish more content, so stay tuned!

      -Pat

  2. Thanks for this post! I am indeed not a programmer but managed to build my website step by step. I had no idea I could use the Inspect Element tool. Overall the whole idea of coding is interesting to me. Kids world wide are learning how to code and I believe the older generation should learn it too.

    • You are very welcome Dira! Building a website step by step is quite impressive, you are definitely tech savvy! The Inspect Element tool is extremely powerful for web design and finding specific content. I am glad I could help out. I am going to make some programming for children and I will definitely try to help the older generation as well. Thank you for reading!

      -Pat

  3. Thanks for taking the fear out of a strange looking bit of letters and symbols Pat! I had used this function once or twice on my website, but being away from having to do this, this is a great refresher, relieving the stress of thinking of creating a new website soon.

    • Hello Lynne! Thank you for the comment and I am glad I could help you. Building websites is so fun and can be intimidating, but if you need any help in the process, I am always here!

      -Pat

Leave a Reply

Your email address will not be published.


*