Add Custom CSS: For Beginners

This article aims to give you a quick overview of Google Chrome's HTML and CSS inspector, and how it can be used to make simple CSS customizations to your Tumblr theme. You can make really amazing alterations, such as changing specific text colours,  background colors, or entirely removing unwanted elements from your theme. In order to really take advantage of this, you'll need to do your homework and learn some basic CSS first.

How do I add custom CSS to my Tumblr theme?

From your theme's customization options, scroll to the bottom and find the  Advanced Options link, then locate the Add Custom CSS text box. Anything you write here will do its best to override your theme's default settings.

So how do I inspect HTML and CSS elements?

1. Right-click the element that you wish to alter, and click Inspect Element.

tumblr_md908r4csV1r4a5v1

2. This should bring up the Chrome Developer Tools.

tumblr_md9091UV3P1r4a5v1

3. Hovering over the code in the inspector, you should be able to see what each piece relates to in the finished product.

tumblr_md90n4lR9T1r4a5v1

4. Selecting a specific piece of code will reveal the CSS that governs its style. Hashtags represent IDs while periods represent classes. You’ll notice that the each level on the left is represented in the CSS selector on the right:

<section id=”title”><h1><a>

has a selector equal to

#title h1 a

tumblr_md9118q3ny1r4a5v1

5. You can alter the CSS in browser by clicking the declaration you wish to change, and editing as you see fit. Let’s change the font-size element.

tumblr_md9192aFVb1r4a5v1

6. I’ve dropped it down to 26px, and you can see that the title size has changed.

tumblr_md91qfmT7a1r4a5v1

7. We could also change the colour!

tumblr_md91u9Ji581r4a5v1

8. Once you’ve decided your changes look great, copy the CSS selector (in this case #title h1 a), as well as the declarations you’ve made, and paste them into your custom CSS box (located in the advanced section of your customization sidebar.

tumblr_md91z8vSmw1r4a5v1

9. Don’t forget to save!