Beginners’ Guide for Using CSS with WordPress

CSS is the ‘style guru’ of your website.

CSS, or Cascading Style Sheet, and its variations thereupon (LESS, SASS) need no introduction in front end developer community. It’s a language that essentially lays out the ‘floor plan’ of your website. It lets you define the rules which govern what every element and their combined effect would look like to visitors. Compare the WordPress templates (header.php, sidebar.php, footer.php, and so on…) as the ‘furniture’ and the HTML as the walls of your room. Alone, they simply exist. With CSS, they can be altered (in appearance, dimensions etc.) to make your website look stunning.
Coming from that perspective, CSS is awesome. In this post, I’ll cover a few ways and basic tips to help you start using your own CSS in WordPress.

First, there are three ways to add/edit CSS in your WordPress theme:

1. Editing style.css

1. From your Admin, go to Appearance >> Editor.
2. On the right side of the screen, you’ll see a list of your current theme’s files. Find style.css in the list and click it.
Another way to find this file is to access your WordPress installation directory via FTP (or other client). Go to path /wp-content/themes, open one of the theme folders listed here, and find the style.css of this theme. This will open the WordPress theme’s main CSS file (style.css) right in your WordPress dashboard. You can edit it as necessary.
Note that making changes directly in style.css of a theme is frowned upon. If you update the theme, your changes will be lost.

2. Creating a Child Theme

This is how you should make edits in a pre-existing WordPress theme. You can understand child themes perfectly if you compare a regular theme, say TwentyFifteen, to a picture, and the child theme to a plastic ‘overlay’ you can use to trace the outline of that picture. The original picture (parent theme in this instance) remains completely untouched, but the overlay (child theme) loads first.
Creating a child theme takes less time than reading this practical guide. Note that WordPress theme frameworks like Genesis and Hybrid Core work on the same concept.

3. Via Simple Custom CSS plugin

Simple Custom CSS is a popular WP plugin you can use if you can’t access your theme files. It’s like creating a child theme, but lazier.It has a code highlighter it’s very light-weight, so you can use it without worrying over performance issues.
Alright, now to learn the basics of how to work CSS in a WordPress website:

1. Text Appearance

This is a neat way to change what the text in body, header, footer, etc. looks like across the website. If you want to change how the body text on your entire site looks, your CSS should look similar to this:

body { 
    background-color: #eeeeee; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Lucida Grande"; 
    font-weight: 450px; 
    font-size: 12px; 
    color: #1e1e1e; /*Your Comments go here*/
}

The above code specifies background color and font family – weight – size – color across the ‘body’ (i.e., majority) of your website. The font family and font size parameters should be obvious. Font weight defines thickness.
Tip: Commenting ( /* Text */) is a good habit to make your code legible to other people as well as yourself.

Now to define text for different header tags (<h1>, <h2>… <h6> as supported by WordPress)

h1, h2, h3, h4, h5, h6 { 
    font-family: Georgia; 
    font-style: bold; 
    color: #004060; 
}

The above code will only apply to header tags (all of them), changing them to bold Georgia font in deep blue color. If you want to change specific header tags, here’s how you do it:

h1 { 
    background-color: #004060; 
    color: #ffffff; 
    padding: 4px 8px; 
}

The above bit of code adds a bit of emphasis only in the main header tag <h1> by giving it a dark background color and making the text white. The ‘padding’ also separates it from its margins on all sides.

2. Link Appearance and effects

UX principles dictate that links should be easy to tell apart from the rest of the text. To change the appearance of links globally (across the website), try something like this:

a, a:visited {
    color: #006699; 
}

This bit of code makes clicked as well as un-clicked links look the same because the color parameter is set for both ‘a’ and ‘a:visited’. You can define a:visited separately to make them look different.
For your desktop users, you can add hover effect (in this case, underline) on links as follows:

a:hover { 
    text-decoration: underline; 
}

You can learn WordPress generated CSS classes for aligning images, block elements (widgets and more) etc. in WordPress Codex.

Endnote

This was simply a taster, a mere toe-dipping in CSS world. There is so much more to learn yet. If you are a beginner, start with taking a CSS course at W3Schools and learn as much as you can about all the classes, tags, selectors, and more. Then move to WordPress templates, template tags, and WordPress’ own CSS guidelines and coding standards.
From there onwards, you’ll be able to create your own stunning WordPress themes.