How to Change Header Title Font, Size & Color

Intro!

This is a simple Blogger tut to tell you how to change the header title font. First of all, you should know which CSS code is responsible for your header title appearance:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

How to modify the style???


Now you know the CSS of your title. You can make modifications in it and see your results. Remember, these CSS changes will be visible only on main page because your header title behaves as a link in all other pages. First, let's customize it's appearance on main page.

----------------------------------------------------------------------------------
=> Add a 'font-family' Property!
----------------------------------------------------------------------------------

I want my header title to be in 'Arial' font, the code will be:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: arial, "lucida console", sans-serif;
}

Please note that I'm using 3 fonts (arial, "lucida console", sans-serif) in the above CSS. The reason is that if 'Arial' is not available on your visitor's pc then the font on 2nd position ("lucida console") will be used.

----------------------------------------------------------------------------------
=> Add Style Definitions for Header Title Font on Pages Other Than Main Page!
----------------------------------------------------------------------------------

As I told you before that your header title works as a hyperlink in all other pages of your blog other than the main page, so let's add some more CSS to customize the appearance on pages other than the main page.

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

/* I've added a new tag which will change header title appearance on pages other than main page */

#header h1 a {
text-decoration:none; /* you can add 'underline' or 'overline' instead of 'none' */
color: #FFFFFF; /* you can add any color you want by changing 'FFFFFF' */
font-size: 25px; /* means title font size will be 25px on all pages other than the main page */
}

/* hover definitions will become alive when you bring mouse over title, this will also work on all pages other than main page */

#header h1 a:hover {
text-decoration:underline; /* title font will be underlined on mouse over */
color: #000000; /* title will become black on mouse over */
font-size: 10px; /* guess what will happen to font size on mouse over */
}

Good to Know!

I always try my best to share all the knowledge I've with you guys. You can always do experiments and share your results with me in comments. You should go to W3Schools.Org to read more about font properties.