CSS Action Guide

  1. Section 1: Global Body, Font and Link Settings
  2. Section 2: Global Page Structure
  3. Section 3: Page Structure Details
  4. Section 4: Left Column Navigation
  5. Section 5: Additional Navigation
  6. Section 6: Boxes
  7. Section 7: Frequently Used Styles

Introduction

This document shows you how to change from an SBI! 2-column Look & Feel like this...

anguilla beaches 2-col

... to a 3-column, CSS-driven Look & Feel like this...

anguilla beaches 3-col

Who Should Use This?

If you are ambitious and want to learn about CSS, this CSS Action Guide is for you. If you are already familiar with CSS, you may not need to read this guide (instead, click here for a "lite" version of the guide, with just the essentials of CSS). If you are a CSS pro, you likely don't need either version of the guide.

This guide assumes that you are familiar with uploading your own HTML, which means that...

In addition to this CSS Action Guide (CSS-Action-Guide.html) and style.css, you will find the following files/folders in this package...

  1. template.html
    This HTML file shows you how style.css impacts your Web page, how it will display in your visitor's browser. It also serves as a supplementary guide that illustrates how CSS affects the final look of your HTML. Make changes in style.css, and then view template.html in your browser to see the results of those changes.

    Important Note

    If you have selected one of the 285+ SBI! templates for your site's Look and Feel, the HTML file that comes with your download package is called masterTemplate.html. Use that file to build your site. And use the style.css file included in that package to customize the design (if desired).

    The files in this package are for you to learn about and practice using CSS.

  2. support-files
    This folder contains your style.css file, the file that styles template.html. Always keep it here.
  3. image-files
    This folder contains a sample header image-logo and several other demonstration images. Once you finish experimenting, you will replace them with your own images.
  4. objects
    This folder is merely a convenient way to hold demonstration images. You will NOT use this folder, so just ignore it. This contains the RSS and Socialize It! button images, as well as a few other assorted images used in this document.
  5. media-files
    This folder is empty, but is included for the sake of completion of the basic file/folder setup for those who upload their own HTML.

The location of template.html and style.css, as well as the above folders, are all part of the typical "local setup" for uploading your own HTML into SBI! (see the SBI! help if you are not familiar with this).

Start as Simple as You Like, Go as Deep as You Like...

CSS and HTML separate design (CSS) from content (HTML)...

You design your site using your CSS style sheet (style.css).

You create content using HTML (template.html and masterTemplate.html).

With the style.css file that is part of your preferred design, just change a few colors, add a logo image that is 960 pixels wide, and you'll have a shiny "new" 3-column Look & Feel! Or...

You can also go as deep as you like... adjust, change, and add CSS to your heart's content. Your logo can be any width and height. Color-coordinate an infinite number of masterful Look and Feels (L&Fs).

To get an idea of what you can achieve merely by changing an "external" style sheet such as style.css (and any images it may refer to such as your header image-logo), without even touching the HTML file, please see (and try) the CSS Zen Garden.

Simple or complex...

You never touch the actual HTML file to change your L&F (with the rare exception where HTML is required, such as removing the top horizontal NavBar). Make all of your Look and Feel (L&F) modifications in the CSS file (style.css).

And here's the beauty of using CSS...

Once you change over all your HTML pages in your site by using the new HTML template with style.css (the transition is explained at the end of this document), you'll never have to change your whole site again when you want to change its L&F. Any time you want to freshen up, or when you get a better idea for your site's L&F, all you have to do is change the style.css file and...

Presto! Your entire site changes to your new L&F.

So What's the HTML File For?

If it all happens in style.css, what's the HTML file for? Content!

Styling your site with style.css is STEP 1... designing the L&F. Using the HTML template to build each page is "STEP 2."

Enter your title, meta tags, headlines, body content, etc., with your HTML editor. Do it for all your content in all your uploaded pages, changing over from your old pages to these new ones. More on this, and transitioning your Web pages using the HTML template, at the end of this guide.

Basics of CSS

"CSS" stands for Cascading Style Sheets. Don't get scared—it's easy to understand the term if you break it down. First...

Styles (stored in "Style Sheets") define how to display HTML elements (from the big-picture appearance of the entire page layout all the way down to the nitty-gritty such as how your text and a links appear). There is no HTML, no content, in a style sheet... just styles that tell browsers how to render each element of an HTML page (we'll use template.html as our guinea pig).

SBI! uses an "external style sheet" that is stored in a CSS file (style.css) that is separate from your HTML pages. Changing style.css alters the styles for your entire site because every HTML page has a line of instruction to the browser to load style.css before it loads the rest of the HTML page.

So, whenever you want to tweak your L&F, you don't have to make changes to all your HTML pages, just the CSS file! The only exception is on a page-by-page basis. If you want to bold a few words, for example, you use a <strong> tag in your HTML file. CSS takes care of the site-wide style. HTML is for content.

The "cascade" in "Cascading Style Sheet" refers to the order in which browsers render your styles. A full explanation is very long and technical, so here is what you really need to know... the last style in the cascade wins. Here is the cascade...

Styles that are in an external style sheet (style.css) are looked at first, from top to bottom. Ones lower down override ones farther up (ex., global fonts are overridden by fonts selected for a particular section of the page).

Next come the styles in the head of your HTML file (also read top to bottom, with ones lower down overriding earlier styles, as noted above).

Finally, "inline" styles that are placed directly in your HTML content override all other styles.

For example, in your style.css file you specify that your font will be Times, but in one of your HTML pages you add a style in the head of the document making the fonts on that page Arial. In a paragraph of that same HTML page, you add an inline style to make a section of text use the Mono font. That section of text will be Mono, and every other font style that came before it will be overridden for this one paragraph.

Although inline styling always takes precedence, it's best to avoid it whenever possible. If you ever want to change an inline style, you have to edit every page that uses that style. If it's a one-time-only style, inline is fine. But if you think you will ever use it for more than one page, add the style to your style sheet.

CSS Syntax

CSS syntax is made up of three parts. You have, for each style, a selector, a property and a value. It's written like this... 

selector {
property: value;
}

The selector is the HTML element/tag, ID, class or whatever it is that you are defining in style.css. Your browser searches (in style.css) for a particular selector, or a selector with a certain name, that it finds in an HTML file. When it finds one in style.css, it gives everything in that tag, ID or class the styling that you specified.

In HTML, a tag is found inside < and > characters (ex., <body>). In the CSS file, the tag is written without the angle brackets (ex., body).

In HTML, an ID is found inside a tag (ex., <div id="Header">). In the CSS file, the ID is written with a # character (ex., #Header).

In HTML, a class is found inside a tag (ex., <img class="ItemLeft" src="...">). In the CSS file, the class is written with a . character (ex., .ItemLeft).

The property is the attribute you wish to modify. You give each attribute a value. The value defines the attribute. The property/attribute and value are separated by a colon, end with a semi-colon, and are surrounded by curly braces, like this... 

body {
color: black;
}

For more on CSS syntax, read this w3schools.com page. No need to read deeper in the w3schools.com site for now. Click your browser's BACK button after reading it and return here.

Rules for Modifications of style.css

You do not need to be a CSS wizard to customize your site's L&F in style.css. It's simple to change the L&F of your entire site considerably, achieving just about any effect. However, to make sure that you do not get into trouble, follow these simple rules...

Be careful of the syntax—it is different than HTML

Do not remove colons (:) or semi-colons (;), or spaces that are in-between items.

CSS is very particular about the way it is written. Your safest practice is to simply change values, "staying inside of" colons and semi-colons.

Tip: It's easy to forget semi-colons especially. If something doesn't "work," check to see if you included the semi-colon.

You have everything you need to do a solid basic customization. If you take it farther, make sure that you follow the syntax correctly. Here are some examples of taking it farther...

1) Add a property (ex., add color to a selector that does not have a color specification in style.css—simply copy-and-paste a color specification from another selector).

