The University of Arizona

Videos for this class

There are six videos related to this lesson. Be sure to look at these videos as part of doing this lesson. Included in this lesson as a video about using CSS for page layout. You need to be aware of issues related to using CSS for page layout (as opposed to using tables), even if you decide for now to use tables for layout.

General comments about this lesson

This lesson covers a variety of topics, such as how to validate your style sheets, how to document your style sheet with comments, using more than one media type, float and clear properties, and other sources of information. But I also address some of the limitations of CSS--primarily dealing with not all browsers support all CSS properties equally well, if at all.

Although I do not have any real data to back this up, I suspect that among full-time webmasters who have been creating web pages for multiple years, at least 75 percent of these people are using style sheets, for a combination of being able to make formatting changes quickly on a site (affecting lots of documents) and in order to use features (like bordes on text) not found in "regular" HTML coding. But among part-time webmasters, certainly many that I deal with, style sheets are not necessarily used. I think this is for several reasons:

  • Sites created several years ago would be using <font> tags and more traditional HTML coding. Creating pages from these "older" pages, or simply updating these pages, would have pages not using style sheets.
  • As you have already discovered, adapting older pages to CSS requires removing old tags, since local tags take precedence over CSS rules. On larger sites with many pages, this can mean a lot of editing of documents.
  • Some concepts like using font families and font sizes with rules are relatively easy to understand. Other concepts like positioning items on a page using CSS rules are more complicated and take a lot more practice and experimentation to master.
  • Browsers do not consisently implement all the properties and all the values for style sheets. We will look at this more in this lesson. But this is often given as a reason by site managers as to why they have not totally moved over to using CSS for formatting and for layout on a site. In the video Page Layouts Using CSS I show a website in which the page layout is done with CSS, not tables. It looks fine in the latest release of Internet Explorer, but the layout falls apart when viewed with Netscape 4.

Validating your CSS

Even if you don't do much else with the materials in this lesson, do take the time to validate your CSS, as shown in the video Validating Your CSS. If you create your style sheet using Dreamweaver and its Style Definition dialog box, I doubt you will create invalid rules. If you have inherited a site that is using a style sheet, however, do validate the code.

The W3C put up a special site at jigsaw.w3.org/css-validator. This site was constructed because for many years there were no tools such as in the current release of Dreamweaver for creating rules. You had to hand-type in the code. If you take certain classes on CSS, that is the way the class is often taught. In such cases, if you are typing in the syntax for the properties and values, you need something to "check over" your coding. The jigsaw site lets you type in a URL (URI is its phrase) for a page using a style sheet posted on some server. You can also upload a CSS external style sheet.

I have been able to use this site also to get the CSS rules being used on someone else's site.

Using the O'Reilly CSS Reference materials

You can find a variety of books that talk about CSS. Most CSS books themselves strictly look at the syntax of the rules and do not talk about creating style sheets using the Style Definition Dialog Box in Dreamweaver. I list a few books in the section about more information later in this lesson and you can search for CSS (and template) books on sites like Amazon. However, you do have a reference tool bundled with your copy of Dreamweaver that you can use......The O'Reilly CSS Reference online manual. Activate the display by picking Help, then Reference, and then select from the "book" listing in the Reference panel the O'Reilly CSS Reference option. This is demonstrated in the video Being Aware of Limitations.

You then select from the Style window drop-down list the property you want information about. For example, in this screen capture page-break is discussed (page-break is also demonstrated briefly in the video Some Other Examples of Properties and Values for Selectors.) Besides some general information, which may be pretty cryptic, the top right corner of the panel shows if this property can be inherited or not and what release of Netscape and IE supports this feature. These are not the only browsers used, but they are common ones.

So you can use this tool to give you general information about a property and a quick indication of support in two major browsers.

Browser support for CSS

