• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • Rocket.net
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
WordPress Tips & Tricks

5 Super Simple CSS Codes To Help You Customize Your WordPress Site

Last Updated on: March 19, 2016 Ariel Rule 33 Comments

5 Super Simple CSS Codes To Help You Customize Your WordPress Site

CSS is hard! 

Sound like something you might say? You wouldn’t be alone. CSS (or Cascading Style Sheet) is a coding language that can be a tough little baby to wrangle.

However, to say CSS is hard is a bit harsh. Like any language, CSS can be a bit tricky to understand at first, but once you understand the basics, things start to fall into place.

The best way to learn CSS is to understand what it is and how it works. Then, you can learn some basic code snippets to help you grasp that initial understanding a little more and you’ll be off designing in no time!

Our post is going to do just that.

What Is CSS?

Sure, CSS means Cascading Style Sheet but everyone will tell you that. However, that doesn’t really help, does it?

There is any easier way to understand what it is.

Think of HTML as the frame of a house, and CSS as the paint job to the outside. When you paint the trim of the house, or stain the front deck, does that change the frame of the house itself?

No, it doesn’t. Instead, it merely changes the appearance of things. The foundation and the frame of the house stay the same.

This is what CSS is.

It alters the appearance of your site, but it doesn’t disrupt the foundation or core of it.

Every house has paint on it. Every WordPress theme uses CSS.

They work together to create a website and you can use some rather simple CSS code snippets to change that so-call “paint” of your theme.

In fact, you just might be surprised how easy it is.

Simple CSS Edit One: Editing Font Type And A Quick Lesson On Writing Code

When using a theme like the Genesis Framework, changing something as simple at the font used on your site needs some CSS. But don’t worry. It’s really not that hard to do.

To make any CSS changes to your theme, you’ll first need a custom CSS area to make these adjustments. Don’t alter the Stylesheet that comes built into your theme.

Instead, use a plugin like the Custom CSS option that comes load in Jetpack. Any of your CSS alterations you make in there will override the predetermined CSS of your theme.

Before you can edit the font, you need to figure out which area you want to edit.

There are 7 main areas that you can edit your font:

  • All 6 Heading Font Types
  • The Body Font

The tag markup for these is simple. For example, if you want to edit the Heading 1 font that shows up on your site you would use the tag, h1. If you wanted to change the Heading 2 font, the tag would be, h2 and so on.

Here is an example of how to write CSS code to change your Heading 1 font:

 h1 { font-family: 'Georgia'; } 

Now it’s true, you could try copying and pasting that, but I want you guys to get a better understanding of how this really works.

The first part written (h1) is the subject you wish to change. This symbol ({ ) opens your line of code and this one ( } ) closes it.

Okay, okay.

This probably still sounds confusing, but when I was learning CSS I taught myself a handy trick for remembering how to write CSS correctly. Like this:

h1 { opens the door to his closet

In search of something to change into: ‘He finds what he wants’;

And then he closes the door} 

Back on topic; here is another example of how you can make changes to your font.

 body {
  font-family: 'Arial';
  } 

By changing the element from h1 to body, I’ve now told the Stylesheet that I want to change the body font that shows up in posts and pages to the Arial font.

That’s pretty simple right?

If your theme is Google Font enabled, you can even use the fonts from there on your site as well.

Simple CSS Edit Two: Edit Font Color

This little CSS trick is a nice way to change up the color of your menu font or the color of the body font. Like the code snippets written above, all it takes is a couple short lines of code to really change things.

