A Beginners Introduction to CSS For Small Business

How to Customize a WordPress Theme: An Intro to CSS

As many of you know, I am a WordPress girl through and through. It may because I like the freedom to do exactly what I want with my site, or it may be because I like a challenge.

In the last post of the ‘Build a Blog’ series, we looked at how to choose a WordPress theme.

However, I know for those just starting out, that WordPress can seem like a gigantic monster ready to eat all your content and wreck your display. So, I wanted to put this little guide together for those who want a gentle introduction to customizing their WordPress theme and getting it to behave nicely.

The Basics

So, before we get into the details, let us have a quick overview of the main parts of your WordPress account.

1. Admin

The bar on the left hand side of your dashboard screen here is your admin area. You can get a lot of your changes done through this without having to go anywhere near your coding. If you have purchased a premium theme then it is likely that you will have ‘theme options’ panel where you can make direct changes to the look of your theme.

2. Plugins

When designing a theme, developers have a rule. Never code functionality into your theme that can be achieved with a plugin. I mention this because there are so many plugins out there that if there is something specific you want to do with your website, you will probably be able to find a plugin that can do it for you. Saving you the trouble of having to dive into any files.

3. Database

Whilst you are customizing your theme you shouldn’t need to touch your database. This is where all the information for things like your posts are stored. If you have ever checked out the folders in your WordPress file you will notice that all your blog posts aren’t saved in there. They are saved on the database.

4. The Theme

And finally, what we will be discussing today, your theme. The theme of your website is like the paintwork on the front of your brick and mortar shop. It’s not what is holding the building up, it’s just how it looks.  Inside your theme folder you will find PHP, CSS and images.

What we are going to be looking at primarily today is CSS.

Do not be scared of the acronym. If you look at a length of code in abstract it looks crazy complicated but what I want to do today is introduce the basic concepts behind the CSS and how to apply them to your theme.

Cascading Style Sheets

Yep, that’s what CSS stands for. Now, while you can make some significant changes by using CSS, the actual principle of what you are doing is pretty straight forward.

You use CSS to say to your website;

‘hey, you see those headings on my blog posts? I want them to be green.’

It’s choosing the element you want to change and telling WordPress how you want that element to look. That can be colour, size, or letter spacing etc. Anyway you want to change it.

There are three things you need to know:

• The Selector (what element you want to change eg your heading)
• The Property  (what you want to change about it eg the colour)
• The Attribute (how you want to change it eg to pink)

Here’s how it looks:

Selectors

It sounds simple when you say it but selectors are the things you want to select. There are three main categories of selectors.

There are three main types of selector you can use:

1. Type

These selectors can be anything you might recognize from your basic HTML, like h2 0r body. For example, if your blog titles are all ‘h2’ headings and you want all your blog titles to be pink you could do this:

H2 { color: pink; }

H2 is your selector here. In this bit of CSS we are saying to your website, hey, all those h2 titles? I want them all to be pink. K, thanks.

2. ID

OK, so what if you want to style a particular element on your blog? This is where your ID selectors are used to style a particular element, like a button or your sidebar. You should remember to include # before the element. Like this:

#sidebar { font-weight: bold; }

So in this example we have selected the sidebar element of your blog and turned all the text into bold. Not sure why you would want to do that, but it’s certainly going to make an impact.

3. Class

Finally, these selectors are used when you want to apply your styling to a particular group of elements all at the same time. In this case you should use . before each selector. For example:

.featured-image {width: 800px;}

So, for example, you don’t want to have to specify what size you want your featured image to be every time you insert one right? If you use the .featured-image selector that you can input exactly how you want all your featured images to look.

Properties

So, once you have put in what element you want to change (or select) you then need to say what you want to alter about it.

