Customizing Your Blog With Your Own CSS

You can only do so much with the Blogger customization settings for your fonts and colors.  So it's time to...

Hack the CSS!

To make some of the changes you want, and to really implement CARP design (Contrast, Alignment, Repetition, Proximity) -- you need to be able to apply your own CSS rules to your blog.

CSS stands for Cascading Style Sheets.  The cascading part means that styles are in effect until new styles are declared that override them - which is what we will do with your blog.  We will add new style rules that override the existing rules established by the Blogger template.

How to do it - examples

Here's how I have made a couple of changes to this blog template. The ones you want to make on yours may involve different CSS rules, and may apply to different parts of your blog. This same process will apply, though. I'll also include a CSS reference for you, so you can look up how to do all the other CSS that you might need.

To do this, I usually have my blog open in 2 different browser tabs (must use either Firefox or Chrome - IE may work, I'm not sure).  In one of them I just stay on the blog, and in the other one I go to Design > Template > Customize > Advanced > Add CSS.

In the browser tab with my blog showing, I select the part of it that I want to change - in this case, the subheadings in my post.  I then right-click it and choose Inspect Element.

Down in the inspection windows now at the bottom, I notice that I have selected an h3 heading.

And, over to the right, I see the CSS rules applying to h3, and also the ones that apply to all of h1, h2, h3, and h4.

I select and right-click to copy the styles for the headings.

In the other browser tab, I choose Add CSS in the Advanced template customization.

 In the white box, I right-click and paste the code.

 It goes in looking like this.

I don't want my new CSS styles to apply to all the headings - just to h3 and h4.  What I want is a little more room under the headings, or in other words, a bigger margin.

So I remove the h1 and h2, and modify the rest like so.  Indenting between the braces makes it much more readable and easy to work with.

Now I see a little more room under my "What are we doing..." heading.

Warning: CSS is very picky about the punctuation and spelling.  The commas, braces, hyphens, colons and semi-colons all must be exactly as shown, or it won't work. 

I decided to make the bottom margin a little less - and then also give it some top margin to separate the heading of a new section from what came previously in a post.


It also turns out that my minor headings are h4, and I would like those to be a different color (in addition to being smaller) - so I typed a new rule just for h4.

Now I want to change the headings of my widgets. In the browser tab with my blog showing, I select one and right-click, inspect element. Looking at the code and the CSS rules, I can see that those are h2 headings.  I can also see that they are within a class called .widget.

To target just h2 headings that are in the .widget class, I add in a new CSS section for .widget h2. I made the bottom margin smaller, and added a border on the bottom. The problem is, it turns out that the date above the posts is also an h2 in a widget....

So, I had to further restrict the CSS to only apply to h2s inside a widget inside the .sidebar class.

Selecting and inspecting element for the entire top widget, I find it is in the .widget-content class.

I want to space apart my widgets more, so I add a 60px bottom margin for the .widget-content class.

Between the line with the widget headings, and the added space between widgets, I now have my widgets more visually separated.

This helps fulfill the P of the CARP design principles - Proximity.

Proximity means grouping logically connected things together with space between them.

Each separate widget (gadget) now has its own space.

We could also add a border around each widget or a background color for each widget to further establish proximity - as I did in my other blog.

Here's one other CSS rule I added. A lot of my screen capture images in these tutorials just have white edges - and so against my white post background they lose the definition of their edge. I added a rule for a border that only applies to images within the posts - specifically, it applies to img tags within the .post-body class.

Moving on from here

There are many other tweaks you can find to make to your CSS.  These are just examples that worked well for my blog.  Here's a great site to find the syntax for any CSS you want:  w3schools.com

3 Final Thoughts:

1. Watch your spelling, punctuation, braces, etc.  
2. Make sure any changes to the CSS help enhance your CARP design principals, giving you better contrast, alignment, repetition, or proximity.
3. It's a good idea to make a backup copy of your CSS.  Select it all and just copy it into a Word document somewhere for safe keeping.  If you change templates or reset your customizations, you will probably lose your CSS.

Now go hack those Blogger template styles!