2) Add a whole new selector style by copy-and-pasting an existing one, renaming the new selector, and then changing the property values to suit the purpose of this new selector. You'll see examples of this as you work your way through this guide and through template.html.

Read more on CSS here and then style to your heart's content! (Not yet... later!)

If you're new to CSS, you'll find it's easy to mess up the syntax at first. So just customize by carefully changing values only. As you get used to the syntax and learn more, you can always return and make more changes later.

Margin and Padding: How You Position in CSS...

Here's a good way to understand CSS and how it is styled and positioned in HTML. Imagine that your main elements are contained boxes.

Because that is what they really are! Little boxes.

Your main block level elements, your <div>, <p>, or <ul> (etc.) tags, all have four "sides" to those boxes. You position and style them based on what you specify for each of the sides.

The margin property controls the positioning of content/objects directly outside the block element. In other words, it extends outwards from the sides of each "box." It pushes the content that is outside the box away from its sides.

The padding property controls the positioning of content directly inside the block element. In other words, it extends inwards from the sides of each box. Padding pushes the content that is inside the box away from its sides. Take a look at the white box in the illustration below (it's not important what the box is—it could be a paragraph of text or an AdSense box). For now, just understand the concepts of margin and padding...

margin and padding

Bottom line? Use margins to position your boxes in relationship to the elements outside them. Use padding to position the elements inside your boxes.

The margin and padding properties are both specified the same way. Specify values for each one of the sides of your box. Here is how the 4 numbers correspond to the 4 sides of each box...

top-right-bottom-left

You will also see "shorthand" versions of the above in the style.css file. There are a few different ways to write shorthand, but to keep things practical, we will only show and use two...

1) All values are the same.

margin: 12px; is the same as...

margin: 12px 12px 12px 12px;

It's also the same as if you had written this... 

margin-top: 12px;
margin-right: 12px;
margin-bottom: 12px;
margin-left: 12px;

2) Opposite sides have the same value.

margin: 12px 24px; is the same as...

margin: 12px 24px 12px 24px;

It's also the same as if you had written this... 

margin-top: 12px;
margin-right: 24px;
margin-bottom: 12px;
margin-left: 24px;

Here Is the Best Way To Experiment...

Follow along with this guide. As you reach various parts of style.css, change a value, viewing each change in your browser to see what happens. Do one modification at a time and then view template.html in your browser (don't preview style.css—it's just a text file with styling info).

When experimenting "to see what this does," make big changes in values. In other words, don't specify 8 pixels—specify 25. Use "green" or "orange" as a color. This way, it's easy to see results.

Once you understand how one part works, move on to the next section, following along with the help below.

Tip: Make a copy of style.css. This way, if you really mess it up, and after you finish experimenting, you can always start over with a clean, original file.

More CSS Info (More Than You Need!)

For a full range of specific selectors, properties and values, and for every other modification item that you might ever need, see these w3schools.com pages...

There is more info in the above w3schools.com pages than you are ever likely to need. You don't need any of these to do a good customization here. But people tend to get curious ("I wonder how to..."), so the above is a good reference.

What happens if you don't actually specify every possible property?

Your visitor's browser knows how to handle everything you don't specify. So, aside from what is in SBI!'s style.css, you don't need to specify anything else—your visitor's browser will do a fine job. But somewhere down the road, you might want to get a little fancy, hence the reference links above.

Layout Map

Here is an image "map" of the basic structure of the HTML template (template.html), and how it relates to style.css...

Reminder

In the SBI! template you selected, or will select, to use for your site, the HTML file is called masterTemplate.html.

HTML Layout

And here is a close-up of how the "liners" form an edging around the header, columns and footer (footer not shown) to keep text and other contents away from the edges of each major box that makes up your page...

layout liner

Together, these help you to understand how the major sections (listed in the style.css file) all fit together to form your page. You'll find easy-to-understand style and class names in the style.css and template.html files. This is called "semantic" naming—"semantic" merely means choosing terms that reflect what the style represents (i.e., its purpose). There is a more detailed discussion on semantic naming below.

Ready? Let's go! Open the style.css file located in the support-files folder. We'll review it thoroughly here. As we reach each section, experiment by making a change in style.css and then seeing how template.html is affected, by viewing it in your browser. To modify any property in style.css, change its value after the colon (:) and save the file again.

The style.css sheet is broken down (in comments) into the following 7 sections...

Note about CSS "comments": You'll see commented words in the style.css sheet. Those words are ignored by the browser. Use them as comments to yourself to help organize the file or to remind yourself (later, when you'll likely have forgotten) why you did something the way you did. They are easy to create...

You see style.css's first comment at the very top of the file... 

/* ------ Section 1 - Global Body, Font and Link Settings ------ */

The /* starts the comment. The */ ends it. The browser ignores everything in between.

The comment above shows you that you are in Section 1. You'll also note comments about the various colors that are employed in style.css. It can be hard to remember what color "#abc4e3" is, for example. But this comment will remind you what that color is, and where you use it, when you look at style.css in a few months... 

/* blue-gray used in left and right columns of background.gif and for 
footer and horizontal ExtraNav*/

No need to figure out what the heck you were trying to do "way back when."

Comments in your HTML template file work similarly. Except they start with <!-- and they end with -->. Here's one from template.html... 

<!-- Begin Center Column Content -->

Modify, add or delete CSS or HTML comments according to how you work (and how good your memory is!).

Section 1 - Global Body, Font and Link Settings

Set the body background color. The background-color is the color of the part of the browser window that your page will not occupy (i.e., the color around the outer margins of your Web page). Here it is set to #f0f5fb... 

body {
background-color: #f0f5fb;
}

Note the comment in style.css but not shown above ("aqua color for browser window background color and footer top border") that reminds you not only of the color, but where else you use this color. Adjust, add or delete your own comments as needed.

Click here for an excellent chart of named colors, along with their "hex" codes.

Do not change the margin and padding (both set to 0) in the body selector of Section 1.

Note: Rather than specifying a property as having 0 pixels ("0px") or 0 percent ("0%"), the CSS convention is simply to specify it as "0" (without the quotes). It means there is, in this case, no margin and no padding.

You also set the font family, font size and font color here for your entire site. Let's start with...

Font Families

Sans-Serif

The font-family property has been pre-set to a sans-serif family... 

'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;

(Note that font names with spaces in them must be placed in single quotes.)

The "sans serif" family is a good choice for Web reading. "Lucida" is especially readable. Of the two most common versions, "Lucida Sans Unicode" is available in 94% of Windows systems (and not Mac), "Lucida Grande" in 90% of Mac systems (and not Windows).

So we include Verdana and Arial as safe backups (they are cross-platform). And we place the generic sans-serif at the end, in the extremely rare case that a system has none of these fonts. Speaking of which...

Are you wondering which of the fonts in the family above will the browser display? It chooses according to what is in the system of your visitor's computer, as follows....