So, you say I want to alter h1 and I want to alter the font. You say this by putting h1 (and that’s all you want to change so then you place your opening bracket { ) and then you write what you want to change:

h1 {font-family:

Here are a few examples:

Colours

Now, in the above example we used the value ‘pink’ to change our heading. However, if you have your branding all sorted then you probably want to get a little bit more specific.

There are several ways to input a colour; by the name, which is somewhat limited, by the RGB colour and by the Hex value. For example;

• red
• rgb(255,0,0)
• rgb(100%,0%,0%)
• #ff0000
• #f00

Yep, any one of those will get you red. Nice and simple.

Fonts

Font Family

Now, I wanted to talk to you quickly about fonts because sometimes people are curious as to why code is sometimes written like this:

h1,  { font-family: Verdana, sans-serif; }

So, here we can see that we are telling the CSS to style our ‘Heading 1’ in ‘Verdana’

So why does it have sans-serif written after it?

OK, so you know sometimes when you open something in Word or Photoshop it might say something like ‘can’t find font’. ie you haven’t got the particular font installed on your computer.

But on the web, if the person who is viewing your website doesn’t have ‘Verdana’ you want to control what they see right? So the code above is basically our way of saying, if they don’t have Verdana, find a sans-serif that they do have.

FYI technically this is called a  a ‘font-stack’

Oh and also, if you want to specify a font that is more than a single word, like Times New Roman then you need to put it in quotation marks, like so:

font-family: Verdana, “Times New Roman”, sans-serif;

Font-Weight

Font weight sounds more complicated then it needs to be. We’re talking about making something ‘bold’ or ‘light’. eg

font-weight: bold;

You can also make it lighter as well like so:

font-weight: lighter;

If you want to get super specific you can also enter the following values: 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800 or 900.

However, word of warning, some older browsers will get confused and grouchy if you use the numbered elements. Damn kids and their technology.

Font-Style

Quick and easy, you can have:

• font-style: italic
• font-style: normal

Text-Decoration

Oh yes, super fancy. This is where you can have text underlined, ‘overlined’ and struck through. As so;

• text-decoration: underline
• text-decoration: overlineplaces
• text-decoration: line-through

You might want to adjust these values if you want your links, for example, to be underlined. Or not underlined as you wish (eg text-decoration: none)

Text-Transform

This is one is useful if you want to make sure all your h1 headers are in ALL CAPS, for example.

• text-transform: uppercase
• text-transform: lowercase

So those are to change the element to uppercase or lowercase as you choose. This one is also handy:

text-transform: capitalize

That one capitalizes the beginning letter of each word, also handy for titles.

---

Woah, OK, that’s quite a few things to play with already right?

So, now you know what you are changing, how are we changing the CSS?

Making Changes to CSS easy

So how do you actually make these changes to your WordPress theme? Well, I will tell you, however first let’s play it safe.

1. The Safe Test Zone

If you are anything like me, when I first started the thought of accidentally putting in the wrong bracket somewhere and crashing my entire site was so real! So, here’s a fun and catastrophe free way to test out your CSS changes.

This may sounds magical but, you can actually use your web browser to help you out here.

Google Chrome

If you have Google Chrome (high five for you!) then you are looking for a tool called DevTools. To find it press Ctrl + Shift + I to find the windows.

Safari

If you are using Safari then you are looking for ‘Web Inspector’ and you can find it in ‘Preferences’ under the ‘Advanced Menu’. Just tick the box that says ‘Show Development Menu’.

What does it actually do?

Basically you can now view the CSS of the website that you are currently browsing and change it. Only for you though, I’m afraid, so you can’t swing by the Tory website and change it all to neon pink unfortunately. However, it does mean that you can test out your CSS on changes to your website and see what they look like without actually altering the real code on your website.

Nifty, yes?

2. From the Editor

OK, so you can play safe in the knowledge that your website won’t be affected. However, what do you do when you are ready to take the next step?

The most straight forward way is going into your Appearance option in your WordPress Dashboard and selecting ‘Editor’.  It should open ‘style.css’ which is, you guessed it, your CSS style sheet!

This is where you can make the ‘real’ changes to your site after you have tested them out.

However, I should point out that this method does have two downsides.

First of all it makes it difficult to keep track of the changes that you’ve made and thus harder to undo if you should want to revert it back to the original settings. Secondly, if you update your theme then you will lose the CSS changes that you have made.

SO….is there a better way?

Sure is friend.

Let me introduce you to Jetpack.

You can add a custom style sheet for your website by using Jetpack. Search within Jetpack for ‘Custom CSS’ and activate the custom CSS option.

Now, within your WordPress Dashboard, go to ‘Appearance’ and select Edit CSS.

All the styles that you add here will override your current CSS. So, for example, if you were to update your theme then these CSS styles would remain in effect.

Conclusion

And there you have it, a whirlwind introduction to CSS!

Do you need some help with CSS or have any awesome tips for your fellow girl bosses? Share them in comments!