Say that I wants to change the color of my Heading 2 font to something different. I can do that by following a similar outline that we did before (remember the story?) but with the main lines of code changed a bit. Like this:

 h2 { color: #4f4f4f; } 

Notice that the subject is defined as h2 and we still have the opening and closing tags ({}), however, the way the code is written is a little different from the one above when we wrote the code for a font change.

Unlike the font that needed to be closed off by parentheses, (‘ ‘) the hex color element doesn’t need that.

Now, you don’t need to write code for the same subject over and over again to change certain aspects of it. You can combine the code for that same subject to make things easier to find and change in the future. For example, you can combine Font and Font Color into the same line of code.

 body { font-family: 'Roboto'; color: #4f4f4f; } 

See how I did that?

I have two lines of code inside of the that one subject line. When you need to make multiple changes to a single subject, write the code out like this will save you time. Just be sure that you close those individual lines of code with a semi-colon (;) before you move on to the next line.

note: to help remember to do this, think of the semi-colon as a period at the end of your sentence. You never end a sentence without a period. Never end a line of code is CSS without a semi-colon. 

Simple CSS Edit Three: Background Color, and A Browser Tool You Didn’t Even Know Your Had

Editing the color of certain things on your site is another super easy CSS trick. All you need to know is element or subject that you’d like to change.

A handy tool that many designers use – myself included– is the Inspect Element tool in our Google Browser. This is an awesome too for trying to find the right subject to change and define.

To find that, simply double click your mouse to pull up the options as you can see below. Select Inspect Element, and you can now search your websites editable elements.

Using The Inspect Element Tool in Google Chrome To Edit CSS

See this picture here?

Editing Color With CSS

I have one menu item highlighted in a different color from the rest of my menu to stand. In order to do that, I used my Inspect Element Tool to figure out the correct name for me to edit.

Editing Menu Color with CSS

Now as I scroll over the menu items, the actual code name that it is given will show up in my highlights. The one that I changes had the name of: #menu-item-473 (You can see that that is the name  of it in the yellow box. It’s name is highlighted in blue.)

That is the name of the subject that I wanted to change. To change the background color of that menu item, I start the line with it’s name and declare that I want to change the background, like so:

 #menu-item-473 { background-color: #D65050; } 

Again, I start by telling the Stylesheet the subject I want to change (#menu-item-473) and then I tell it what to change (background-color) and what to change it to (#D65050).

Whatever you decide to change the background of will have a different name than this, but thankfully, the Inspect Element option in your browser will make finding it so much easier.

Another awesome thing about Google Inspect Element Tool is that you can edit things in real time to get things just right, and then you can copy and paste all your editing work from there, into your CSS Custom Style Sheet. Talk about time saver!

Simple CSS Edit Four: Float

Sometimes, it’s nice to be able to do something a little different with your primary menu or predefined widgets on your site. Maybe you’d like to take, one menu item and place it further to the right than on the other items sort of like I did with the menu pictured above. (Also pictured below in full width.)

How To Float Right in CSS

To do this, you can use the Float code snippet to do just that. Like the steps above, you should use the Inspect Element Tool to find the name of the subject you wish to change. The one pictured here is the same as the one mentioned above. (#menu-item-473)

In order to get this item to move over, but to still look nice on a mobile screen, this is the code I wrote:

#menu-item-473 { background-color: #D65050;  float: right; }

It was seriously that easy. Now I have a menu item that stands out, which what I needed it to do. You can also apply this to things other than your menu items.

For example, if you have a widget that you’d like to reposition, you can could use the float: right; or float: left; code snippet to change where the your widget is display.

It takes some time and tweaking, but CSS becomes easier to use the longer you mess around with it.

Simple CSS Edit Five: Text Align

Aligning your text is something you can do in a post, sure. But what about your widget titles, or something of the like?

You can use this CSS code to easily align your widget text title.

I use the Genesis Framework for my websites, and this is the code it took to align the titles of my widgets:

.footer-widgets .widget-title { text-align: center; } 

The element or subject name in your theme may differ slightly from this, but you get the idea.

This small code will keep my text in my footer widget titles centered, and since I proclaim the .footer-widgets together with the .widget-title, only the footer titles with center.

So that’s it! 5 super simple ways that you can edit your theme using CSS! CSS is like any other language. It’s hard at first, but once you get over that initial hump of understand, it’s a breeze.

+ Share
Disclosure

Ariel Rule

Ariel is a WordPress Web Designer specializing in the Genesis Framework and a freelance blogger for hire. When she's not writing or designing websites for her clients, she is helping others learn how to make money online.

Related Posts

Back to all articles
  • WordPress’ Settings: A New User’s Checklist

    WordPress’ Settings: A New User’s Checklist

  • Introducing The Wp-Config.Php File For WordPress

    The wp-config.php File: Why It’s the Most Important File For WordPress

  • Best Black Friday Deals

    Black Friday and Cyber Monday Deals, Coupons, & Discounts for 2021

Coupons

View more deals
  • Recipe Card Blocks Coupon
    15% OFF

    Recipe Card Blocks Coupon

    Running a cooking or food website can be fun (and tasty) – but
    Get This Deal
  • WP 2FA Coupon
    20% OFF

    WP 2FA Coupon

    Security should be at the forefront of all site owner’s min
    Get This Deal
  • Themskingdom Coupon
    20% OFF

    ThemesKingdom Coupon

    First impressions count. As such, you’ll want a WordPress t
    Get This Deal
33 Comments Leave a Reply
  1. Michelle F. says

    August 26, 2014 at 2:32 pm

    What a great tutorial and some great code to easily put int.

    Reply
  2. Jess Scull says

    August 26, 2014 at 3:05 pm

    I don’t use wordpress, but these are great tips & codes for someone who does!

    Reply
  3. Franc Ramon says

    August 26, 2014 at 4:17 pm

    I haven’t used CSS codes for my site as I’m not familiar with CSS language. I make it up by trying to look for plugins. These simple codes really helps me in managing CSS codes.

    Reply
  4. Patty says

    August 26, 2014 at 5:03 pm

    I use blogger so this didn’t really apply to my blogging. I’m sure WordPress users will appreciate it.

    Reply
  5. Vanessa says

    August 26, 2014 at 5:26 pm

    Thank you so much for these. I used to be very good with CSS and HTML codes. I am still pretty good but I have to go back in my log to rehash them.

    Reply
    • Zeeshan says

      August 4, 2021 at 10:48 pm

      Can you give me the code to make my wpform size small and compact please?

      Reply
  6. Margarita Ibbott says

    August 26, 2014 at 8:25 pm

    Really useful! I like how simple these instructions are, I’ve always had trouble with CSS code.

    Reply
  7. carra d says

    August 26, 2014 at 9:52 pm

    Great tips and tutorial.

    Reply
  8. Mary Ann says

    August 26, 2014 at 10:10 pm

    You have the best tutorials! I am excited to use what I just learned, thanks!

    Reply
    • Ariel Rule says

      August 28, 2014 at 2:39 pm

      Thanks Mary Ann! I’m glad you like it

      Reply
  9. Catherine S says

    August 26, 2014 at 11:06 pm

    Thanks for the great tutorial. This is great information for any one who uses wordpress.

    Reply
  10. Melissa Smith says

    August 27, 2014 at 12:30 am

    I don’t use WordPress, but I have a few friends who would love to bookmark this. Thanks for sharing!

    Reply
  11. Liz Mays says

    August 27, 2014 at 4:09 am

    Finally someone explained it in a way that made sense to me. I am so thankful for this post!

    Reply
    • Ariel Rule says

      August 28, 2014 at 6:06 pm

      I’m so glad it helped :). I really tried to break it down as best as I could, so I’m happy that you found it useful.

      Reply
  12. yan says

    August 27, 2014 at 4:43 am

    as a front end developer, css is my jive! having this knowledge has only made me more OC about my layout because i always want things to be properly aligned, and colored! haha >XD

    Reply
  13. Rosey says

    August 27, 2014 at 5:13 am

    It seems this post is well loved! You were nice to make and share it. 🙂

    Reply
  14. Natalie says

    August 27, 2014 at 7:49 am

    These are some pretty simple basic css codes..

    Reply
  15. michele d says

    August 27, 2014 at 1:15 pm

    Great article! Love your tips! They are so helpful!

    Reply
  16. April Smith Decheine says

    August 27, 2014 at 3:34 pm

    I have not played around to much with the css on my Wrdpress site, I use to play around with the code when I had blogger, lots of great tools for switching it up.

    Reply
  17. FamiGami says

    August 27, 2014 at 3:44 pm

    Float is extremely tricky to use so be careful about it! One wrong float can severely confuse you and the solution while often simple, is complex to figure out when you have a lot of divider elements.

    Reply
  18. Marjorie Uy says

    August 27, 2014 at 4:39 pm

    Interesting! Thanks for sharing. Although I’ve been blogging for quite sometime now but seldom I changed themes (fonts, colors etc) i still have to read this again to absorb the tutorial. well explained, nice post. 🙂

    Reply
  19. Rebecca Swenor says

    August 27, 2014 at 6:24 pm

    Great post and information on customizing wordpress sites. This should help many. Thanks for sharing.

    Reply
  20. Rochelle says

    August 27, 2014 at 7:39 pm

    These are great! I have a question — how do I make my body font larger? Would I go body { 14pt } ??

    Reply
  21. Neva @ Retire for the Fun of it says

    August 27, 2014 at 8:48 pm

    These are great tips and an easy to understand tutorial. I will use some of these ideas on my blog and I appreciate your way of explaining each step.

    Reply
  22. Ann Bacciaglia says

    August 27, 2014 at 10:14 pm

    That was a great tutorial i have a much better understanding of CSS now. Thanks for sharing a great post.

    Reply
  23. Rachael says

    August 28, 2014 at 4:44 am

    What a great post. I took a CSS class, and I still feel clueless, but this was certainly helpful. Thanks for the tutorial!

    Reply
  24. angele @shoeboxbegone says

    August 28, 2014 at 5:20 am

    great tips! I’ve used all of these and more (self taught!) and when you breakt it down css really can be easy 🙂

    Reply
  25. Michelle Knopp says

    August 28, 2014 at 6:00 am

    I’m definitely bookmarking this page. What great information, especially for someone like me who has been too afraid to mess with CSS.

    Reply
  26. Michelle says

    August 29, 2014 at 6:21 am

    Thanks for the great tips for wordpress.

    Reply
  27. Kristen says

    August 29, 2014 at 9:08 pm

    I am gonna have to bookmark this. I need help with font colors.

    Reply
  28. ProSiteNews says

    September 1, 2014 at 7:21 pm

    until now I am still trying to understand the language program this website, thanks for leavened

    Reply
  29. Shabnam Sultan says

    September 3, 2014 at 4:25 am

    Awesome 🙂 Tutorial has made playing with CSS easy.

    It is going to help me a lot.

    Reply
  30. Anna Hardy says

    November 11, 2014 at 11:50 pm

    best tutorial on basic css that I have found, Thanks

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

18 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)
210 Best WordPress Hosting Options for 2023 (Pros & Cons)
38 Best Managed WordPress Hosting Providers for 2023 Compared
45 Best WooCommerce Hosting Providers Compared in 2023 (All Budgets)
5Top 9 Landing Page Plugins for WordPress (2023)
69 Best List Building Plugins for WordPress In 2023
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Thrive Themes Review: A Look At The Full Membership
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2023)?
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
1317 of the Best Google Fonts for 2023 (And How to Use Them in WordPress)
14How to Start a Blog in 2022 (Step by Step Guide)
15How To Fix ‘503 Service Unavailable’ WordPress Error
1611 Best Contact Form Plugins for WordPress in 2023
17How to Add a Custom Logo to Your WordPress Site
18How to Fix Error Establishing a Database Connection in WordPress

WPX Hosting: 50% OFF

Save 50% on WPX Hosting using our exclusive coupon code.

Get this Deal

Flywheel(our review)

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.
Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy