Simple styling with CSS

Tableless layout, around for years and years, has become more of a hot topic lately. Designers and developers who resisted the changes in the industry have finally realized that web standards, and the design principles that accompany them, are here to stay.

With each new technology that emerges, your visitors' attention spans shorten and people expect more speed from their web experiences. If your web pages don't load quickly, the visiting surfer will take the next wave out and move on. Many designers do understand this fact. However, what confuses people is the belief that designing quick-loading pages necessarily leaves them no choice but to design ugly, plain-vanilla sites. Not true. The magic of cascading style sheets (CSS) lets you have your cake and eat it too. Pages that download quickly, yet look appealing, are no problem using HTML, CSS, and (sometimes) a dash of JavaScript.

The purpose of this article is not to convince you of the virtues of CSS over tables for positioning, to explain all the advantages of CSS, or even to teach you about best practices with CSS. Tableless layout is not a prerequisite to styling with CSS. For many people, learning CSS styling techniques allows them to subsequently move on to experimenting with CSS placement techniques.

Note: To learn more about CSS, refer to the Learn to work with CSS page in the Dreamweaver Developer Center.

The purpose of this article is to take you on the initial journey—one that gives you an idea of how easy it is to separate your content from its presentation. I'll show you techniques that reduce your page-load time and file size tremendously by using CSS to create background colors, borders, and font styling These techniques enable you to cut the images used in your web pages down to a minimum. The page you'll create isn't beautiful. It's silly and fun. But it will teach you techniques and give you ideas to create your own, much more attractive pages.

Start with clean code

Learning to write clean, semantic code (marking your content up according to its inherent meaning, that is, h1, h2, p, ul, and so on) is important for every web designer and developer. No, you don't have to be a code junkie like me, but you should understand the basics. Not only do a myriad of styling choices emerge but there are additional benefits of semantic markup. Many designers don't realize that using valid code makes their pages more accessible to more user agents, which gives people equal access to their information. Due to the increasing number of people on the web, the importance of accessibility has come to the forefront. In fact, many governments now legislate it. (For more information, refer to the W3C's Web Accessibility Initiative.)

However, people are not just accessing the web using a standard browser. Mobile devices are making huge leaps as well. Simple, clean markup is the first step toward making your content available in this market. And finally, search engines are not to be scoffed at. Since search engine spiders view your site much like assistive technology does, many of the techniques that help a disabled user access your information also make it more accessible to the spiders. And when the spiders are happy, everyone is happy.

Here is the bottom line. Once you separate structure from presentation you gain the ability to create an accessible page—using valid, well-structured HTML markup to make it work for the most user agents and adding CSS to make it appealing. This is simplicity at its best.

Figure 1 shows the sample page for this tutorial without its style sheet attached, and Figure 2 shows the same page with the style sheet attached.

Note that the page without the styles attached is simply the content of the document as it appears in your code. What you're seeing is known as the flow of the page. A user agent without the ability to read CSS could still access all your content in an organized form. Note also that this page does not contain any images. This is because all color and imagery is actually added through the CSS page. (And yes, if this layout was built with tables, you could still use most of the styling techniques I'm about to show you. It would keep its columnar look when the CSS was detached, which would not be as nice for some of the smaller user agents.)

If you'd like to learn about using CSS for layout, there are several articles on Adobe Developer Connection that will walk you through those strategies. My favorite way to start is with one of the CSS layouts I wrote for Dreamweaver (included in the product since Dreamweaver CS3). The CSS layouts in Dreamweaver are a quick way to get a solid start that you can then tweak and change to meet the needs of your project.

For the example in this tutorial, use a three-column fixed-width page with a header and footer. If you haven't done so already, launch Dreamweaver, and then follow these steps:

1. Choose File > New and in the dialog box that appears, select HTML as the Page Type and 3 column fixed, header and footer as the Layout. Leave the DocType as XHTML 1.0 Transitional and select Create New File for the Layout CSS (see Figure 3).

2. Click Create.

   You'll get a dialog box that lets you name and save your CSS file into the site definition you are working in. If you don't change the name, Dreamweaver will use the code name for the particular layout you selected, in this case thrColFixHdr.css. I named my file main.css (see Figure 4).