The standards for CSS were (and are) created by W3C, and they do not create and sell any browser. They are dependent on companies or groups that create browsers to create a browser that can read the CSS properties and values. The issue of browser support for CSS is one of the factors that site managers have to consider when deciding which properties to use on their web pages and certainly whether or not they can use properties for layout of web pages (as opposed to using tables for layout). The issue of browser support for CSS and what CSS features to use on a website is influenced by what browsers your audience are using, particularly your primary audience or audiences. For example, if your site were primarily aimed at business professionals or the U.S. medical community, you might be able to assume that such persons have stayed up to date with the latest browsers on their machines. One of the offices in the Agriculture College is the Office of Arid Lands Studies, whose audiences include students and researchers in this country, but also in Third World countries. These audiences may not have the latest browsers on their computers.

In almost any book I have read about using CSS on websites, particularly use of CSS for page layout, the authors stress the importance of downloading various browsers, and various releases of browsers, on machines that you can then test your web pages against. You should consider downloading various browsers, such as Firepro, Opera, and Netscape, if your site visitors are using those browsers.

One of the report options with Dreamweaver produces a report with warnings and errors in your code, for various browsers, based on general information about the browser. This is not the same as actually viewing your page through that browser, but it is better than nothing, if you don't have access to various browsers. First you need to check off which browsers Dreamweaver will check against, Select from the document panel the icon for the Dynamic Cross-Browser Compatibility Check, shown below.


The option of Settings in the listing brings up a dialog box for you to pick which browsers you want to check your coding against. Remember, this is not just for CSS HTML coding, but all coding in your document.

If you have not set up this report to run automatically when the document is open, you can force the browser report to be activated by picking File, Check Page, Check Target Browser (shown in the video Being Aware of Limitations). Note that this just checks the open HTML page. However, if you develop a master document using a CSS style sheet which is typical of your pages, this report should be an indication of other pages on your site based on this document.

Various printed references about CSS will often include tables such as the one below, to indicate general support of CSS by various releases of browsers. This information was taken from Macromedia Dreamweaver MX 2004 Unleased, by Zak Ruvalocaba and Matthew Pizzi.

Internet Explorer 3 Poor
Internet Explorer 4 Fair
Internet Explorer 5 (Windows) Good
Internet Explorer 5 (Macintosh) Great
Internet Explorer 6 Good-Great
Firefox Great
Lynx None
Netscape 3 None
Netscape 4 Fair
Netscape 6 Great
Netscape 7 Great
Mozilla 1 Fair
Opera 3 Good
Opera 4 Good
Opera 5 Good-Great
Opera 6 Great
Safari Great
WebTV Fair

I have already referenced general information you can get for specific CSS properties through the O'Reilly CSS Reference "book" which is available to your through the Help menu in Dreamweaver.

There are also various websites which will provide information on CSS support in various browsers. An example is www.westciv.com which is demonstrated in the video Being Aware of Limitations.

After you decide which CSS properties you will use on your site, you should look up what browsers can and cannot display these features in various resources, if you cannot test your pages by viewing your page in different browsers.

