WordPress CSS Tips – Total Beginner

Jun 11, 2014 | CSS, WordPress Wednesday


If you’re ready to add a little spice to your WordPress website and need help with customizing the look a little more than the original theme will easily allow – here are some basic WordPress CSS Tips for the beginning WordPress user.

CSS stands for Cascading Style Sheet. It basically means one file that dictates the look and design of your theme. Making the change to this one style sheet should, theoretically, be applied throughout your website. NOTE: plugins have their own style sheets, so you may not be able to change much about those in this “beginner” level article. Search for more advanced CSS tips here in our blog.

TIP: Before you change your stylesheet – backup your WordPress website

All of your stylesheet design can typically be accessed in your Dashboard >> Appearance >> Editor screen. HOWEVER – we do suggest using a child theme for these customized changes or the Custom CSS box in your theme that some authors are generous to add.If they haven’t offered that area here’s a plugin that accomplishes the same thing. Simple Custom CSS Here is another resource for you – WordPress CSS Basics.


In this video you’ll learn:

1. Changing your font’s color and size

Most WordPress theme authors allow you to simply choose what font size or colors to be used on your website through some basic options. But if they have not given you these easy resources. You can make your websites’ font colors and sizes change with this WordPress CSS tip.

These are the areas you’ll look to change. Increasing the number increases the size. If you’re looking to find a specific color – get the 6 digit HEX color code here.

p{
font-size: 12px;
color: #000000;
}


2. Removing (or adding) a border around your images

Using the firebug tool shown in the video you can click on the image that you want to either add or remove a border to. This is the type of code you’ll use:
NOTE: the 2px is the width- increase the number increase the width. “Solid” is the style of the border and the #000000 is the color code of the border.

img {
border: 2px solid #000000;
}


3. Change a background color

Do you need to change the background color of your whole website, or the background of a button or widget area? This is a simple css tip to help you do just that. Using the firebug tool click on the area you’d like to change and look for a css line that reads like this:

background-color: #ffffff;

Again – you’ll want to find the correct color code you’ll want your background to be. HEX color code here and then apply it to this area.


4. Effecting Links

Would you like to change the text link colors on your website? This is done inside of your css as well. You’re able to change different aspects of the links too – like when it’s hovered over, or when it’s already been visited. Play around with these options to see the fun things you can do for your links.

a {
color: #ffcccc;
}

a:hover {
color: #333333;
}

Other Options –
a:link
a:visited
a:active


5. List styles

Would you like to add some images to your bullet lists or a different style? It’s pretty basic.

  • This is a simple list
  • You can make changes to how the bullet points look
  • You can even add images
  • Or you can even remove the style all together

To remove the style use
ul {list-style: none}

To add images as bullet points use
ul li {
background-image: url(“path-to-your-image”);
background-repeat: none;
background-position: 0 0.5em;
}

Other options –
list-style-type: circle;
list-style-type: disc;
list-style-type: square;
Find More List Styles >>


6. Hide Elements

Need to hide something on your theme that’s annoying you or not needed? Maybe you want to hide the search bar, your featured images or other things? Check out this code!

#searchform {
display: none;
}


7. Border Styles

Even though flat design is in – sometimes you just want a thin border around an image or a box of content. Here’s how you do it. Select the element you want to add the border to and then using this type of css code adjust the elements to create the look you want.

.img {
border: 2px dotted #3f3f3f;
}

Other options include
none
solid
dashed
hidden
double
ridge
And more >>


8. Aligning things on your WordPress website

Would you like to align something to the left or right or perhaps center of your page? Here’s all the css tips you’ll need to make that happen.

text-align: right;
text-align: left;
text-align: center;


9. Margin to add some space

If space is what you want/need around an image or widget area, use the following css code:

Using this code applies a 20 pixels space on all four sides of the element.
margin: 20px;

If you’d like to make the space different on the top, right, bottom or left, think of these four numbers like that.
margin: 20px 5px 10px 5px;

Other options:
margin-top: 20px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;


10. !important

This is NOT the best practice but sometimes it has to be used. If you can’t seem to overwrite something in your css file, try adding !important to the end of the code. This should instantly overwrite it anywhere else in your style sheets.

element {
font-color: #000000 !important;
}


Most Common Errors in WordPress CSS

As you use these WordPress CSS Tips you may run into some snags. Misspelling is one of the most common errors. Double check your spelling. Also forgetting to close an element with the ending } is an issue. No matter what just take your time and be sure to save an original copy of your stylesheet BEFORE you start playing around.