3. Click Save.
4. Finally, save the HTML page you just created into the root of your site. I named mine index.html. You will now have a nice, grayscale three column layout (see Figure 5). You won't modify the structure of the page in this tutorial.

Note: For more information on the structure, see Understanding the new Dreamweaver CS3 CSS Layouts or the project-based book Greg Rewis and I wrote called Mastering CSS with Dreamweaver CS4 (there is also a CS3 version for those that have notupgraded yet). For more information on setting up and managing your site, read this sample chapter from Dreamwever CS4 Missing Manual or refer to Dreamweaver CS4 online help.

Select the All view of your CSS Styles panel (if your CSS Styles panel is not open, choose Window > CSS Styles). Note that nearly all the CSS rules for this layout start with .thrColFixHdr (matching the default name of the CSS file). This is so you can easily combine page types if needed. If you will only be using one type of page, you can remove those classes altogether. I personally remove them since it is more difficult to read the selector names in the CSS panel when they are present. To remove them:

1. Highlight the .thrColFixHdr class in your CSS document (as well as the space behind it) and press Ctrl+F (Windows) or Command+F (Mac) to open the Find and Replace dialog box. It will open with the class you highlighted in the Find portion of the window.
2. Select Current Document for the Find in value and leave the Replace value blank.
3. Click Replace All. Dreamweaver will quickly strip those classes out of the document.
4. Do the same thing within the HTML document to remove the class from the Internet Explorer Conditional Comments (IECC) in the head of the page (make sure in the Find and Replace dialog box the Search value is set to Source Code).
5. Finally, click anywhere within the HTML document, and then, on the tag selector at the bottom of the document window, right-click body.thrColFixHdr and choose Set Class >  None. This will remove the class applied to the body selector.

You are all set to go now.

Many times, your page can be made more lightweight by using background colors instead of images. The gray in the CSS layout is simply to show where the div elements begin and end, so you can change those to match your project's colors now. Begin with the body selector. Make sure your CSS Styles panel is set to the Current view since that is the most useful as you work through the project.

Click anywhere in your page and on the tag selector at the bottom of the page, select <body>. Choosing the element on the tag selector is the best way to be sure you are actually in the proper element. Once you select the body element on the tag selector (see Figure 6), the CSS Styles panel shows you all the properties that have been defined for that element. In the Properties pane of the CSS Styles panel, change the background from #666666 to #CED8E1. This will give your overall page the light blue color. If you want to use a background image for your background, be sure it has been sliced to have a seamless repeat so you keep the page weight light. You can also add some line height while you are in the body selector. Go to the Type Category of the CSS Rule Definition dialog box for body. Set the Line-height to 1.4 and select multiple.

The header, footer, and right sidebar need a black background. Currently they have black text. You will need to change that as you change the background since placing a black background on them will render the black text invisible.

1. Click in the header of the page. Choose <header> on the tag selector.
2. In the Properties pane of the CSS styles panel, change the background to #000.
3. Add a new property by clicking Add Property and then either type or select color. Set the value of the color property #CED8E1.
4. Give the same background and color properties to the footer.
5. Now click in the right sidebar. Choose <sidebar2> on the tag selector.
6. In the Properties pane change the background color to #000. As before, add the color property. This time with a value of #FFF.
7. Finally, click into the left sidebar and choose <sidebar1> on the tag selector. In the properties pane, change the background color to #897EA6.

You probably noticed that the background colors of a div go only as far as the content within it (in fact, the note in the sidebar says this). This tutorial won't cover making sidebars appear to go to the footer. For more information on how to do this, see Creating a Simple three-column design with CSS and Dreamweaver. 

Beyond colors: Images and shapes

The page looks fine now but for standards-compliant browsers that support more CSS properties, it can look better as the two techniques in this section demonstrate.

Image trickery: A cool background technique

I'm going to show you a background technique that uses fixed positioning for the backgrounds and creates a pretty cool effect. Of course, Internet Explorer (IE) below version 7 (and at this writing that is still about 25% of the market) doesn't support fixed positioning. But it degrades to scrolling, so it is not really a problem [and if it is, you can use an Internet Explorer Conditional Comment (IECC) to correct it]. Setting a background image to use fixed positioning simply means that instead of positioning itself based on the element it has been placed on, it positions itself based on the browser's viewport. When placing different images on overlapping elements, you can create some pretty cool effects.

