CSS Action Guide Lite

  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 create a 3-column, CSS-driven Look & Feel like this...

anguilla beaches 3-col

Who Should Use This?

This CSS Action Guide "Lite" is for those who are already familiar with CSS, but want a handy document they can refer to when needed.

If you are not familiar with CSS, but are ambitious and want to learn about it, this pared-down version is not for you. Instead, click here for the full version of the guide, which will help you learn all about CSS). If you are a CSS pro, you likely don't need either version of the guide.

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

In addition to this CSS Action Guide Lite (css-action-guide-lite.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).

  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. CSS-Action-Guide.html, the complete CSS Action Guide with the theory behind CSS and some in-depth examples.

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 this SBI! help for a refresher).

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

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

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;
}

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.

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;

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.

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

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.

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.

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

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.

Change the color to match your site's color set. You can also add or modify background color, font family, borders, text alignment, and so forth (any property that applies to text).

Start by defining what is common to all headlines. Then set 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;
}

Blockquote <blockquote>

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

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, delete this from the stylesheet.

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

#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 the template. 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), 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).

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

Here you set 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.

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.

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

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.

If you don't have the graphics tools to create an image-logo, 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

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

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

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.

If you leave this style 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;
}

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;
}

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

5) #ContentColumn

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

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 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, 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    You must be careful not to jam too much into that right column (too much navigational help, too many ads, etc.).

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, err on the side of usability and making money.

Seek balance.

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

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

1) .Navigation

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

2) .Navigation h3

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.

3) .Navigation ul

Text links in your Left Column Navigation are presented as one or more HTML lists (<ul> groupings), which go to your important TIER 2 pages.

The list-style-type is set to...

list-style-type: none;

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

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

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) so that the borders meet perfectly. Or set it to 0, for a double-line thickness between each button.

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;

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

7) .Navigation a:hover

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

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 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;

Keep the styling similar to the Left Column Navigation "text buttons" for the sake of consistency, which increases usability.

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

The template.html file comes complete with a top nav, placed flush with the top right corner of your header. (The masterTemplate.html file in your SBI! template has this top nav, but it may be in a different location.) You can position the top nav wherever you like. Top, bottom, left or right.

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;
}

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

If you want a 5 pixel gap between the navigation links and the edges of the header, it's very simple to do: just change top: 0; to top: 5px; to move the nav down 5px.

There is ONE class to cover both top and bottom navigation. If you decide to use both, they both 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;

Note the padding...

padding: 4px;

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

Examine the CSS for this box carefully in style.css. Then study how it is used in the template, where there is more discussion about .ReminderBox.

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

Use these to place AdSense ads. Examine the CSS for these boxes carefully in style.css and how they are used in the template...

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

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

This box 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.

6) .formbody Styling Your FBI! Forms

Would you like to customize your FBI! forms? Maybe add some background color? 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>

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. 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;
}

Important Note Regarding the .formbody Class

The HTML that is generated when creating a form includes a lot of inline styling. 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.

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.

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

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.

If you find you are going to use more than one version of a style, duplicate it, adjust the properties and re-name it (semantically).

1) Clearing

The .Clear styling clears text or images of preceding text or images..

2) .Caption

Use .Caption for placing captions below (or above) your images. View the source of the template file to see how it is placed in your page.

Note: Don't miss the font-weight option here (in the CSS file).

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

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.

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

4) Lists

We did not 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 with a reasonable knowledge of CSS, you 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...

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.

If you think 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

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

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 this 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 21 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.

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.