The first step to styling your text with CSS is finding the selector for the text. If you're new to CSS, that sentence probably doesn't mean much to you, but by the end of this post it will!
Today, I'm going to show you how to use Firefox or Chrome's developer tools to identify and use CSS selectors to style your blog's text.
What's A CSS Selector?
CSS is organized into rules. Here's an example rule:
h3 {
font-size: 35px;
}
The selector is the first part of a CSS rule. In the example above, "h3" is the selector.
When a browser sees a CSS selector, it knows to apply the styles inside the rule's curly braces to all of the elements on the page that match the selector. In this example, it would size every level 3 heading (h3) on the page at 35 pixels.
So, how do you know what selector to use? Let your browser's developer tools show you!
Using Developer Tools
Firefox and Chrome both have built-in developer tools that can help you identify the right selectors to use to style the font on your blog.
Overall, the developer tools in Firefox and Chrome are very similar. I use them both and I don't have a preference between the two. I'll show you examples of both so you can decide which one works best for you.
With Firefox
To use Firefox's developer tools, right click on the text you want to style and select "Inspect Element" from the dropdown menu. A "Developer Tools" window will pop up on your screen. On that screen, you'll see your blog's HTML markup. The element you selected is highlighted. In this example image, you can see that I've selected a level three heading (h3) with the classes post-title and entry-title (click image to enlarge).
If you move the developer tools window, you'll also see that your element is now highlighted on the page, too. The tooltip above the element tells you what kind of element it is, and the class(es) or ID associated with the element.
With Chrome
To use Chrome's developer tools, right click on the text you'd like to style and select "Inspect Element" from the dropdown menu. Your browser window will split in two, with your live site up top and your blog's source code down below (click image to enlarge).
Your element is now highlighted in the source code view. In the example image above, you can see that I've selected a level three heading (h3) with the classes post-title and entry-title. If you hover over that line in your source code, you'll see it highlighted on your live site, too.
Trying New CSS Rules
Now that you've selected the element you want to style, you can try out new styling inside developer tools without changing anything on your live site. This is great because you can experiment as much as you like without messing anything up!
In both Firefox and Chrome developer tools, you can test a new rule the same way. For this example, I'm going to change the font size of the h3 element I selected above to 35 pixels.
Both developer tools sets display the CSS rules for your page in a sidebar panel to the right. At the top of that panel, you'll see an empty rule with the selector element (on Firefox) or element.style (on Chrome).
Any rules you type into that empty selector will be applied to the highlighted element. So, for example, with the h3 element selected, anything you type in the element or element.style rule will apply to that h3 element.
So, let's change the font size of my post title to 35 pixels. On Firefox, I'd enter font-size: 35px; inside the element curly braces. On my blog, I'll see the heading font size increase instantly to 35px.
On Chrome, I'd type font-size: 35px; inside the element.style curly braces, and the heading size increases to 35 pixels.
Adding a New Rule to Your Blog
Once you've settled on a new rule for your blog, you can add it to your blog's CSS. If you're on Blogger, go to Template > Customize > Advanced > Add CSS and enter your new CSS rule. On Typepad, go to Design > Custom CSS. On Tumblr, go to Customize > Advanced > Add Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.
If after playing around with the size I decided I liked my h3 elements to be 35 pixels on my blog, I'd write it like this:
h3 {
font-size: 35px;
}
Looks familiar, right? That's the example rule I showed at the beginning of this tutorial. This would size every h3 element on my site at 35 pixels.
If I had multiple h3 elements on my page, and only wanted to style my post title h3 elements at 35px, I'd select them like this:
h3.post-title {
font-size: 35px;
}
You may have noticed from the developer tools screenshots that I could make the rule even more specific by selecting the h3 elements with h3.post-title.entry-title. But, I don't actually have to get quite that specific on this blog. That will vary from blog to blog, though.
Give It A Try!
Open up your developer tools in your favorite browser and play around with the style on any website — mine, yours, the New York Times, whatever! Spend some time inspecting elements and changing their size and color. You can't hurt anything with developer tools, so feel free to experiment.
If you're using Firefox's developer tools and you'd like to learn more, check out Virtual Blog Makeovers with Firefox.
What's Next?
Believe it or not, you just finished the hard part! The next step is to learn how to choose your font using the font-family declaration. Move on to Blog Font Style with CSS - Font Families