The assets directory of the sample files that accompany this article contains two images that you can use for this effect: skaterfade1.jpg and skaterblack.jpg. If you view them, you can see that they contain the same picture of a skateboarder on different background colors. First, you'll apply the white version to the container.

1. Select the container and click the Edit button at the bottom of the CSS Styles panel to open the CSS Rule Definition dialog box for #container.
2. Select the Background category and browse to the skaterfade1.jpg file.
3. Set the Background-repeat to no-repeat. Set the Background-attachment to fixed and set the Background-position (Y) to top.
4. Now set the same properties for the #header, #sidebar2, and #footer. Only this time, use the skaterblack.jpg.

   Be aware that Dreamweaver, in Design view, will not properly render fixed positioning. However, click Live View at the top of the document and you'll see perfect, browser-like rendering via WebKit.

Your background declaration for the #container should look like this:

And for the #header, #footer and #sidebar2 it should look like this:

In Dreamweaver, copy some of the final paragraph in the mainContent area and paste it into a new paragraph. This will extend the length of your page and make it easier to see this effect. Either in Dreamweaver (Live view) or a browser, shorten your page so that you get a scrollbar on the right. Now, scroll your page and note that the images don't move at all as the content scrolls over them. Note also that the identical black and white images almost give you a feeling of "seeing through" the divs to the photo beneath. Cool!

If you are bothered by the unattractive rendering in Internet Explorer 6 and lower, you can hide most of the images from IE using an IECC in the head of the document. Simply create a grouped selector (a group of selectors, separated by commas) to remove the background from any element you don't want it to remain on, like this:

This instructs IE 6 and earlier to not render a background at all on any of the elements listed here (you could give them a background color if you desired—or anything else for that matter). In this case, I've left the background on the #container. This background will scroll so they won't see the fixed effect that

Creative shape: Tricking the eye

There's another great use for background images—tricking the eye and creating a non-square shape on your element. That is, using an image that is actually created to be the color of the background your element will be sitting on and matting it to the color of your div.

To apply this technique:

