SBI! 3-Column L&F and CSS (`<h1>` tag)

Template including SBI include template coded with php include

Head Two Heading H2

View the .ReminderBox class in style.css to see how this is achieved.

Head Three Heading H3

Now view the source code (VIEW > SOURCE) of template.html. Note how you create the actual Reminder Box with a <div> tag instead of a <p> tag. Why? Same reason as before... because it contains multiple tags. If we opened it with <p class="ReminderBox">, the first </p> tag would close the styled paragraph, and therefore the .ReminderBox.

Head Four Heading H4

Aside from the <div> tag, the HTML is the same as usual... an <h4> headline and <p> tags, both of which have been specially styled for this box. It works like a mini-cascade...

Head Five Heading H5

The browser "knows" that it is delivering a .ReminderBox. So when you call for an <h4> headline here, you get the more specific .ReminderBox h4 (i.e., the headline "Reminder" in the box above and to the right). It styles the <h4> according to the specifications for it inside the .ReminderBox class, using only the properties for <h4> (in Section 1) that are not defined in the .ReminderBox class.

Head Six Heading H6

Remember that a "regular" <h4> has been defined in Section 1 of style.css. So the <h4> in the .ReminderBox uses those values and then overrides or adds the specific <h4> values specified for the .ReminderBox h4 in Section 6.

The size and background colors/images of the major sections of this Web page (ex., its header, columns, and footer).
Special creations that you will use frequently (ex., boxes, navigation styles, and ways to float images with captions).
"Regular HTML" elements that are automatically styled when you use them on the page (ex., headlines, links).

The size and background colors/images of the major sections of this Web page (ex., its header, columns, and footer).
Special creations that you will use frequently (ex., boxes, navigation styles, and ways to float images with captions).
"Regular HTML" elements that are automatically styled when you use them on the page (ex., headlines, links).

The Second Step... Your HTML Files

Now that all design issues are handled by your style.css file, entering content into your Web page files becomes very easy. All you have to know are a few HTML tags and you are good to go!

Using SBI! Includes Optimally

"How Do I CSS-Transition From My Current Web Pages?"

Good question, easy answer. Click here.

Note: If you want to transition now to this SBI! CSS-3-column template, we assume you are familiar with the original transition article. After the contest, this will all be reduced to a simple process so that the less savvy can do this and be up and running.