One of the factors which will affect your decision to use CSS and which properties of CSS to use on your site is an understanding of what browsers your audiences are using (and which versions of which browsers, since older browsers don't implement CSS properties well). For sites in the College of Agriculture, that use the CALS server (not all sites use this server), we can provide statistic reports on pageviews on the site, and this report includes a breakdown of how many sessions used different browsers and different releases of browsers over a given time period. As I indicate in the video Being Aware of LImitations, in the first four months of 2005, for the CALS site as a whole, Internet Explorer was still the most commonly used browser, and these users tend to keep updated versions of the browser. But there is still a percentage of sessions where Netscape is used, and some computer owners still cling to the use of the older Netscape 4, even though it is several years out of date by now.

The ID selector and the DIV tag

In Part 1, I introduced broad type of selectors: a tag selector, a class selector, an ID selector, and a descendant selector. As a beginning user of CSS, you will probably use mostly tag selectors and class selectors. In fact, I encourage you to do as much of your formatting using tag selectors as possible. Still this is a matter of taste. As you examine other rules used on other sites (by using the CSS validator site), you may find that many larger sites use class selectors and some also use ID selectors and descendant selectors.

An ID selector can be created using the CSS Styles panel as shown to the left. However, unlike the class selector, when typing in a name you must start the name with a # symbol. The name itself is a single word, no spaces. It should carry some meaning about how that selector is to be used. You would then use the same Style Definition dialog box to reference the categories and properties and values for this ID selector.

The ID selector is different from a class selector in that it can only be used ONE TIME in a given web document. This "feature" makes it hard for me to think of why you would want to use an ID selector, versus a tag or class selector, unless you were using it for placement and traits for a special part of your document, like a header, a navigation area, a footer, etc.

An ID selector also cannot be referenced from the Properties panel, as a class selector can be. In the videos The ID Selector and Page Layouts Using CSS, I demonstrate two documents documents, both of which are using ID selectors. One way to reference an ID selector is to hand-type in the code in the HTML mode. You can see in the screen capture above how an ID selector is referenced in the body of your document. As in this example, sometimes there is limited text or code inside a DIV tag and other times there is a lot of text or code.

You can also place ID selectors by using the Insert, Layout Objects, Div Tag menu, as shown in the videos The ID Selector and Page Layout Using CSS video.

A third way to apply an ID selector is to select the element on the page, and then select the ID selector in the CSS Styles list, and right click and pick the Apply option from the listing.

If you use either the second or third way to insert an ID selector in a document, and you look at the HTML coding, you will see a reference to <div> code around the element.

There are basically two methods to place items on a page: use a table structure, or use what Dreamweaver calls layers. When you insert a layer (under Insert, Layout Objects, Layer) you are creating a pair of <div> codes that block out an area of the screen. Thus you can divide a page using a table structure or a layer structure. You can use a layer within a table and insert a table within a layer. A <div> and its ending </div> tag groups together a collection of related content and assigns CSS styles to the group.

In the video The ID Selector the document with a photo and text next to the photo used two ID selectors, and neither is embedded in the other.

To the left you can see two ID selectors used in the video The ID Selector. In reality, you would have many other types of selectors in your document than just these ID selectors, if you were using this for your page.

Although you can see ID selectors in the list of selectors, you cannot see them in the Properties panel.

Page layouts using CSS

Well, why should you not be using tables for page layout? This is a difficult question to address. Clearly the W3C does not want tables to be used for layout. It wants tables to be used only for display of tabular information, like lists of names, emails, and phone numbers or data found often in scientific reports or business reports. In a book by Dan Shafer, referenced below, he outlines some of the reasons for not using tables for layout:

  • Tables mean longer load times, since browsers are designed to ensure each table downloads as a single unit. Thus a page dependent on tables or multiple tables will take longer to display than a document not formatted with tables
  • Some people use transparent images as placeholders in empty cells in a table, and display of these can also increase load time
  • Maintenance of tables can be a nightmare, particularly if you are using tables within tables within tables within tables, etc.

When I recently surveyed site managers at other land grant institutions (and I did not hear back from all of them that is for sure), the majority of them reported they were using CSS for formatting, but only a handful indicated they were using CSS for page layout, as opposed to using tables for layout. Several reported they were "exploring" this feature, but had not moved over to using CSS for layout. Part of the problem is the issue of converting a large number of existing pages--not a small undertaking.

I found an excellent book that addresses using CSS for layout: HTML Utopia: Designing without Tables using CSS, by Dan Shafer. If you want to look at issues related to layout using CSS, I encourage you to get this book, as well as look at some of these online tutorials:

Another interesting site that shows how CSS can be used for layout is the Zen Garden site, at www.csszengarden.com This site dramatically illustrates how the same content can be made to look very different by use of CSS. I show a few examples of the "products" in the video Getting More Information. This site really demonstrates the idea that the W3C wants people to follow---separation of content from formatting.

If you go to some of these other sources for layout examples, you will see the use of the ID selector and the use of the <div> tag repeatedly. But in some cases, a <div> enclosed element can be within another <div> element. When you start to work with multiple elements on a page that are interrelated in terms of their positioning, you will see how you need to experiment with options under the Positioning category to get elements appearing in the correct location. When I talk with other site managers about why they don't use CSS for positioning, the two reasons they often give are: having some users of their site with older browsers (which cannot display the CSS rules) and the learning curve involved in placing items correctly on a page.

Placing items on a page using CSS requires use of the category positioning. One of the properties is value and there are four options: absolute, relative, fixed, and static. In the video on Page Layout using CSS, I used absolute for two ID selectors but no type for two of them. Also as is show in both The ID Selector and Page Layout using CSS sometimes you might place items using specific top, right, or left placement but in other cases the placement is controlled by where the code is placed in the document. Some of the materials referenced above illustrate more complex layouts, and use sometimes absolute and sometimes relative.

The video Page Layouts using CSS shows a more complicated layout using CSS.

Positioning can be confusing in CSS to say the least, because the coordinate system within which a block is placed depends on the positioning context of the block. Even when you use the absolute value assigned to the Position property, there is no universal set of coordinates to guide the placement of elements. That is, if you use CSS to position an element that is within a block (a block being defined often with a set of <div> tags), its position is calculated relative to that new coordinate system.

The best way to get a feel for positioning is to take existing code from a tutorial or another site and play with it.

The float and clear properties

The float property is found under the category of Box. It can have a value of left, right, or none (although this is the default and so is normally not used). This property, when set to left or right, forces the element outside of its natural position. Subsequent content wraps around the element. Two common uses of float are to create drop-cap designs and to float text around (next to) images.

The float property has an advantage over the align attribute in HTML in that it can be applied to elements other than images (like a drop-cap) and it can be combined with other properties (such as an additional margin on one side or the other of the element).

The clear property can have a value of left, right, both or none (the latter is the default). Picking left, for example, tells the browser to not place an object/element to the left side, thus moving the element with the clear:left property below anything to the left.

Even if you decide for now to not use CSS for more complex page layouts, you should be at least familiar with how the float and clear properties can be used to place images and text next to each other without using a table structure. The float and clear properties/values are demonstrated briefly in the video Using Float and Clear.

If you just use regular HTML features and place an image in a paragraph area, the text does not really wrap to one side of the image or the other, as shown to the left.

 

However, by creating a class selector called (as an example) .imageleft, and applying that selector to the selected image, the text will wrap to the right side of the image. The property of float with a value of left (found under Box) creates a similar effect of using a table cell for the image and text in an adjacent cell.

An additional selector with a property of Clear All or Left can be applied to a paragraph (in this case) to tell the browser to go to where there are no objects in the same line before displaying the text. Applying this property to the second paragraph in this example moved that paragraph below the graphic.

Having a fluid layout

A layout is considered fluid if its basic appearance changes when the size of the window is changed or when the resolution of the monitor changes. If you have set widths on elements on your page, as in the video The ID Selector, the layout is not fluid. The video Page Layouts using CSS, however, demonstrates a fluid layout.

There are four ID selectors for parts of the page. Two of them (the navigation area and the right "text" area) have set widths. If you are placing images of particular sizes in these areas, you almost have to have a set width expressed for the area. Areas which just have text can be expressed as a set pixel width or as a percentage of the screen.

What makes this layout fluid is the fact that the header area and the "main content" area do not have a set width.

Although two areas remain the same width when the window's size increases, two other areas become wider.

Having alternative versions of your web pages

If you want to use CSS and you have users with browsers that don't support CSS well, you can consider creating an alternative version of the page(s). This page would use older HTML <font> tags and other markup instead of CSS styles. However, on a large site with many pages using CSS, this could be quite time-consuming to create the alternative pages and to MAINTAIN the alternative pages. The initial page on your site would test for browser and then direct those users to another page.

There are various JavaScipts that can be added to your page (pages). These are browser-detecting scripts, called "sniffers". Using the script, you can then direct your users with older browsers to an alternative page and have them download another (more current) browser, or you can redirect your users with older browsers to another page that does not use CSS. These scripts can be found at www.hotscripts.com/JavaScript/Scripts_and_Programs/Redirection/Browser_Based/

Another option is to remove the reference to your style sheet and see if the page still is readable (usable) without the style sheet coding.

Adding comments to your CSS

A comment is embedded in the code and ignored by the browsers but is available to the designer (and others) to read and edit. To create a comment within a style area (most of the time an external style sheet at the top of that document), simply add a slash and an asterisk (*/) at the start of the comment, and end the comment with an asterisk and a slash (*/).

For example, this is an example of a comment

/*cals-style.css
Style sheet for the College of Agriculture and Life Sciences initial pages, created by Linda Ffolliott.
Contact ffolinda@ag.arizona.edu for questions.
*/

The comments could also explain briefly various rules in the style sheet, and how they might relate to each other.

Referencing different media types

Increasingly I am convinced that an important reason to use style sheets on a site is to provide flexibility in output devices. Historically on many pages I have created on the CALS site we have constrained the pages using a table structure, in part using a width of 590 pixels or some number such as that, because using a wider number caused the right part of the page to be dropped off when printing.

By having content separate from formatting, it is possible to create a single HTML document that looks different for different media. Most often I am concerned with one for print and one for the screen.

The screen capture to the left (which is not showing the entire page length) shows a header, navigation area to the left, and content area. Although the content and possibly the header as it appears might be important in printing, the navigation area is not, and other color changes can occur for the printed version. For example, although there is a color for the backgrounds, the background could be changed to white for printing, and color for headers could also be changed to black.

Through use of two different style sheets, the navigation area could be dropped when the document is printed. Specifically the style sheet for the screen would have coding for the navigation area, but the same area would be turned off in print by having this coding in the print style sheet.

#sidelinks {
       display: none;
       }

