Welcome to the
Build It Yourself Website .com

CSS Headers

Headers are pretty much the same thing as the titles of an outline. Ok, let's go back to elementary school when we all had to learn about outlines. The first section starts with a "I." and contains the main subject of what you want to talk about. Underneath that is sub-subject and the information associated with it. And so on and so on.

Headers are designed to work the same way. Think of that "I." to be the subject or title of your website. Under that is a list of all the sub-subjects or the titles of each individual webpage. And you can just keep going from there.

Now think of each section of your outline as a header that is labeled in order of the levels of your outline. The Roman numeral is header number on (or h1), the capital letters is your sub-headers (or h2), the numbers are the sub-sub-headers (or h3), the lower case letters are your sub-sub-sub-headers (or h4), and so on. Let's look at the example below.

When you want to identify a header in the website, you use the tag "<h1>" to start the header and "</h1>" to stop it. These tags are controlled in the cascading style sheet (css) by the following sections:

In "h1" the code tells the computer that any text between the "<h1>" and "</h1>" will be double extra large in size, bolded and centered, in the Diner font. By clicking anywhere into the "h1" section (or any of the sections in a cascading style sheet), you can adjust, change, or delete any of these rules by using the options at the right side of the screen.

The "h2" section says to keep the same font as defined in the "body" section. Except, make the font bold and centered and make sure the font is Arial.

If you want to add more headers, add an h3 (or four or as many as you like) by adding the following code:

Then click anywhere between the "{" and the "}" to start adding rules from the right side of the screen.

When you are done, click on save and upload the css file to your web server to view your work.

<< Back    Next >>