It shows the first one listed, if it's in the visitor's system. If your visitor's browser does not have the first, it shows the next one, and so on until it reaches the generic sans-serif.

Tip: A good "font strategy" is to lead with a font that you like the most for your site. In general, try to choose from fonts that are on at least 80% of Windows and 80% of Macs, preferably 90%. You may have to specify two versions of the same font if one version is only available on either Windows or Mac (ex., Lucida).

By sticking with the more common fonts, the majority of browsers should render your top choice. Those missing your first choice will "fill" with very common 2nd and 3rd choices. Your 4th choice is the generic version of that family.

Serif

A serif font is "fancier" due to small decorative strokes ("serifs") that cross the ends of the main strokes. Here is a serif font family... 

'Times New Roman', Georgia, 'Palatino Linotype', Palatino, serif;

The above family uses a similar selection strategy, first choice at the beginning (not the most common font, but still common—say 80% of greater).

If you choose a font in Windows that is not listed in Mac (or is listed very low), choose a variation of it in Mac that is used in most Macs (ex., the two Palatino fonts in the serif family above). And vice-versa.

Cursive

A cursive font emulates handwritten letter forms. A cursive family is... 

'Monotype Corsiva', 'Apple Chancery', cursive;

Monotype Corsiva (Windows) and Apple Chancery (Mac) are good lead-off choices, similar to each other. List both in a cursive font family since the Monotype Corsiva is on more than 80% of Windows machines, but very few Macs. And vice-versa for Apple Chancery.

There are not that many common cursive fonts. 'Comic Sans MS' is found on more than 90% of Windows and Mac systems, but gives a different, less "flowery," effect. Change 'Monotype Corsiva', 'Apple Chancery' to 'Comic Sans MS' to see the difference.

Monotype

A monospace font emulates typed letters. A monospace font family is... 

'Courier New', Courier, monospace;

Your choices of common fonts are also limited here. Choose according to desired effect.

When listing the fonts in the the font-family property, separate each font with a comma and a space. More on font families? Click here.

Font Color and Size

Next, set the color and size of the font for your site in this section.

Color Tip: A dark font on a light background is the most readable option, by far. So set a dark font color here. Black (#000) or dark gray (#333) is a good choice. Choose black if you are using an off-white background color such as the light purple you see in template.html).

Size Tip: There are 4 ways to set font size. But we will focus only on one... percentage. Any browser's default setting will render body text at 16 pixels in size if style.css (or an HTML tag) does not specify a font size here. That's too large for most audiences. Here's how to adjust the base font size in style.css...

Go to Line 11 of style.css. You'll see font-size: 85%;, which is 13.6 pixels, which rounds to 14 pixels, a very comfortable reading size for most people. Some designers prefer a smaller font (looks more "sophisticated"), and 80%, which rounds to 13 pixels, is indeed a good choice if most of your readership is younger (i.e., with good eyesight).

All other font sizes that you set are based upon this base font size.

So if you set the font size of h1 tags to be 200% or of a caption style to be 90%, they will be 200% and 90% (respectively) of the 85% that you have set here. In other words, by sticking to percentages to define all font sizes, all you have to do is adjust the font size in Line 11 (ex., to 90% if your audience would prefer a larger font) to automatically adjust all other font sizes proportionately.

Note: There is one big advantage to using percentages to set font size. Any of your visitors can reset the font size easily with their browsers, even users of Internet Explorer 6 ("IE6"—still a substantial percentage of Web surfers). Mac users and PC users don't see fonts at the same size, in any event. So using percentage is a good idea—you stay flexible and put power into the hands of your visitor.

Headline <h> tags (<h1> to <h6>)

These are your headlines, <h1> being the largest (and most important, usually reserved for top-of-page). Modifications you make here apply to all <h> tags on your entire site, except the specialized ones, such as your .Navigation h3 selector in Section 4.

Your headlines are the visual cues on a page. They should be the easiest things to spot within the text. The colors need to contrast (and yet coordinate) and be rich.

Use <h> tags logically (the most important heading on your page should be an <h1>, then the next most important an <h2>, going down in importance to <h3> which would usually be a sub-section of its <h2>). This way, both humans and Search Engines understand the structure and emphasis of your Web page.

Change the color to match your site's color set, but don't change the size of the <h> tags. If you do, carefully maintain relative size differences. You can also add or modify background color, font family, borders, text alignment, and so forth (any property that applies to text).

Study how the headlines have been defined in groups, according to what is common to the various <h>'s in a given class. You start by defining what is common to all. You end up setting whatever is special about an individual headline type, such as your <h1>.

And note how special <h4>'s have been styled in this section for the left and right columns. Here's the CSS styling for the left one... 

#NavColumn h4 {
font-size: 90%;
color: white;
margin-top: 0;
}

Note how this <h4> will be smaller than a "regular" one (90% of the size), white (since the background is dark), and have no margin above it (to bring it as close as possible to the top of the the column).

Blockquote <blockquote>

You can see how the blockquote is styled by looking at Line 41 of your style.css.

This comes in handy when you want to quote someone. The monospace font family gives this a "typewriter look." Changing it to a serif family delivers a "newspaper feel."

Code <code>

Unless you have a website that deals with HTML, web design, and other assorted "techy" subjects, you may never need to use this. <code> is an HTML tag that gives your text a monotype font. However, to make it stand out a little more, we have changed the color of this to navy. If your site concept is unlikely to need this tag, then you can just delete this from the stylesheet. There is no point in retaining styles that will never be used.

Images

Line 53 of your style.css file defines the border around the images on your site. 

img {
border: 0 solid #ddd;
}

a:link img {
border: 0;
}

Want to go a step beyond with image borders? Read this article.

Line Height

We chose not to define line-height in this section. It leads to needless complexity. Let the browser do the work with its default setting of 110%-125% of the font size (it varies from font to font). That is why you will not see a line-height specification in Section 1. (Your selected SBI! template may, however, have line-height set here. If so, change it to suit your preference, or remove the line from style.css.)

You will set line-heights in styles used later on (ex., in stylings for boxes, blockquotes and captions). It delivers a dramatic effect and differentiates those pieces of text from the main body copy of your page.

General Link Styling

"General link styling" (see the a:link, a:visited, a:hover selectors) sets the classic blue, purple and red (all of them underlined) stylings for text links that are unvisited, visited, and hovered-over-by-mouse (respectively). Although many sites deviate from this color scheme for links nowadays, especially to make the links' colors more consistent with a site's overall color scheme, a site is generally most usable when links follow this traditional format.

We'll talk a bit later about the tension between elegant design and usability/monetization. But link-coloring is a good example. Blue-purple-red is a classic link-coloring scheme that visitors are used to. But they may not "look good" with your particular overall color scheme. That said, there is little point in styling links in such a way that they can barely be distinguished from your non-link text, just to make your page look cleaner.

Section 2 - Global Page Structure

There are only a few values that you should need to modify in this section of style.css. The "Global Page Structure" is the master header/3-column/footer layout of your Web page and should remain as is (unless you are extremely knowledgeable in CSS). The exceptions to this are the height of your header, and the borders of your #PageWrapper and #Footer. Change these to suit yourself... instructions for that are below.

This section sets up the basic skeleton of the page. You will be able to modify everything in Section 3 (ex., background colors, font sizes, etc.).

What may you modify here?

#PageWrapper

