Redefining Heading Attributes

Let's start at the top of the page content, with the <h1> tag. Thus far in the lessons, you've been accepting the default <h1> attributes as they come: Basically, you end up with a larger, bold font. Some of you have been wanting to modify this tag by changing colors, or alignment. What you really want to do is redefine the tag, so you don't need to mess around by adding extra tags around every instance of the <h1> tags.

Using styles, redefining the tag is as easy as adding the h1 selector, then defining properties and corresponding values (just like you did with the body). Start by setting the font size to 36px, using the font-size property:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size: 36px;}
-->
</style>

That was easy enough! Test your work! Now change the color to white! Again, it's as simple as the work you did on the body selector:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size: 36px; color: #FFFFFF;}
-->
</style>

Of course you can redefine the background-color and the font-family for the h1 selector if you want to! Experiment until you find values that work for you!

OK, You are still seeing the <h1> content displayed in the default bold typeface. You can take control of that, too! The thickness of a type-face is also known as the weight. When redefining the weight using styles, use the font-weight property. There are many possible values for the font-weight property, most of which you'll never use unless your name is Mika.

Let's start with the easy English stuff: bold is bold and normal is not bold. So, if we want to unbold (new word, I made it up) the <h1> content we use:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size: 36px; color: #FFFFFF; font-weight: normal;}
-->
</style>

Test it! You don't have to "unbold" if you don't want to! What I'd like you to keep in mind is that if you want to "bold" a different selector in the future, use the font-weight property.