Naturally, as your blog represents you, you want your blog design to be gorgeous and unique. That’s why we created our Color Pack and Font Customizer plugins, so that you can choose a unique combination of fonts and colors to suit your style, without messing with code. But some of you love taking customization a step further to add site touches that are uniquely you. Today we’re sharing CSS basics to help you improve your blog design, with a step-by-step example of how to change the ‘read more’ buttons of our Presidio theme (and our process can be used with any theme, not just <em>press!).
What is CSS?
A quick primer for those of you who are new to code: CSS stands for Cascading Style Sheets, and it’s what gives your site, well, style. A line of CSS consists of two elements: the selector, and the declaration. The selector is the site element you wish to change; the declaration is the change you wish to make. Let’s take a look at a bit of code from our Presidio theme:
h2 {
font: 30px 'IBM Plex Serif', serif;
letter-spacing: .05em;
font-weight: 200;
}
In this code, the h2 is our selector, and the font, letter-spacing, and font-weight lines are our declarations. This sets the font styling for any line in the WordPress post editor using Heading 2, or the <h2> tag.
Tags, IDs, and Classes, oh my!
In CSS, you can target HTML tags, or any HTML elements with a specific ID or class applied. Tags are what you’ll find in brackets, like the <h2> tag referenced above. IDs and classes can be added in the code to describe that bit of code in more detail. For example, our post titles on the home page of our Presidio theme all use the <h2> tag, but, more specifically, they are marked with the class “entry-title,” which says that all of these particular <h2> tags are used in the same manner and can be styled the same. That code looks like this: <h2 class=”entry-title”>Post title goes here</h2>. Similarly, an ID may be added to get even more specific. In our themes, we use IDs to describe site sections, and they are also applied to every interstitial, post, and widget through WordPress. In CSS, this allows us to get super-specific in how we style site elements — you could actually style every single blog post in a different manner if you wanted to do so (though we don’t recommend it!).
In CSS, IDs are targeted with hashtags (or the pound sign, if you’ve been around as long as we have!), and classes are targeted with periods, which HTML tags are targeted simply by name. As you style your blog, you’ll likely be targeting classes more than anything else, so that you can apply changes to specific parts of your site. Let’s take a look at the code for our read more button on the Presidio theme:
.entry-footer .read-more-button a {
display: block;
padding: 16px 25px;
background: #000;
color: #fff;
}Notice that in this code, the HTML tag for the link, or <a>, is preceded by two class names. This ensures that our styling only affects the read more button that appears in the entry footer of the post, and not all of the other links sitewide, which would affect even the links you use in your post content.
Ok… but how do I actually change my site with CSS?
To make changes to your site, we recommend starting with the Google Chrome browser. Google Chrome has built-in developer tools that will help you identify the code you need to change, and actually preview the changes before adding them to your site. As an example, we’ll walk you through changing the color of the read more button on Presidio. Here’s what you’ll need to do:
Step 1: Identify the selector.
Google Chrome simplifies this process, but you still may need to do a little detective work. Start by right-clicking on the element of your site you’d like to change, then click “Inspect.” This will open up the Developer Tools panel and show you the code for that particular element. See it in action below:
In the Developer Tools panel, you’ll see the HTML for the site on the left, with the line of code for that element highlighted, and then any related CSS on the right. In this particular example, the Developer Tools took us right to the section we needed, but in some cases, you may need to click surrounding HTML elements to find the part of the stylesheet you need to edit. We know we have the right code in this example, because when we check the box next to background to remove it, the black background of the button disappears:
Step 2: Edit the code in Chrome
Once you’ve found the code you need to edit, you can make changes directly in the Developer Tools panel, and the browser will display the changes for you. Keep in mind, these changes are only stored in Developer Tools and will disappear if you reload the page, so we recommend making only a few changes at a time. Here, we’ve updated the black background to a pink and the text to white.
Step 3: Add to the Customizer in WordPress
Once you’re satisfied with the changes, copy the code, then navigate over to Appearance > Customize in your WordPress Dashboard, and look for the Additional CSS tab. Paste the changes there, then publish. Your changes are live!
Bonus points: Don’t forget hover states!
In some cases, you’ll want to edit something that also changes on hover, like in the example above. Thankfully, Developer Tools will also show hover states for you! In the CSS panel for Developer Tools, look in the upper right corner for the :hov button, then check the box for :hover to simulate the hover state. If hover states are applied in your theme, it will load the CSS for you. Repeat the steps above to change the hover state.
Congratulations! You’ve coded your very first site change. Want to learn more? The best way to learn code is to play around — change values in Developer Tools and see what happens. If you don’t like it, no harm done — just reload the page! Tell us about the code changes you’ve made in the comments, and let us know if you’d like to see tutorials for specific CSS tweaks in the future!