1. Select your #sidebar1 div, open the CSS Rule Definition dialog box for #sidebar1 and select the Background Category.
2. Browse to the corner.gif (you'll notice it is 117px × 103px) and set the Background-repeat value to no-repeat.
3. Set Background-position (X) to right and Background-position (Y) to bottom.
4. Click Apply. Note the the bottom right corner of the sidebar now appears to have a diagonal edge, but the words are running out of it. You need to add a bit of bottom padding to create enough space for this corner.
5. Go to the Box Category and set the bottom padding to 105px. Click OK.

Note that the text now ends before the corner begins making the corner look seamless and natural (see Figure 7).

Bordering on insanity

Borders are a common decoration for boxes and images. You can save time in photo editing by using CSS borders (and even backgrounds) on your images. Padding creates some space around the image. A background color creates a color in that space (though none is required). A border can place a complementary border around the background and image. Think of the time you'll save in Photoshop or Fireworks!

The following selector creates the gray and red borders on the images shown in Figure 8.

There are other handy uses for borders. A border can go around your entire web page. The CSS layouts contain a border on the container div to outline it for you. You won't be using that for this layout. Select <#container> on the tag selector and in the Properties pane of the CSS Styles panel, right-click to delete the border property.

There is an area in this layout that is a good candidate for borders instead of images. The footer has two colors above it and three below it. In the past, you may have sliced an image with those colors and placed it in the background of the element. There was a time when the entire footer would have been sliced as a single image. But as more tools became available, designers began to slice a small portion of it and set it to repeat on the x-axis (horizontally) to save bandwidth. Now, you can save even more. Since you already placed the black background color on the footer, you have saved some page weight there. But, I hear you ask, how can I add that many borders? You're right if you are thinking that you can only add a single border to an element. Thinking outside the box, are there any other elements you can use, either parent, child, or siblings of your element? Look at the HTML structure of the page:

Note that the footer has a p element inside. When the footer ends, the container for the page also ends. Any block level element will work for this exercise. Thus, you can use the top of the footer and the top of the p element within it for the top colored borders. You can use the bottom of the p element, the bottom of the footer, and the bottom of the container for the bottom three colors.

There are two considerations to keep in mind. If you're going to use your p (or a heading) element as a styling hook for borders, you should remove the margin to force it to meet up with its parent container. Also, any padding on the parent (in this case, the footer) will hold it away from the elements within it.

The borders go in order: aqua and then lavender on the top; and aqua, lavender, and pale blue on the bottom.

1. Start with the footer itself. Click within it, and on the CSS pane of the Property inspector, select #footer as the Targeted Rule.
2. Below it click Edit CSS. In the dialog box that opens, select the Border category. Uncheck Same for all for each column. Set the top to solid, 7px, #C5D3C6. Set the bottom to solid, 5px, #897EA6. Remember you don't want any padding on the footer div, so select the Box Category. Select Same for all under Padding. Delete the value in the first box.
3. Click OK. Choosing Same for all and removing the value is a quick way to delete all the padding (or margin) at once.
4. Select the #footer p in the same way. Click Edit CSS and uncheck the Same for all boxes. Set the top border to solid, 10px, #897EA6. Set the bottom border to solid, 5px, #C5D3C6. Select the Box Category and select Same for all under Padding. Since 10px is in the top box, they'll all change to 10px, which is the desired value. Finally, select the Block Category and set the Text-align value to center. You have completed 4 of the 5 borders now.
5. The final border will be placed on the parent element—the container. Place your cursor anywhere in the page (since the container holds everything, it won't matter where you click) and on the CSS pane of the Property inspector, select #container as the Targeted Rule.
6. Click Edit CSS. In the Border Category, add a bottom-only border of solid, 3px, #EBF0F3. In the Box Category, change the bottom margin to 20px to hold the container away from the bottom of the browser's viewport. Note that since there is no value there currently (it's set to 0 without a value), Dreamweaver won't add a value—you'll need to choose it.

You've now completed the stripes in the footer area without adding a single image. Rawk!

Imageless headings? Surely you jest!

It is time to focus on the page's typography. Many sites will have a logo that must be inserted as an image. But there are small businesses and associations that don't have a professional logo. And there's nothing wrong with putting their names on the page as plain text and then jazzing it up a bit with a more creative font. And who wants to go into a graphics program every time the client wants to change the wording on the main headings (not to mention the search engine benefits of plain text)?

To change the wording in the header div to something more realistic, highlight the H1 text in the header and change it to Radzville Skate Park. Now you'll change it from Verdana for a little contrast with the rest of the text.

Using browser-safe fonts is important if you want your text to be appealing and readable on as many screens as possible. It doesn't help to specify a font you love if no one else has it installed on their machine. Two of my favorite sites on the web for seeing what is available to use are:

• CSS Font Sampler and Survey (by Code Style) is a great reference. They actually survey users and then show you the percentage of machines on which various fonts are available by platform. There are images that show what the fonts look like if you do not have them installed.
• Microsoft Typography is a site containing a list of fonts installed with various Microsoft products. You can also select a font name to see which products it ships with.

Styling the heading with your own custom font list

Font-family properties are listed in hierarchical order on your CSS page. Each browser tries to render your text using the first font in the list of specified fonts. If this font is not on the user's system, it tries the next one, and so on, until it finds a font that it can use to display the text.

Many designers do not take advantage of the many interesting things you can do with fonts. For example, you do not have to use Times, Arial, or Helvetica for your headers. You can choose something whimsical and less common to begin your font list. The main thing you need to consider is the order of the fonts in your list. Go from the whimsical to the common and always end with a generic font ("serif" or "sans-serif" for those systems that have none of the fonts in your list).

To create a new font list:

1. Select the H1 in the header and click the edit icon at the bottom of the CSS Styles panel. (Yes, this is yet another way to edit CSS within Dreamweaver!) This opens the CSS Rule Definition dialog box for #header H1.
2. In the Type Category, click the arrow to the right of the Font-family field. You will see a list of all the font lists already defined on your computer. Because the font list you want to use has not been set up, you will need to edit it.
3. At the bottom of the font list, select Edit Font List. The Edit Font List dialog box opens, giving you the option of either selecting a font from the list of installed fonts on your computer or typing a font name by hand (see Figure 9). Because computer setups and platforms differ, you won't have all the fonts residing on your computer that you may need to add. You may have to type some of them in.

4. If the font is included in the Available fonts list on the right, highlight it and click the left arrow to add it to the Chosen fonts list on the left. Make sure you add the fonts in the order given here because you are creating the order that browsers will attempt to display them. If the font is not available on your system, you'll have to type the font name into the text box under the Available fonts list. Be sure to use correct spelling or the browser will not recognize it and it won't be displayed.
5. For this list (which will style the main heading) order the fonts as follows: Marker Felt, Impact, Arial Black, sans-serif. If you're hand-coding this list, note that fonts with more than one word in their name must be typed in quotation marks, as shown. (Dreamweaver will handle the quotation marks for you in the text field of the Edit Font List dialog box.)
6. Click OK. Be aware the fonts can vary in size. When choosing a list of fonts, take care to insure they are similar sizes since you cannot define a different size for each.

I chose this font order for a reason. Marker Felt is the least common font. It's also the one I prefer. It is Mac-only and available on 85% of Mac machines. Impact is available on both Mac and Windows platforms. On Windows, it is available on 96% of machines, and on Mac, nearly 88%. Arial Black is available on both platforms as well—97% for Windows and 95% for Mac. This means it is the most common font in the list and so should come late in the list (otherwise it will show up for everyone and it's not my favorite). Always finish your list with the generic font ("serif" or "sans-serif"). In this case, since the fonts are sans-serif, that is the font family to choose as the default. This guarantees that even if none of the fonts specified are installed on a user's machine, they'll have an experience at least similar to what you planned.

With Type still selected in the CSS Style Definition dialog box's Category list, choose the font list you just created. Set the font-size to 2.5em. (If you're unsure of em units, there's a whole chapter devoted to em-based layouts in Mastering CSS with Dreamweaver CS4. For now, you should know that an em unit is based on the default font size of the browser. Unless modified, that is 16px. Thus, at default text sizes, 2.5em would equal 40px.).

Next, you'll add the little background icon to the left of this heading. In the Background Category, navigate to the sk_icon.gif in your site's assets directory. Set it to Background-repeat: no-repeat. For Background-position (X) select left and for Background-position (Y) select center. Click Apply if you'd like to see the effect you've created so far (you'll see the skateboard icon under the heading—ugly). To create a little space for the icon, select the Box Category and in the padding area, change the top and bottom padding to 20px. Change the left padding to 45px (the icon is 50px wide, so 45px allows it to snug up nicely). Click OK.

The font and styling you see for your heading is dependent upon the fonts that are available on your system. On my system, Dreamweaver CS4 displays Impact in Design view but shows Marker Felt in Live view (like all my browsers do).

Grouping the rest of the headings

You'll now define the rest of the headings on the page. To save bandwidth and make the CSS succinct, you'll use a grouped selector. A grouped selector is simply a set of selectors, separated by commas, that all share the same properties and values. It's a great space saver. In this case the group will contain the H1, H2, and H3 selectors, which all share the same font-family and font-weight.

At the bottom of the CSS Styles panel, click the New CSS Rule icon. In the New CSS Rule dialog box, select Compound (based on your selection) for Selector Type. For Selector Name, type h1, h2, h3 and in the Rule Definition select your CSS page. If the focus was in your CSS page when you opened the dialog box, you'll need to select "(This document only)", which will still place it in your CSS document. Click OK.

Note: Be sure not to leave a comma following the last selector in your grouped selector or browsers will ignore the entire rule.

In the Type Category, choose the font-family you created beginning with Marker Felt. For font-weight, select normal (this is simply because Impact doesn't render really clearly at smaller sizes when left in a bold heading style). Click OK. This creates a grouped selector with the common declarations.

Now you'll set the sizes of each of these headings one by one. This time get really brave and type directly into code view. Oh, come on, you know you want to! Be sure your page is in Design and Code (Split) view. This is the view I use 95% of the time. In the Related files toolbar at the top of your document, select your CSS document. That will appear in the code space right next to your design space. Following the rule you just created, on a new line, type h1 { followed by your property value pair. In this case, type font-size: 1.7em; –followed by }. As you type Dreamweaver gives you hints on what you're trying to type. These hints can be great time savers once you get used to Code view.

Do the same for h2 (which should be 1.5em) and h3 (which should be 1.2em). You should have:

Examine your page in Live view to get a browser-eye's view.

Note: There is hope that one day designers will reliably be able to use non-browser safe fonts. sIFR is a technology that uses HTML, CSS, JavaScript, and a Flash SWF file containing a dynamic alphabet in your desired font. Version 3 is nearly out of beta and is really showing promise. You can learn more at Mark Wubben's site.

The last thing to do to the fonts is make the p elements just a tad smaller. The default size is likely easier for older eyes to read, but those that are into typography prefer a smaller size. Create a type/element selector for your p elements that sets their font-size to .8em. This is slightly larger than 12px.

Links, the spider's web

Links are what the web is made of. Spiders use them to crawl from place to place. Links are the spider webs. Sometimes the default blue links look great on a page. But other times, it is nice to customize them a bit. This is simple when you use CSS, and there is rarely a need for a class.

You'll start by writing a simple anchor/link selector that affects all the links on your page. Give it the color you want the main portion of the page to have, make it bold, and give it an underline. Usability studies show that users expect an underline on links. If you style them another way, be sure it is apparent that they are links. Also, don't use underlines for styling anything but links. Users try to click text that is underlined! Create a link in both side columns and the middle columns by highlighting some text and on the HTML portion of the Property inspector, add a hash mark (#) to the link input. Dreamweaver will style that text as a link.

The selector above will affect every anchor on the page. But the lavender color will be invisible in the left column and difficult to read in the right column and footer. Create a different color link in those columns by using a descendent selector. #sidebar1 a and #sidebar2 a will select the links within those columns only. They will have the light blue color of the main heading and will not be in bold style like the mainContent area is.

Finally, give your links a visited style as well as a style that changes when the link has focus—this could be the hovering of a mouse or tabbing through the page with a keyboard. For the visited state, use a medium gray as a visual indicator. For hover and focus, simply remove the underline.

Note how I created the :hover, :active, :focus grouped selector. Hovering the link, as you know, will remove the underline. But you want keyboard navigators to see the same thing (be kind to the people with repetitive strain injuries or carpal tunnel syndrome—it may be you some day!). Thus, you use the :hover pseudo element to indicate this to them. And lest it be too simple, you must add the :active pseudo element to the group since Internet Explorer uses that (instead of :focus) to indicate focus when tabbing.

Be very careful with the order. It must be written like this to render properly in browsers:

• Link
• Visited
• Hover
• Active
• Focus

A nice big decorative letter, in plain text

Add some spice and this cake will be done. Drop caps, those nice big letters that start a new section, are commonly used in print. This may seem like the trickiest part of the design but it is not really. I'm going to show you how to do something that could be done with images. But it can also be done with CSS using less bandwidth and with quicker editing as well.

You're going to create a new selector called .dropcap. This name doesn't describe what the class looks like, but what it does instead (always a good idea since things change on the web). This style will simply be a font that looks good at large sizes—in this case Impact with a back up of Arial Black. For pages that are not silly and sporty like this one, a nice big serif or cursive font works great as well.

Set that font to 5em so the letter will take up about three lines of text. Set the line-height to .8em to snug the text up around it (you surely do not want a 5em or more line-height!). Then, it is just a matter of changing the color, floating it left and adding a bit of padding to seat it nicely in the flow of the page:

Once this style is created, place a span around the first letter of the paragraph and assign it the class you just created:

That's all there is to it!

I have only skimmed the surface of the flexibility of CSS styling. Cascading Style Sheets can be used to style HTML pages, calendars, forms, and menus, in addition to enabling some very solid positioning methods. Web standards are progressing and browser support improves with each release. There is still the nemesis of Internet Explorer 6 hanging around to show how poorly CSS can be treated; may it rest in peace—soon.

You've seen some of the advantages in decreased page size by removing images, creating styled text headers, using borders and background images, and even adding decorative touches that appear to be images. CSS makes a document easier to maintain, create, and edit in a split second as the need arises.

If you're ready to move on, check out the other articles in the Dreamweaver Developer Center. If you're serious about CSS, be sure to check out Mastering CSS with Dreamweaver CS4 published by New Riders.

Now go on and style!