Along the same line, the content area in the screen display would have this type of coding (moving the left margin in so the navigation area can be displayed):

#mainarea {
        margin-left: 220px;
        padding: 1.1em 1.1em 1.1em 1.5em;
       }

but in the printed version of the style sheet there is no reference to #mainarea because that material is simply started at the left edge of the document. Or you could have a rule for #mainarea but make the margin-left a small number, like 5% or 10px.

To see this document go to cals.arizona.edu/ecat/css/examplemedia.html. In this file I reference two style sheets, but the coding can be done in a single style sheet. The two style sheet examples for this sample file are: screen.css and print.css. The coding in the examplemedia.html head area would look like this:

        <link href="screen.css" rel="stylesheet" type="text/css" media="screen">
        <link href="print.css" rel="stylesheet" type="text/css" media="print">

Clicking on the links for the two style sheets will probably open up Dreamweaver on your machine and place those files in Dreamweaver for viewing and editing.

There are 10 media types, which are: all, aural, braille, embossed, handheld, print, projection, screen, tty, and tv. There is some additional information at the W3C site at www.w3.org/TR/REC-CSS2/media.html.

Getting more information

In general I feel that using CSS on sites is more complicated than using templates. My intention in this class is to expose you to both ideas. Depending on how large your site currently is, and how many pages would have to be recoded, you may not decide to use either feature on your site. I would hope, however, if you are faced with a redesign that you seriously look at both of these. They certainly can be time savers and can help make a site look more consistent if multiple people are working on the site.

But because CSS is more complicated, particularly if you wish to use it for layout, I wanted to point out other resources in the video Getting More Information. These resources include:

  • Going to the W3C site for CSS at www.w3.org/style/CSS and particularly checking out the links for Learning CSS. Note that there are really three CSS standards: CSS1 implemented in 1996 which is fairly well supported by newer browser; CSS2 implemented in 1998, and a new standard of CSS3 that is still being developed
  • Particularly since you will probably develop your style sheets using Dreamweaver and its Style Definition dialog box, check out the Macromedia site for tutorials and tips at www.macromedia.com
  • Look for online resources through tools such as Google
  • Look for books and videos through your favorite local bookstore or Amazon or Barns and Noble
  • Check out the Zen Garden site at www.csszengarden.com


This material was used in a distance class on Templates and Style Sheets given by Linda Ffolliott, ECAT, College of Agriculture and Life Sciences, University of Arizona. To use this material, contact Linda Ffolliott at ffolinda@ag.arizona.edu