Introduction to CSS: Making Theme Changes

How to make theme changes

I have a great question from Jessica to share with you guys! This one is about navigating stylesheets and making theme changes in WordPress:

I feel like I know my way around WordPress pretty well, but the stylesheet scares me. Do you have some basic steps on how to change things in the editor? For example, I can’t for the life of me figure out how to change the fonts on my blog and it took me longer than I want to admit just to change the html link colors. Thanks for any help! I love reading your blog 🙂
Jessica @ Books: A True Story

Hi Jessica! For starters, unless you’re using a custom theme, make sure you’re putting your changes in a separate place. If you have a box to add in custom CSS, add it in there. If you don’t, consider making a child theme. This way if you need to update your theme you won’t lose all of your changes!

Now, in order to change things, you need to use CSS. If you want an extensive guide, you might consider checking out W3Schools. But here’s a list of the basics:

First find out what you’re targeting

There are two main parts to CSS: what part of the site you want to target, and what you want to change. First you need to figure out your target. Is it the entire page? Or the links? Or the blockquote text? etc. Once you figure it out, you have to note down the CSS equivalent. Here’s a short list of some possibilities with their titles (in /* comment tags */ ) and the code you need to use:

/* The whole page */
body { }

/* Paragraph tags */
p { }

/* All links */
a { }

/* Just links on hover */
a:hover { }

/* Blockquotes */
blockquote { }

Changing the style for that target

Now once you’ve figured out what you’re going to change, we need to change something! I’ll give you a few different portions of code for different properties. All of these bits of code need to go inside the { curly braces } from the previous code.

Font color

color:black;

Note: You can use text colors like “black”, “blue”, etc. or you can use more specific hex values (like #ffffff). You can use colorpicker.com to find the hex value.

Typeface

font-family:Helvetica, Arial, sans-serif;

Note: You should always list more than one typeface. The first one will be used if possible, but if the person doesn’t have that font installed, then it will fall back to the next one (and so on..). Always make your last entry either “sans-serif” (if you want none of those curly bits) or “serif”.

Font Size

font-size:12px;

Borders

border:2px solid black;

Note: The first entry is the size of the border, the second is the style (dotted, sashed, solid, double, etc.), and the last is the color.

Background (Color Only)

background:#E62271;

Background (Image)

background:url('image url here') no-repeat left center;

Note: Put the image URL inside the quotes. The next entry (“no-repeat”) tells the browser where you want the image to repeat. You can choose “no-repeat” for no repetition, “repeat” to repeat in all directions, “repeat-x” to repeat only left to right, or “repeat-y” to repeat only up and down. The final parameter (“left center”) tells the browser where you want the background image positioned. You can use directional keywords (like “left top” or “center bottom”), or you can use percentages, or you can use other CSS units like pixels. the first value is the position on the x axis (left to right) and the second value is the position on the y axis (up and down).

Wrapping it Up

This is honestly just a very brief introduction to CSS and stylesheets. It’s hard to cover absolutely everything! So let me know if you have any other questions about changing theme styles or if there’s a more specific thing you want to edit. 🙂