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

Here is an example of how to write CSS code to change your Heading 1 font:Editing Menu Color with CSS
Using The Inspect Element Tool in Google Chrome To Edit CSS
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.)
This is what CSS is.

What Is CSS?

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.
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.)
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.
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.
Every house has paint on it. Every WordPress theme uses CSS.
How To Float Right in CSS
In fact, you just might be surprised how easy it is.
In search of something to change into: ‘He finds what he wants’;
And then he closes the door} 

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

Back on topic; here is another example of how you can make changes to your font.
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.
I use the Genesis Framework for my websites, and this is the code it took to align the titles of my widgets:
You can use this CSS code to easily align your widget text title.
It takes some time and tweaking, but CSS becomes easier to use the longer you mess around with it.

  • All 6 Heading Font Types
  • The Body Font

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. 
See this picture here?
Our post is going to do just that.
.footer-widgets .widget-title { text-align: center; }

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

In order to get this item to move over, but to still look nice on a mobile screen, this is the code I wrote:
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.
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.
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.
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!
It alters the appearance of your site, but it doesn’t disrupt the foundation or core of it.
h1 { opens the door to his closet
There is any easier way to understand what it is.

Simple CSS Edit Two: Edit Font Color

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!
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:
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.
CSS is hard! 
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.
That’s pretty simple right?
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.
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)

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

No, it doesn’t. Instead, it merely changes the appearance of things. The foundation and the frame of the house stay the same.
h1 { font-family: ‘Georgia’; }

Editing Color With 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.
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.
Sure, CSS means Cascading Style Sheet but everyone will tell you that. However, that doesn’t really help, does it?
Okay, okay.
#menu-item-473 { background-color: #D65050; }

There are 7 main areas that you can edit your font:
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:
#menu-item-473 { background-color: #D65050;  float: right; }

h2 { color: #4f4f4f; }

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:

Simple CSS Edit Four: Float

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.
body { font-family: ‘Arial’; }

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?
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.
Unlike the font that needed to be closed off by parentheses, (‘ ‘) the hex color element doesn’t need that.
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.
The first part written (h1) is the subject you wish to change. This symbol ({ ) opens your line of code and this one ( } ) closes 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?
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.
If your theme is Google Font enabled, you can even use the fonts from there on your site as well.

Before you can edit the font, you need to figure out which area you want to edit.
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.
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.

Posted by WordPress Guru