border This sets the width ("2px" currently in style.css), type ("solid") and color ("#8f8fb3" - chosen from any color-matching site) of the border that defines the outer margins of template.html. Widen it and change the style and color, according to the desired effect. Or reduce it to a single black keyline by reducing it to 1 pixel and using black color (#000), like this... 

border: 1px solid #000;

Or eliminate it by setting width to 0.

Modify the width of the page where you see width: 960px; under #PageWrapper. The default page width set here, 960 pixels, is within a narrow optimal range of acceptable choices. Two columns of 180 pixels, one on either side, are optimal (for their customary purposes). The center column holds your content—600 pixels is a comfortable reading width.

#Header

Change the height of #Header to match the height of your header image-logo. You will read more about this image in the next section, so no need to change this for now.

#ContentColumn, #NavColumn and #ExtraColumn

You may change any of the column widths later in this section, but keep the following in mind...

Bottom line? You can adjust your page width. The advisable range is 860-980. Set left and right column widths according to how you plan to use them (180px meets most needs). That leaves a reading range of 500-620 pixels for the main center column.

#Footer

Like the center column (#ContentColumn), you can set the background color/image and set borders, horizontal only this time, with this line of code... 

border-top: 1px solid #f0f5fb;

#Liner

Do not adjust the values in the #Liner selectors (there's one for the page's header area, one around the columns, and one for the footer). If you're interested, experiment—you'll see how quickly you can get into trouble here! And speaking of trouble...

Want a flexible width template? One that changes width according to the browser window width? It's possible (simply replace the width parameter with min-width and max-width. Your code would now look like this... 

#PageWrapper {
max-width: 960px;
min-width: 910px;
}

But we do not recommend it. Why not?

Note: Some people do prefer a flexible ("fluid") template. Ask yourself if your typical visitor is really going to get some extra benefit/value, and in return reward you for this. If you do think they will reward you, please start a forum thread on a fluid design's benefits and the workarounds needed.

Best advice for this section... Don't touch anything in Section 2 except the height of #Header (set it to the same height as the the header image-logo that goes here—see the next section).

You may also change the width of the page, but you will have to adjust the background.gif image to "fit" the new width. This image "tiles" the 3 columns and is discussed in Section 3.

Do you want to turn your 3-column L&F into a 2-column one that's 960 pixels wide? Here's what to do...

In style.css, go to...

/* ------ Section 2 - Global Page Structure ------- */

Go to #ContentColumn, where you will see this...

margin: 0 180px 0 180px;

Change that code to...

margin: 0 0 0 180px;

Next, go to #ExtraColumn and add this line...

display: none;

It should look like this...

#ExtraColumn {
display:none;
float: left;
width: 179px;
margin-left: -180px;
}

Not all of the 121 templates have a Content Column that can be widened easily. Some have the Extra Column in the middle, so you'll have to change the last number in the margin instead of the second one. Others have the width of the Content Column set by graphics. So you'll have to make changes to the background images, and possibly to the header and footer images, depending on the template you selected.

If you want to make a template narrower, down to 780 pixels (don't go any narrower than that), see this TNT article for details on what you'll need to do...

http://sbitips.sitesell.com/3col-to-2col.html

Using a Mix of 2- and 3-column Pages on Your Site

This could be an option for some people. Suppose you want to have 3 columns for the majority of your site. But on some pages, 2 columns is a better choice. A page holding a video is a good example. A third column may not be necessary.

So how exactly can you "mix and match" both 2- and 3-column pages? After all, you are using only one stylesheet, and the stylesheet is where you either hide or display that third column, and make the adjustments with your margins.

One solution is to use two stylesheets, one for your 3-column pages, and the other for your 2-column ones. So you might have style.css and style2.css for example.

If you choose to do this, put the stylesheet reference tag (in the <head> section of the template) into an SBI! Include (there's already an Include in the template, for that purpose, but you may want to add a new one for these 2-column pages). That way, if you decide at a later point to go back to entirely 3-column pages, the 2-column stylesheet tag can be easily replaced with the 3-column tag in the Include.

Section 3 - Page Structure Details

Use properties and set values here to design your background colors or background images for your header, columns and footer. See the Layout Map image above to refresh your memory about these areas.

Note: You set your site's general font color in Section 1. In Sections 4, 5 and 6, you will set specific styles for the other content that will appear inside each part of your site (i.e., left column text, headlines, navigation, etc.). So do not add any of those specific properties here.

Tip: For a professional color-coordinated set of background colors, font colors (ex., headlines), borders, and so forth, use a color-matching system. Here are three good sites for this...

  1. Color Match
  2. Color Schemer
  3. Color Picker

Professional Tip: Pick an existing color from the main photo (your header image-logo most likely) on your site. Pick the color that is the most prominent and that appeals to you. It should work well with your header image-logo and Site Concept.

Pro designers match everything to the prominent color from their main image. This can be done by eye or by getting the hex code of that color and using that to generate a family of related colors. How do you get a color's hex code?

Use the image editors that come with your machine. Or use either Paint.net or GraphicConverter (in SBI! Resources HQ). Just paste the image into the editor, "sample" the prominent color, and get the hex code.

Or use the Color Picker Firefox extension. Just install, choose the Color Picker Tool, and as you hover over any pixel, it gives you the hex code in the browser's status bar.

Once you have the hex code, use one of the above color matching applications to generate a family of related colors from the hex code. Color Picker gives you an excellent, gradient range of family colors. Color Match gives you a number of coordinating colors. And Color Schemer gives you some contrasting colors that "go" with your prominent color.

The two key rules...

  1. Usability/Readability—dark font on light background
  2. Color Family—Stay within the family. Go a little lighter, a little darker than the main color of your theme. It is a very safe way to stay polished.

By the time you have set colors for various backgrounds, headlines, fonts, etc., you should have a color-coordinated site that looks like this (compare with the the two versions at the top of this page)...

color-coodinated anguilla beaches

1) #PageWrapper

This wraps around, positions and contains your entire web page. Here is the breakdown of the properties (note that you change the border in Section 2)...

Technical Note for the Ambitious: The #PageWrapper defines everything within the boundaries of the entire page as a whole. You can do some sophisticated design effects, in combination with other color/image options below.

2) #Header

The #Header is the container where your header image-logo goes. It "spans" across the three columns of your web page. There is no margin property because it would upset the layout (so do not add one).

Simply create an image-logo as wide as the 3 columns of your page (960 pixels is recommended). Enter the file name of your header image-logo file into the #Header, like this (the red part)...

background-image: url(../image-files/header-image.jpg);

Reminder: Enter the height of your header image-logo in the #Header part of Section 2, as mentioned above, and not in Section 3.

"Simply" create an image-logo? OK, it's "simple" for folks who are fluent with Photoshop or Paint Shop Pro or Paint.net or GraphicConverter to superimpose/merge text ("Anguilla-Beaches.com") onto a background image, making it all into a single image ("anguilla-header-image.jpg"). If you don't know how, you can hire an SBI! coach to create a gorgeous header image-logo for you (or even to fine-tune your entire CSS L&F for you, for that matter), or....

Use iStockphoto and Picnik To Create Your Own Pro Header Image-Logo

So you're severely graphically challenged? No problem.

