How to Adjust Your Pages Tabs

Let me start by saying that I have very little HTML and CSS knowledge. My kids, however, have a lot.
They try to teach me.
Sometimes it works.
Sometimes it doesn't.
This time, it did. Yay me! (and them!)

When I was messing around with my blog a couple of weeks ago, I needed to fiddle with something on my sidebar, but I didn't know where to find it. My son showed me a neat little thing. He right-clicked on the thing I wanted to adjust, and clicked "Inspect Element". He mumbles something about this working in Google Chrome... I didn't really listen, since I always use Chrome. So, I'm not sure if it works in other browsers.
Anyway...I wanted to make the text in my Pages Tabs bar (you know... the one right under my banner comic) a little bigger, but I wanted to keep the bar all on one line. This meant that I needed to change the width of the spaces between the pages (text) in my Pages Tabs bar .  My son isn't home. Can't ask him.
I decided to try it on my own. I right clicked, made my selection, and the page elements came up.
Um... yeah... OK.
I was about to give up and wait for my son when I noticed some CSS on the right. I scrolled through it, and coupling it with what I learned the other day when I was changing stuff on the sidebar, I found what I thought could be the CSS I needed.

It turns out that the change was super easy! (And much quicker than writing this blog post about it!)
See the highlighted part?
Well, I took the part that says:

.tabs-inner .widget li a {

(This identifies the tabs that I want to work with.)

...and the part that says:

padding: .6em 1em;

                                                                }              

(This identifies the element that I want to change)

Then I opened another tab and clicked Design at the top of my Blogger page. 

Then I clicked on Customize and went into the Advanced option and then to Add CSS.

I typed (ok, I pasted) this (the current setting) into the space under where it says Add Custom CSS:

.tabs-inner .widget li a {

padding: .6em 1em;

                                                               }    

Next, I fiddled with the numbers until I got to something I liked.

This controls the vertical padding... you know... how close the Tabs bar is to your banner (or how far away):

padding: .6em 1em;

If you want the tabs closer to your banner, reduce the number. If you want it farther away, increase the number.

This one controls the horizontal... how close or far away your tabs are from each other... you know... the space between them:

padding: .6em 1em;

If you want the tabs closer together, decrease the number. Since it is a whole number, and it is at 1, then you will want to use a decimal to make it smaller. I used .5 for mine. 

If you want the tabs farther apart, then increase the number (you can add decimals such as 1.5 here, as well).

Finally, I went to Tabs Text and changed the size of my text. ( A little hint here- if the text size you want isn't in the drop-down menu, just type it in the box and hit enter. You probably already knew this... it took me a little while to figure it out. lol)

This turned out to be sooo easy, so of course I had to share!

Before:

After:

The change is subtle, but I like it!