iDesign3 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 the SBI! 2-column Look & Feel from this...

anguilla beaches 2-col

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

anguilla beaches 3-col

If you would like to see what can be achieved by a talented web designer, then take a look at these ten demo site designs. There is one for each of the ten standard SBI template categories. Study these closely to learn how color, fonts, and images have all been carefully chosen to create a Look and Feel relevant to each theme. If you can imagine it, then you can create it (within reason, of course)!

We pushed our designers to come up with 10 great starting designs. These were designed to push the templates to the limits, to show you what can be done. Don't worry if your design isn't this sharp—simple can (and will) win, too.

Who Should Skip This?

If you are neither CSS-savvy nor CSS-ambitious (i.e., willing to put in some hard work to learn), skip the contest, except, of course, to follow along and pick the winners! Because...

We will release a greatly simplified version of this Action Guide that will show you how to take one of the contest-winning designs and make the few changes you need to get your own winning Look and Feel.

And for dedicated BlockBuilders, an even easier transition is coming for you. See this forum post for the 3-step phase-in of the new SBI! Look and Feel.

Believe it or not, it will be easier than ever to transition to uploading your own HTML!

Getting Contest-Ready

This CSS Action Guide (CSS-Action-Guide.html) enables you to make significant modifications to the iDesign3 CSS style sheet (style.css). It is intended for the CSS-savvy. And it is intended for the "non-savvy-but-ambitious" so as many people as possible can enter the iDesign3 contest.

This document assumes that you are already uploading your own HTML, which means that...

Rules for the Contest? Click here.

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.
  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.
  6. layoutmap.gif and layoutmap-liner.gif
    These images show you (see below) the basic layout of the major elements of style.css and how they fit together to form your template.html page. Both are located in the objects folder.
  7. includes.html
    This page shows the locations of SBI! Includes that you should add to your own template.html file. Explained below, this will become clear at that time.

The location of your template.html and style.css files, 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).

This contest basically "occurs" in style.css. The entire Look & Feel of your site happens here. You do not make changes to template.html (Exceptions to this rule (if any) are listed in the contest rules.

In style.css, just change a few colors, add a logo 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).

If you're a CSS guru (or if you're an ambitious CSS "newbie"!), use this CSS Action Guide as your starting point, and then go wild! 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 template.html file to change your L&F (with the rare exception where HTML is required, such as adding a 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 Page For?

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

Styling your site with style.css is STEP 1... designing the L&F. Using the template.html page is "STEP 2." It's not for the contest entrants. It's for any SBIer who wants to transition to a 3-column CSS-driven site.

Enter your title, meta tags, headlines, body content, etc., as you do now. Do it for all your content in all your HTML pages, changing over from your old pages to these new ones. More on this, and transitioning your Web pages using template.html, 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 nitty-gritty such as your text and a link's appearance, all the way up to the big-picture appearance of the entire page layout). There is no HTML, no content, in a style sheet... just styles that tell a browser 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 changes 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.

Why is it called "Cascading"? The following explanation oversimplifies but is good enough to give you the idea. You don't want the full technical explanation! So... Think of it this way...

The higher ("bigger picture") the style (and that includes "bigger-picture" in the CSS file itself), the more it affects everything, but the more it can be "overridden" by styles you specify that are lower ("nitty-gritty") in the CSS file.

Styling CSS right in the HTML file ("inline styling") is the "nittiest-grittiest" and overrides styles in style.css. But, as we'll see as as work through the template.html file, it's best to avoid inline CSS.

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 selector with a certain name that it finds in an HTML file. When it finds one in the related style.css, it gives everything in that tag, ID or class the styling that you specified.

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 spec from another selector).

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

3) 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 sheet. 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, return it to its original values (or set it to values you like) and 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 actually 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 your HTML template (template.html), and how it relates to style.css...

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 template.html file work similarly. Except they start with <!-- and they end with -->. Here's one from your template.html file... 

<!-- 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 9 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 9 (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 39 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 51 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.

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-red-purple 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 below this (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 your Web page. Widen it and change style and color, according to desired effect. Or reduce it to a single black keyline by reducing it to 1 pixel and using black color (#000000), like this... 

border: 1px solid #000000;

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 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 used to set a #Liner 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), unless you know what you are doing.

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.

Special 2-Column Tip: Want to turn this 3-column L&F into a 2-column one? Simple. Here's what to do in Section 2...

1) #PageWrapper Set the width of your page to 780px instead of 960px, like this... 

#PageWrapper {
width: 780px;
}

2) #ContentWrapper Set width: 100%; to width: 780px;, like this... 