First, create a background header image...

     i) Go to istockphoto.com (or your personal bank of digital photos) and find an image that fits your Site Concept. Make sure the image is at least the width you want your page to be. And then...

    ii) Go to picnik.com and reduce and/or crop it to the desired width. So far, so good.

       Note: See the full TNT HQ article with "how-to" screenshots.

   iii) Crop the height, not too narrow, not too broad... just right.

   iv) Use the text tool to pick a font and size. Enter your domain or site name. And then position it.

    v) Save it and label the file with your Site Concept keyword in the file name (ex., anguilla-header-image.jpg). Then download the file.

Place this new header image file into the "image-files" folder.

Enter that file name into #Header, like you see in this part of Section 3 of style.css...

background-image: url(../image-files/anguilla-header-image.jpg);

Note: The file name will be "your-site-concept-keyword-header-image.jpg" instead of "header-image.jpg." And...

Presto! "Yes-even-you" have a professional image-logo! Many of the highest profile bloggers use this simple move to achieve a sharp look, very easily.

3) #ContentWrapper

The #ContentWrapper is the container for all three columns of content... everything from below your header to above your footer. The only property you set here is a background image or a background color. Please note...

The code here only fills in that color (or image) if you do not specify background colors for the individual 3 columns (4, 5 and 6, coming next). If you do, each column color specified there will override what you set here until the column content "ends" (remember, the lower/nittier-grittier that you go, the higher the priority in the cascade).

There are many ways to mix and match various colors and images in the wrappers and columns (above and below) in style.css.

In this simple version, you see the following two lines of code specified for the #ContentWrapper container... 

background-image: url(../image-files/background.gif);
background-repeat: repeat-y;

This code is identical to the 2 lines in #PageWrapper just above. It's not absolutely necessary here. CSS purists consider this duplication to be "clunky," so feel free to remove it.

If you delete it, your visitor will see the "browser background color" for a second or three before the 3 columns appear. If you keep it, your visitor immediately sees the 3 columns, a smoother effect.

It boils down to taste. If you do leave it in, remember that when you make a change to this image reference, make it in both places.

4) #NavColumn

This is the container for the left column of your web page. Like the #ContentWrapper, you can set a background color or image. The image has been set to "../image-files/nav-background.jpg" with vertical repeat ("repeat-y").

Want to see a different look for the left column? Change it to the following... 

#NavColumn {
background-image: url(../image-files/nav-background-fading.jpg);
background-repeat: no-repeat;
background-color: transparent;
}

Note how the different left image (nav-background-fading.jpg, non-repeating) has been "faded" to merge into the left column background color.

Finally, see what happens when you set the background-color to, say, green, "blanking out" the background image and repeat... 

#NavColumn {
background-image: url();
background-repeat: ;
background-color: green;
}

The next two columns, center and right, also work like this. A smart combination of background colors and/or images is all part of good design.

What do you "put" in the left column? It should normally contain...

View the source under <div id="NavColumn"> in the template to see.

5) #ContentColumn

This is "the star of the show." It is the container for the large center column of your Web page that contains your content. Like #NavColumn, in style.css you can set a background color or image. What is this column for?

"Content is King" on the Web. You know that. Well, think of the "Center Column" as "King of Your Web Page." All that we've done to this point has been done to "serve" it...

This is where your site "happens." It's where you write your "visible" content... headlines, body text and images, forms, etc. Yes, the right and left columns are important, as are the "invisible" tags (title, metas). But the center column is where your site happens.

Reminder: Since your content goes here, it's good readability practice to set this column with a light background color. A dark-colored font on a light-colored background is easiest to read. And avoid these two mistakes...

Click here for an excellent chart of named colors, along with their "hex" codes. Click on any color to see how it looks with a wide variety of font colors.

6) #ExtraColumn

This is the right (third) column. Like #NavColumn and #ContentColumn, you can set a background color or image. This column of your HTML template will normally contain...

Important Note on Design vs. Usability and Monetization: There is a constant "tension" between elegant design and usability/monetization. Good design is subtle, clean and simple. Nothing "glares" at you.

And that is certainly something to strive for. However, now that we are discussing the right column, which is the single biggest difference between template.html (and your new SBI! template) and the 2-column SBI! template, it's time for a couple of warnings...

i) AdSense Ads    In an ideal design world, you'd tuck those ads into your right column and leave your content clean and "uninterrupted." However, that would also cut your income substantially. The SBI! Monetization HQ shows you how to place AdSense to get noticed. "Getting noticed" is often at odds with "clean and elegant."

ii) Clutter    2-column sites are as simple as it gets to navigate. It's hard to over-complicate or clutter them up. 3-column sites can be equally clean. However, you must be careful not to jam too much into that right column with too much navigational help, monetization ads, etc.

We've all seen 3-column sites where we simply don't know where to start. Cluttered usability hurts you. You may feel that you've provided 15 ways for you to make money, so how can you lose? You lose because people hate clutter. They'd rather leave than try to make sense of a mess.

Good design vs. usability/monetization? It's not "one or the other." However, there is definitely some give and take. You often have to sacrifice a bit of one to let the other do better. In general, unless you are a professional designer selling design services (in which case, design rules!), err on the side of usability and making money.

Seek balance.

More on this topic in later sections.

Effects of Mixing and Matching Backgrounds on #ContentWrapper and the Columns

Same or Different Colors?

If the color or image of the background of #ContentWrapper is different from the background color of one of the columns, then the background color of #ContentWrapper's image will show below the "end" of the column (i.e., after it has no more content). At that point, the tiled background image of #ContentWrapper, background.gif, takes over and continues the column of color down to the bottom. For example...

In style.css, the left column tiles an image, nav-background.jpg (click to see). After its content runs out (i.e., below the RSS box), you see the background color from the tiled background.gif "take over" below the RSS box and tile all the way down to the bottom of the page.

On the other hand, the right column has a background color, #adc4d9, that is the same as the right column created by tiling background.gif. So background.gif seamlessly "continues" this background color of the right column all the way down the page.

So... the same or different? It all depends on the effect you want to achieve.

Different Strokes for Different Folks

Let's give you just one example of the flexibility of style.css...

In style.css, change the third line (background-color: transparent;) in Section 3 for #ContentWrapper to the following...

background-color: #d3e4fb;

This is the light sea blue used in the center column of background.gif.

Now delete the first two lines under #ContentWrapper... 

background-image: url(../image-files/background.gif);
background-repeat: repeat-y;

Or change them to... 

background-image: url();
background-repeat: no-repeat;

You have now replaced the tiled background.gif image (that tiled to form the 3 columns) with a single color, the light sea blue. This color extends across all 3 columns unless there is a background specification for a column that overrides this.

As you scroll down the page and reach the end of the content in the left column, you'll now see that the background color of the center column "spreads" left under the "water background" of the left column.

If you now set the right column to have a background color of #abc4e3 (the blue-gray used in the left and right columns), you'll see that color "take over the right column" for as long as there is content in the right column.

After that, the light sea blue spreads to the right to fill the space under the bottom of the right column, too, like this...

spread

Why the spread? Because the 3 columns of color that were created by tiling (i.e., repeating) the background.gif in #ContentWrapper are now present only in #PageWrapper. The light blue sea background-color: #d3e4fb overrides that and serves as the single background color for all 3 columns of the #ContentWrapper. So...

As soon as the right and left column background colors (which each override the background color of the ContentWrapper) "end" (i.e., run out of content), their respective backgrounds end, too. The #ContentWrapper background takes over and "fills" both columns before that.

This was just one simple example of an interesting effect. The use of background colors/images for #ContentWrapper and columns is a key part of your overall L&F, of course. The possible variations are infinite and spectacular...

