Accessibility

Table of Contents

  1. Introduction
  2. Creating a Cascading Style Sheet
  3. Creating the site definition
  4. The syntax of CSS
  5. Understanding CSS selectors

Designing with CSS – Part 1: Understanding CSS Design Concepts

Creating the site definition

In this section, we'll set up the site and define it so that Dreamweaver understands the site structure for your project. This tutorial assumes you have prior experience working with Dreamweaver and know how to define a new site. If you are unsure, see TechNote 14028: How to define a site in Dreamweaver.

After you define your site in Dreamweaver and specify the local root folder, create a subfolder inside the local root folder named CssFiles, that exists at the root level of your site.

We'll now recreate the page we generated using the previous instructions, with one slight change. In step 6 of the previous section of this tutorial, you selected Add to Head from the CSS Layout drop-down menu. This time, select the Create New File option and then click Create.

The Save Style Sheet File As dialog box appears. Navigate to your CssFiles folder (located within your newly created local root folder from your site definition) and save the Style Sheet file there. The CSS file has been pre-named, and you should keep this default name as you save the file.

Next, save your XHTML page in the root of your site's local root folder. Name the file index.html.

Now that you've saved both your CSS and XHTML files, it's time to take a look at the code in the XHTML page. It should look like the code example below:

<link href="CssFiles/twoColElsLtHdr.css" rel="stylesheet" type="text/css" />
<!--[if LTE IE 6]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

In previous versions of Dreamweaver, the workflow involved creating a style sheet first, and then adding the code to define the XHTML page's layout and appearance. This is no longer necessary. Dreamweaver CS3 has already completed all this work for us. After just spending a few minutes defining a site and selecting layout options, you've created a brand new site project that implements a browser-compatible layout. The included layout options in Dreamweaver have already saved us a great deal of time!

Margins, padding, and doc types

Starting with version MX 2004, Dreamweaver adds a complete doc type to every web page you create. This was another big step in the right direction from Macromedia because an incomplete doc type can cause many problems when working with CSS.

An example of a complete doc type is shown below. In this case, the code displays a Transitional XHTML doc type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Working with XHTML pages that have an incomplete doc type will cause your browser to go into what is called "quirks mode," (see Figure 3). This will very quickly cause you to lose your hair and your sanity if you are aiming for a pixel-perfect design. Always ensure that your doc type is complete. Following this best practice will save you time when you are troubleshooting display issues when your page is viewed in different browsers. If you are using a version of Dreamweaver prior to MX 2004, you can view the available doc types to use at the World Wide Web Consortium site (W3C).

You should also be aware that if you put any text above the doc type—even a comment—and you viewed the page in Internet Explorer, the browser would go into quirks mode. There is an exception to this rule: You can include server-side code above the opening XHTML doc type tag. Server-side code is, of course, processed on the server and therefore is not returned to the browser in the manner discussed here.

Browser comparison screen shots

Figure 3. The differences between quirks mode and standards mode can be considerable

The results of adding comments or other non-server-side code above the doc type can be clearly seen in Figure 3. While these changes in the way the browser renders a page may not mean too much to you at the moment, you'll soon see the importance of ensuring your pages are rendered in standards mode. The smaller box in Figure 3 shows Internet Explorer 7 in quirks mode, while the larger box in Figure 3 shows Internet Explorer 7 in standards mode. In this instance, placing a simple HTML comment above the doc type declaration triggered quirks mode.

Understanding margins and padding

Margins and padding exist within many of the XHTML elements you will use within your CSS design work. A <p> tag is an example of an element that has padding, (see Figure 4). The text located inside the <p> tag is clearly visible and the red area surrounding the text indicates the presence of a padding value. The black border around the red area indicates the boundary of the <p> element. Increasing or decreasing the padding value causes the red area to expand or contract to match the value you provide in your CSS rule for the <p> element.

The purple area represents the margin value. The margin value pushes away other elements surrounding the <p> element, as long as they are in the document flow. (We'll discuss document flow in more detail later in this series.) Increasing and decreasing the margin value determines how closely the elements surrounding the <p> element are allowed to encroach upon it.

Browser comparison screen shots

Figure 4. Padding surrounds the text inside a <p> tag, and the margin defines the area within the document that contains the content

So to recap: Padding resides within an element and margins reside outside the element.

Page 3 of 5
Previous Page
Next Page