#ContentWrapper {
float: left;
width: 780px;
}

3) The margin values for #ContentColumn are...

margin: 0 180px 0 180px;    Change these to...

margin: 0 0 0 180px;

4) #NavColumn Change margin-left: -960px to -780px, like this.. 

#NavColumn {
float: left;
width: 179px;
margin-left: -780px;
}

5) Add display: none under #ExtraColumn. So #ExtraColumn should now be this... 

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

And that's it! View it in your browser. You now have a two column site that is a little wider than the standard SBI! 2-column template (780px versus 725px).

If you're not ready to make the full switch to 3 columns, use this 2-column version. You can even tweak the widths of the page and columns to be exactly the same as your block-built page.

When you're ready for 3 columns, all you have to do is change the above "2-column values" back to get 3-columns. And bingo! Your whole site is changed over, as easy as that.

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 Graphic Converter (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 1)...

Technical Note for the CSS-Savvy: For the savvier reader, 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.

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

   vii) 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.

Contest Note: What should you enter as the embedded logo text? Enter the name of your Look and Feel contest entry (ex., "Wild Musical Entertainment"). If you have a winning contest entry, you will submit the final style.css and your header-image.jpg without the name, but with precise font specs so that SBIers can follow the Picnik instructions above.

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 spec 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. The best uses win the contest!

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, 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 your...

View the source under <div id="NavColumn"> in template.html 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 template.html 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 the 2-column SBI! template, it's time for a few 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 the current 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 spec 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 (13px, or 85%) 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;) pulls 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 template.html 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 your top navigation. It's positioned top right of the header. Want to position 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.

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 are boxes that 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. 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 your own AdSense Boxes 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. 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, both in the eyes of 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 SBI! Contact Forms

Would you like to customize your contact forms? Maybe add some background color? With CSS, it's easy to do! Every SBI! contact 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 contact form. You will see 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, then remove this CSS from your contact form page. Then create a new class in your style.css, called .formbody. You can now style this how you wish... change fonts, colors, etc. An example is shown below.

You can add this new class anywhere in the stylesheet, as position won't affect how it works. However, if you try to 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: #cccccc;
background-color: #ffffff;
}

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

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, you can 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.

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 shows 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 underneath (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. All three are well-demonstrated in template.html.

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 margins 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, your template.html file.

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

You have one final "to do" before you start transitioning your Web pages to the new template.html with CSS styling. 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, we'll need to slice and dice your template.html page into SBI! Includes (read this help about SBI! Includes first).

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. So when you create each SBI! Include and add it to your template.html, 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 template.html. 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).

For example, to create ***above-socialize-it.shtml***, open a text file and type the following into it... 

<!-- above socialize it -->

Save the file as above-socialize-it.shtml. When you add this include (***above-socialize-it.shtml***) to the HTML of your template.html file, SBI! will ask you to upload this file. And that's it. If you ever want to put a site-wide ad or special feature in that location, all you have to do is enter it into above-socialize-it.shtml, save the file, and then use Quick Re-Upload It! to upload the include file.

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

Lay Out Your SBI! Includes

OK, it's time to find "homes" for...

Tip for SBI! Includes: We are going to create a bunch of SBI! Includes files. You should create a new folder, label it "includes" or "SBI! Include files," and keep them all in there. They'll be much easier to find later, when you need to change them.

If you're using a program such as "SBI Valet" then you cannot place your includes into a subfolder. You will need to store them in the same folder as all your normal HTML files. This can make it a little difficult to locate include files, once you have several hundred HTML file names to look through.

So if your includes are mixed in with the rest of your HTML pages, consider giving them a "z" prefix. For example, z-header.shtml. This ensures that those files starting with "z" are all nearly grouped together, at the end of your list of files. You will certainly appreciate this, if you have a site with a lot of pages!

Here are the locations to place the SBI includes. Text in green below indicates well-defined uses for these tags. The others are not defined with a specific usage in green, but they cover whatever may come up in the future.

I) Let's start with the only one you place inside your <head> tag...

  1. ***end-of-head.shtml*** (just before the </head> tag)
    Use for JavaScript and other coding or head tags that should appear on every page. You could even put the CSS file reference into this include!

All remaining SBI! Includes are in the <body> of the Web page...