Keep the columns simple, or alter their background colors dramatically, or use fine-tuned gradations—you can achieve countless effects, all by combining/overlaying with other colors/images in other sections of style.css. To get some ideas of how dramatically the L&F of your site can be changed, see (and try) the CSS Zen Garden.

7) #Footer

The #Footer is the container for the entire width of the bottom of your Web page. Like the Header, it spans all 3 columns.

What belongs in the footer container? Here are some ideas...

8) #NavColumn, #ExtraColumn, #Footer

Each is set to have a font size that is a percentage of the main font size (85%, or 14px) that we specified in Section 1. You can change the percentage to your liking, add a color property, line-height, etc.

For a complete list of all possible text settings, click here.

Section 4 - Left Column Navigation

The next section of style.css, "Left Column Navigation," is a container (.Navigation) with a specially styled h3 and a styled list of links. This is all contained in the left column (#NavColumn, styled earlier in style.css).

Think of this as a box-within-a-bigger-box. View the source to see the actual HTML for the "Navigation Links" that are in .Navigation, which itself is contained within #NavColumn (the left column) of template.html.

Reminder: Once you have set up your style.css file, the template.html file is extremely easy to use. And your styling remains consistent across the whole site.

Note: If you are going to use SBI!'s built-in ***NAVBAR*** tag, you do not need to use this section to style the text links. Why? Because there are no text links, only image buttons.

Note: The page has been structured so that the HTML in #NavColumn appears after the HTML in ContentColumn, even though you see the left column first. This is the optimal arrangement for the Search Engines. And speaking of Search Engines, if your left-hand nav links are now text, be more aware of using the Specific Keyword of the destination page in each link.

OK, here are the details on how to style the Left Column Navigation of your site...

1) .Navigation

This is the container. It sets the overall width of your text navigation. Normally, you don't touch this.

2) .Navigation h3

We discussed h tags (headlines) in the first section. For now, though, this is a special h3 tag that enables you to create Navigation Headers. Why would you use these?...

To separate your navigation text links into categories, each category consisting of a Nav Header and a new list of links (a new <ul> grouping) that relate to that category.

The result? Instead of one long list of links, your navigation is organized logically into groups of links, making it easier for your visitor to find what s/he wants.

3) .Navigation ul

Text links in your Left Column Navigation are presented as one or more HTML lists (<ul> groupings). Just like in the ***NAVBAR*** tag, these links go to your important TIER 2 pages.

This section styles the list of TIER 2 navigation links. The list-style-type is set to...

list-style-type: none;

This means that each link will not show as a bullet (ex., disk, circle, square, etc.). For typical text navigation, leave this "as is."

The padding (0 0 8px 5px;) indents the group of text links to the right (padding-left) by 5 pixels, and sets an extra 8 pixels at the bottom of each group (<ul>) of links.

The values for margin (-6px 0 0 0;) pull the entire grouping up 6 pixels. Fine-tune these values to set the location of the "link box" within the "navigation box" (which itself is within the "left column box").

Reminder: The order, when you see 4 digits like 0 0 8px 5px, is top-right-bottom-left). You do not need to specify "px" when the number is 0.

Note: Always maintain the 3-TIER hierarchy. The left hand nav enables your visitor to navigate back to home or to a TIER 2 page from any TIER 2 or TIER 3 page. Your visitor navigates from TIER 2 to TIER 3 from one or more of the following...

.Navigation ul styles the whole list/group of links. The next section covers the individual lines of the list (.Navigation li). Keep the difference in mind when styling. The "box" for "ul" is the entire grouping of links. The "li" items are little boxes within the bigger "ul" box.

4) .Navigation li

This is where you style the individual nav list items. It is currently set to have a light tan background (background-color: #ffc;) and a 1px solid darker-purple border (border: 1px solid #8f8fb3;).

The margin-bottom property is used to create vertical space between the list items (i.e., between each text link). It is currently set to 3px to provide a bit of space between each text button (preventing mis-clicking).

Try setting it to -1px (minus 1). This allows the individual "boxes" to butt up vertically, so that the borders meet perfectly. If you set it to 0, you'll see a double-line thickness between each button.

Important Reminder: As discussed earlier, design is often a compromise between elegance and usability/monetization. "Pure designers" over-do the elegance at the cost of usability (ex., links that are not obviously links). On the other hand, non-designers sometimes don't take design seriously enough, thinking "content will win them over"—but good design sets a strong subconscious sense of trust and confidence, especially upon first contact with your site.

Your left hand navigation is an important part of usability. Design the best-looking L&F possible, but don't sacrifice usability.

5) .Navigation a

This is where you style the individual navigation text links. Let's break down these properties... 

color: blue;
display: block; 
padding: 3px 0 3px 4px;
text-decoration: none;

6) .Navigation a:visited

This one is simple enough... 

color: purple;
display: block;
padding: 3px 0 3px 4px;
text-decoration: none;

This sets the classic purple of a "used link," telling the visitor that s/he has visited that Web page already. "No underline" is maintained, as is the padding.

7) .Navigation a:hover

Good styling here enhances the functionality of your "graphic-appearance" text buttons by letting your visitor know which link s/he is about to click while "hovering over" a link with the cursor... 

color: red;
display: block;
padding: 3px 0 3px 4px;
background-color: #d3e4fb;
text-decoration: underline;

The values in this section of style.css change the link to red when your visitor hovers over a link. Classically, red was the color for when a link was "activated" (clicked upon). Using this color for hovering before the actual click is even more useful.

The "hovering values" here change the block's text-link color to red, the background color to the same light purple of the center column, and the link to underline while hovering.

Choose some or all of these visual "you-are-about-to-click-this-link" hints. The key point is to leave enough signs of hovering so that your visitors know which link they are hovering over.

Section 5 - Additional Navigation

1) Thumbnail-with-Caption Navigation

This class (.ThumbnailLink) is useful for providing navigation with captioned thumbnail images in the right-hand column. Use it to lead visitors to key pages from your Home page, and to lead them to TIER 3 pages from TIER 2s.

This styling uses the .Caption class (a font style in Section 7 that is used to caption images). View the source of the template and review this part of style.css to see how to compose a vertical navigation scheme in the right column. Note how the text links "light up red" when hovering over the image.

2) Horizontal Text NavBar

This NavBar has been set up as a "horizontal list" through an "inline" display property... 

.ExtraNav ul li {
display: inline;

Aside from that, the styling concepts are similar to the vertical NavBar in Section 4. Keep the styling similar to the Left Column Navigation "text buttons" for the sake of consistency, which increases usability.

Best placed in your #Footer, it lets you use the two NavBars differently. What type of link belongs here? Anything that is not "theme content" (i.e., it is not directly related to your Site Concept).

For example, use it for links such as About Me, Contact Page, and Privacy Statement. Folks will find these when they become interested enough to know more about you, want to contact you, and/or want to know your privacy policy.

Placing the link to your Blog It! blog and your e-zine subscription page may also be a good idea for your horizontal NavBar. Since you are now dealing with a text link, include your Site Concept keyword where it makes sense to do so (ex., "Anguilla Blog" and "Anguilla e-Zine").

To summarize... Reserve your left-hand vertical NavBar for TIER 2 pages with subject matter directly related to your site theme. Your bottom-of-page horizontal navigation is best saved for pages that are not directly site-concept-related.

3) Horizontal Text Navigation, Elsewhere

Do you want a horizontal text NavBar at the top of your site, either in addition to the one at the bottom, or instead of it? The default template comes complete with a top nav, placed flush with the top right corner of your header. But you can position it wherever you like. Top, bottom, left or right. More on how to do that shortly.

Consider trying this if you want to be more aggressive about visitors contacting you or clicking on whatever "buttons" you decide to include here.

The potential downside? Ideally, you would prefer to start your site with your body copy that contains each page's Specific Keyword, not with links in a NavBar. Engines are getting smarter at recognizing these for what they are and not confusing them with your content. So if it's important, try it. Be sure to include your Site Concept keyword in one or two of the NavBar links.

Positioning Your Top Navigation

Take a look at the top navigation. It's positioned top right of the header. Want to put the nav in a different position? Simple. Just open your style.css and look for the #Header .ExtraNav 

#Header .ExtraNav {
font-size: 85%;
position: absolute;
top: 0;
right: 0;
}

Try changing top and right, to bottom and left. You will see the navigation change position. You can place the nav in any of the four corners, or in the middle just below your image-logo.

Fine Tune Your Nav Position

Of course, you don't have to have your navigation flush with the edges of the header. Suppose you want to have a 5 pixel gap between the navigation links and the edges of the header. This is very simple to do: just change top: 0; to top: 5px; to move the nav down 5px. You can do the same thing with the right margin.

You have been provided with ONE class to cover both top and bottom navigation. If you decide to use both (which is entirely up to you), then you need to be aware that both navigations will have the same styling. So... what happens when you want a different look to your top and bottom navigation links?

Using the #Header and #Footer IDs

Look in Section 5 of your style.css, and find the header and footer IDs.

#Header .ExtraNav and #Footer .ExtraNav

Each of these has its own properties and values. This means you can have separate rules for the top and bottom .ExtraNav classes.

Section 6 - Boxes

1) Callout Box

The .CalloutBox class, when applied to a <p> tag, creates a centered white box that is 85% of the width of the column it's in, with a dotted border. It is an effective way to "call out" important paragraphs of copy on your page.

Note the positioning...

margin: 18px auto 24px auto;

As usual, it's "top, right, bottom, left." The left-right "auto" values center the box left-right. The top-bottom values leave more space below than above. Adjust as needed.

Note the padding...

padding: 4px;

That keeps the box's contents (ex., the text) from coming too close to any of its borders. In this case, we're leaving 4 pixels top, right, bottom, and left. Re-style as you like.

Remember the difference between margin and padding?...

You will see seven other boxes in this section of style.css... .ReminderBox,.AdSenseBoxLeft, .AdSenseBoxRight and .AdSenseBoxCenter468,.AdSenseBoxExtraColumn, .ReturnToNavBox, and finally, #RSSbox. These boxes each have their own special purpose.

2) .ReminderBox

You create this box by copy-and-pasting the .CalloutBox style, changing/adding properties, and then renaming the class. Examine the CSS for this box carefully in style.css. Then study how it is used in template.html, where there is more discussion about .ReminderBox.

3) .AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, and .AdSenseBoxExtraColumn

You create these boxes, too, by copy-and-pasting the .CalloutBox style, stripping them down to the essentials for the purpose of placing Google AdSense ads. Examine the CSS for these boxes carefully in style.css and how they are used in template.html...

All four are first styled together, according to the properties that they share. You can set padding and border as you desire. Next, you'll notice...

The .AdSenseBoxRight class is identical to the .AdSenseBoxLeft, except for the float and the left and right margins. Their margins inset slightly to "intrude" a touch more upon the flow of the eye.

The .AdSenseBoxCenter468 class has a difference that is important... Its width must be defined. Unlike the "left" and "right" AdSense boxes, the centered box will not "collapse" horizontally to the width of the Google ad. So you have to create one for each size ad that you want to center.

The .AdSenseBoxExtraColumn is the simplest, designed to place a skyscraper ad in the right column.

Note: Naturally, change the style of the AdSense Boxes for your selected SBI! template as you like. This CSS Action Guide discusses the "tension" between elegant design and getting noticed. You do, after all, want your ads to be noticed in order to "get the click."

Tip: Be familiar with these AdSense-maximizing strategies.

Tip: Place the .AdSenseBoxLeft class in a <div> tag, not a <p> tag. You could put it into a <p> tag, but don't. Why? Because we don't know what Google may put in here later that might break a <p>-coded box.

Tip: Generally, do not place AdSense code into an SBI! Include. You won't be able to use custom channels to track which ads are doing well. Google provides channels so you can track each individual ad. So putting the code for one ad into an SBI! Include would result in the same channel site-wide, which is useless for tracking. (You could create an AdSense custom channel and an Include for each TIER 2/ TIER 3 mini-site, so you would at least be able to track each group's statistics.)

4) .ReturnToNavBox

You create this box, too, by copying and simplifying the .CalloutBox style. It has an important function, providing an obvious and consistent box at the bottom of each page to link TIER 2s back to the home page, TIER 3s back to their relevant TIER 2(s), and linking to other pages that are highly relevant to the page that was just read by your visitor.

This helps pull "sub-niches" or "related pages" into a mini-site within your main site and provides valuable navigation help, in the eyes of both the engines and your visitors.

5) #RSSbox

Get the HTML for your RSS box from RSS/Blog It!. Copy-and-paste your own HTML for your RSS box into the correct spot in this container, replacing the "placeholder anguilla-beaches.com code" that is there now.

Adjust the CSS values of this box to color and position appropriately. You can also customize the HTML from RSS/Blog It! to fit the left column or wherever you choose to place the RSS box (it does not have to be in the left column).

Of course, you could also use the ***RSSIT*** tag, which uses the RSS box that you built in Blog It!. If you like it "as is," you could even remove the "RSSbox" id from the <div> tag. Endless possibilities, all according to your taste!

6) .formbody Styling Your FBI! Forms

Would you like to customize your FBI! forms? Maybe add some background color? With CSS, it's easy to do! Every FBI! form that you create has a simple class attached to it: .formbody.

Take a look at the source code of any page that contains a form. You will see that some CSS has been added to the auto-generated code. 

<STYLE type="text/css">

.formbody {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}

</STYLE>

If you want to create your own styling, remove this styling from your form code in the HTML file. Then create a new class in your style.css, called .formbody. Now style this how you wish... change fonts, colors, etc. An example is shown below.

You can add this new class anywhere in the style sheet, as position won't affect how it works. However, if you keep everything neat and tidy, it makes life much easier when you make changes at a later date. Keeping that in mind, .formbody is probably best placed into Section 6, which deals with styling boxes. 

.formbody {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif; 
font-size: 90%;
color: #ccc;
background-color: #fff;
}

Note: The background-color changes the color of the form itself. The code above is set to display a white background (#fff).

Important Note Regarding the .formbody Class

The HTML that is generated when creating a form includes a lot of inline styling. You will see tags such as <font color="red">. These tags take precedence over any properties and values that you add to your .formbody class in the stylesheet. To get full control over how your form looks, remove this inline styling, and use your newly created .formbody class in style.css.

Over time, the HTML snippets will be revised and overhauled. This means that in the future, you won't have to worry about inline styling being placed on your page. However, in the meantime, you need to remove this manually.

An Important Word About the Semantic Naming of Styles

Two important points about naming new classes...

1) Name your styles so that they are easy to remember, easy to code.