II) This group covers possible locations for a top horizontal NavBar (see above)...

  1. ***top-of-header-horizontal-nav.shtml***
    (between <div id="Header"> and <div class="Liner">.
  2. ***bottom-of-header-horizontal-nav.shtml***
    (between </div><!-- end Liner --> and </div><!-- end Header -->.
  3. ***attached-to-bottom-of-horizontal-nav.shtml***
    (between </div><!-- end Header --> and <div id="ContentWrapper">

    You would only use one of the above, of course. But it's good to include all three in your template.html. You never know when you might want to change your top horizontal NavBar location!

III) The next group of includes are all in your Center Column...

  1. ***above-h1.shtml*** (immediately above <h1>).
  2. ***below-h1.shtml*** (immediately below </h1>).
  3. ***below-paragraph-1.shtml*** (immediately after the </p> tag of your first paragraph).
    This is a good location for an AdSense square or rectangle ad, inside a .AdSenseBoxLeft class.
  4. ***above-socialize-it.shtml*** (immediately above the ***SOCIALIZEIT*** tag).
  5. ***socialize-it.shtml*** (optional)
    (put your ***SOCIALIZEIT*** tag into this include or just use the tag instead).
  6. ***below-socialize-it.shtml*** (immediately below the ***SOCIALIZEIT*** tag).

IV) These are in your Nav Column...

  1. ***top-nav.shtml***
  2. ***navigation.shtml***
    Put your ***NAVBAR*** tag or your own custom lefthand navigation HTML here.
  3. ***bottom-nav.shtml***

V) The Extra Column...

  1. ***top-extra.shtml***
    This is a prime spot to sell advertising.
  2. ***extra-default-nav.shtml***
    Use this for "thumbnail-image" navigation to important pages.

    TIP: Various groupings of pages could have variations of ***extra-default-nav.shtml***. For example, your home page of anguilla-beaches.com would feature important links to Anguilla Hotels, Anguilla Villas, etc. But for any page about Anguilla villas, replace ***extra-default-nav.shtml*** with a new include, ***extra-default-nav-villas.shtml***, which features thumbnail links to other important pages that are specifically related to Anguilla villas. This helps visitors navigate to pages relevant to their current location and helps engines identify "mini-theme-sites" within your niche.

  3. ***bottom-extra.shtml***

V) The Footer Includes...

  1. ***above-bottom-nav.shtml***
  2. ***bottom-navigation.shtml***
    This contains your bottom horizontal text NavBar.
  3. ***below-bottom-nav.shtml***
  4. ***footer.shtml***
    This contains your usual footer info (ex., copyright).

VI) Outside of the Footer, just above </body> tag...

  1. ***google-analytics.shtml***
    This contains your Google Analytics code.

For greater clarity, let's demonstrate the suggested locations of the above SBI! Includes. Click here to see the HTML coding of your template.html page, with all content stripped out, starting with the ***end-of-head.shtml*** include, just before the </head> tag, and going all the way down to the ***google-analytics.shtml*** include, just before the </body> tag. Naturally, you can name your includes however you like. They will work exactly the same. But the includes.html page shows the optimal position for the includes discussed above.

Bottom line? Once you have organized your template.html page like this, it and style.css give you a maximum of 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!

Important Tip About SBI! Includes: The above locations are our recommendations. You have to decide where to put your SBI! Includes. Here's how...

Foresee every possible place that you might, at some point in the future, need to add a site-wide image or text or link or reminder or ad or who-knows-what, now. Why? Because if you set your page up properly with SBI! Includes, foreseeing the possibility of future features, you'll never have to do a site-wide change again.

For example, perhaps you've vaguely heard of Google Analytics but SBI! Traffic Stats are just fine right now. Well, some SBIers later decide they want more traffic stats. You never know, that might be you! So...

That's what the ***google-analytics.shtml*** SBI! Include tag is for (above). It occurs just before the </body> tag, near the very end of the file.

If you like analyzing tons of site data, register with Google Analytics, get the code and paste it into a text file named "google-analytics.shtml." This will automatically insert Google Analytics code on every page of your site that has the include tag. The code is invisible.

Be careful. Google Analytics can be very time-consuming. SBI! Traffic Stats may be all you ever need. You may not like analyzing data. But even if you don't intend on using Google Analytics, put the ***google-analytics.shtml*** tag there. You may change your mind and want Google Analytics later.

You'll be so happy when all you have to do is add some Google Analytics code into that blank include file and...

Presto! It's added to every page file. If you don't add an include now, you'll have to laboriously add one to every page on your site later. The same goes for every possible place you might want to put a sponsorship or an image ad or special navigation or a call to action, etc. So...

Think ahead! Put includes everywhere.

And that's it! This is the beginning of the next generation of SBI!'s new transition template. SBI! will soon generate this code for BlockBuilders and give you a transition template based upon this format.

By now, you must 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. 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.

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.