Duplicate, modify and rename any style in this style sheet. If you see a style you particularly like in another site, you can do the same. Find the style in that site's style sheet, copy-and-paste it in the appropriate section of style.css, and then modify/rename it.

To access the CSS file of another site, view the source code of a page. In the head section, you'll find a reference to the CSS file. Copy that URL, then paste it into your browser's address bar. The CSS styling code will display as a "page" in your browser.

When you re-name it, name the style to best describe the purpose. Keep the name short and easy to remember. When you use it, it will be easy to remember and type.

You may be tempted to name it according to how it looks (ex., .BoldBlueBorderCenter). But even after your 18th use of this style, you will find yourself constantly referring to your style sheet when writing your content. And your fingers will hurt from typing long names!

2) Semantic naming also forces you to think about why you are using this style.

When you first begin designing your page, there is a temptation to float here, border there, color this, style that, all for the sake of making your content look exciting.

Resist!

This is the most common reason that a Web site is said to look unprofessional. Haphazard "painting" and positioning of objects show that you have decided that too many styles are needed. In fact, you usually only need a relatively small number of styles.

Put yourself in your visitor's shoes. Name the style according to its purpose. When you do that, .ReminderBox, for example, becomes a site-wide, reusable object that...

Get into this habit to achieve professional symmetry between design and content.

Section 7 - Frequently Used Styles

The styles in this section are for frequently used HTML elements. They provide functions that are best used as "style sheet classes" and not inline styles (inline CSS is discussed in template.html).

Change any of the values and/or add properties as you need. If you find you are going to use more than one version of an item, duplicate it, adjust the properties and re-name it (semantically).

OK, the first one is simple but very useful...

1) Clearing

The .Clear styling clears text or images of preceding text or images. Its use is described and illustrated in template.html.

2) .Caption

We've created a handy .Caption class for use below (or above, whichever you prefer) your images. Style it as you wish. View the source of template.html to see how it is placed in your page.

Note: Don't miss the font-weight option here (in the CSS file). Your font-weight choices are "normal," "bold," or " lighter" (or numerically, from 100 to 900, in hundreds).

3) Floats

You'll see 3 float classes in style.css... .ItemLeft, .ItemCenter and .ItemRight.

Use these 3 classes to float your images left or right of adjacent text or to center them. Each centers text or a caption under the image (if you choose to include a caption). Let's look at the CSS for .ItemRight... 

float: right;
margin: 2px 0 12px 18px;
text-align: center;

The float property forces this "little box" to the right, along with everything in it.

The margin property keeps the positioned item (with or without the accompanying caption or text) a comfortable reading distance away from the surrounding text.

And the text-align property centers any text in this container.

Note: The .ItemCenter class has no float property since there is no such thing as a float: center property. Instead, the text-align: center property centers both the image and the text.

Apply this style to a <p> tag, a <span>, or a <div>, and then place your image inside of it, like this...

<p class="ItemLeft"><img src="yourimageurl"></p>

View examples of this in the source of template.html, where all three are well-demonstrated.

4) Lists

We have chosen not to style lists in template.html (except for the navigation lists and the footer list). Applying styling is a little more tricky that it first appears. Gecko-based browsers, such as Netscape and Firefox, use margin-left to set the indenting of a list. Internet Explorer, on the other hand, uses padding to achieve the same thing.

What this means is that all browsers will display lists in a similar fashion, until you start to change the left margin and/or padding. Even those with a reasonable knowledge of CSS may find it difficult to understand how this works. Sometimes, it's just better to let the browser choose how to display something, rather than creating complicated CSS.

However, just because we have chosen not to style the lists doesn't mean you can't! For example, do you want to have more space between list items? Some very simple CSS will achieve this effect. Try adding this to your stylesheet. 

li{
margin-bottom: 5px;
}

Tweak the px value to get the gap you like. We don't recommend altering the indenting unless you absolutely have to. Once you start altering that, then the differences between Firefox's margins and Internet Explorer's padding come into play. If you decide you need to do this, check and test your lists in as many browsers as you can. Otherwise you leave yourself open to lists displaying incorrectly in some browsers.

5) Horizontal Rule?

Puzzled about what happened to our old HTML friend, the Horizontal Rule (<hr>)? While browsers will still interpret it for years, it's being dropped from the next official version of HTML. So what do you do? We suggest you stop using it.

What if you need it? Ask yourself why you need it (i.e,. what's the purpose). Then achieve the same effect using borders with headlines or whatever else makes sense. When you "think purpose," it's easy to come up with a way to achieve what you want to do through CSS. Then simply call the style from the style sheet.

The Second Step... Your HTML Files

With CSS-driven sites, you "wear two different hats," but only one at a time...

Keep those two hats separate! Remember...

You don't ever have to be "finished designing." Whether you have 10 or 100 or 1,000 SBI! pages, all you have to do is change one file, style.css, to change your entire site. But for now, we're finished styling. So...

Let's move to your second hat, template.html (remember, you'll be using masterTemplate.html with your selected SBI! template).

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!

Important Note

There are no SBI! Includes in template.html. You would not be able to see the horizontal navigation at the top and bottom, or the vertical navigation on the left, if we replaced them with Includes. So the following discussion is about your masterTemplate.html file.

SBI! Includes

One of the great advantages of a CSS-driven site is that you don't have to change all your Web pages when you want to make a design change. You merely change style.css—all your pages automatically change to the new style! Ah, paradise!

To take full advantage of that, to totally prepare so that you never have to re-upload all your pages again when you make a site-wide change, the masterTemplate.html file for your selected template has 22 SBI! Include tags coded into the file. And each Include file (they all start with "z-") is included in the folder you downloaded.

Read this help for an in-depth discussion about your template's SBI! Includes before you start working with these files.

You can also add other SBI! Includes, wherever you think you might need them. To avoid making page-by-page site-wide changes, foresee any such need in the future. Place "empty" Includes in all the right spots. Why is the word "empty" in quotes?

Because the Include is not really empty. It contains a few commented words about its future contents (open one of the existing Include files to see how it's formatted). So when you create each SBI! Include and add it to your template file, it will not show up when visitors look at your Web pages when it's "empty" (i.e., you are not yet using it for anything).

Note about HTML "comments": You've seen, by now, how we use commented words in the template.html file. Those words are ignored by the browser. And the visitor won't see them. And the engines ignore comments. But if you view the source, you will be able to see the comment. This verifies that your Include is placed and working properly (i.e., it inserted its comment in the correct location).

Bottom line? SBI! Includes and style.css give you maximum flexibility and easy site-wide changes. You will be able to change not just your L&F, but any part of your site that appears on every page of your site (ex., NavBar text, footer text, RSS box, ad locations, site search, e-zine subscription, etc.) without having to change all 1,300 pages!

Between CSS and SBI! Includes, you'll never have to make a site-wide change to each page again.

Important Tip About SBI! Includes: We've added the Includes we think you may need. However, you have to decide where to put additional SBI! Includes based on your needs.

Think ahead! Put Includes everywhere.

And that's it! You're ready to start building your site.

By now, you may be wondering...

"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.

Managing your Look and Feel is about to enter a whole new dimension. Enjoy the new ride.

Need Some Help With Your CSS?

Note: Need some help with your CSS or HTML? Check the HTML & CSS forum. Or, for affordable professional assistance, book some time with an experienced SBI! Coach.