Adobe Web Tech Curriculum

Adobe Education


Adobe Web Tech Table of Contents:

Student working on a computer

Unit 6: Hyperlinks, Lists, and CSS

Lesson 6.5: Cascading Style Sheets 3

 !  Lesson Goal:
Create styles for lists using the GoLive Style Editor and explore the CSS Box Model and how it is applied in GoLive.

In this lesson, you will build upon the knowledge learned in the Lists lesson in order to style lists using the GoLive Style Editor, including the integration of images as list bullets. In addition, the CSS Box Model, used to place empty space around elements, will also be discussed.

Introduction to Styles for Lists

CSS Review

This section addresses how to create styles to format numbered lists. You learned about creating internal and external styles in the Cascading Style Sheets 1 lesson. Let's do a brief review and then jump into creating a numbered list using styles.

You should recall the first step in creating an internal style sheet in GoLive is to open the CSS Editor (see Figure 6.5-1). The CSS Editor button GoLive CSS Editor Buttonis located in the upper right corner of the Document Window.

The next step involves creating an element style. These steps can be reviewed by going to the Creating Element Styles section of the CSS1 lesson. When you create an element style, it affects the formatting of every occurrence of that element within the page(s) linked to that style sheet. For example, if you create an h1 element style that specifies large, green, Arial text, then all h1 headers will appear in large, green, Arial text unless you override the style for a specific occurrence. The specifics of applying element styles to numbered lists are given below.

 GoLive CSS Editor

Figure 6.5-1: CSS Editor

List and Other Properties Tab

Once the CSS Editor is open and the element for which a style will be created is identified, the next step is to define the new style in the CSS Style Inspector. We explored the CSS Style Inspector's Font and Text buttons previously; now let's see what options are available for lists.

The CSS Style Inspector List and Other Properties Tab (see Figure 6.5-2) appears when you click the List and Others button CSS Inspector List and Others button. Notice the two drop-down boxes labeled Style and Position.

The Style drop-down box includes the following generic list options:

  • Unchanged
  • None

It also includes the following numbered list options:

  • Decimal
  • Lower Roman
  • Upper Roman
  • Decimal
  • Lower Alpha
  • Upper Alpha

The Position drop-down box offers three options:

  • Unchanged
  • Inside -- List item type is flush with text lines.
  • Outside -- List item type includes a first line indent.
GoLive CSS Style Inspector

Figure 6.5-2: CSS Style Inspector List and Other Properties Tab

Styles for Numbered Lists

To create numbered list element styles, follow these steps:

  1. Open the CSS Editor.
  2. Select the New Element Style button New Element Style buttonat the bottom of the CSS Editor.
  3. Select the default text (i.e., "element") and replace it with the name of the element you wish to style. Because this is a numbered list element style, enter "ol li" as the name for the style in order to reset the default numbered list item type.
  4. Select the List and Others button CSS Inspector List and Others buttonof the CSS Style Inspector.
  5. Select the desired numbered list style from the Style drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains ordered lists that aren't already set to be a specific list type.
  6. Select the desired list position from the Position drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains ordered lists that aren't already set to have a specific position.

Demonstration or Practice Activity

For this activity, you will create a numbered list element style.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Open a new Document Window.
  3. Create a numbered list with three items.
  4. Open the CSS Editor.
  5. Create a new element style for the ol li element.
  6. Select the Style drop-down box from the Inspector and change the list item type to something other than the default (Arabic). In the Document Window Layout Editor, the numbered list type should change from the default to the selected option.

Styles for Unnumbered Lists

Creating unnumbered list styles utilizes the same steps involved in creating numbered lists. The only differences are in the way you name the element style and in the chosen list item type.

To create unnumbered list element styles, follow these steps:

  1. Open the CSS Editor.
  2. Select the New Element Style button New Element Style buttonat the bottom of the CSS Editor.
  3. Select the default text (i.e., "element") and replace it with the name of the element you wish to style. Because this is an unnumbered list element style, enter "ul li" as the name for the style in order to reset the default unnumbered list item type.
  4. Select the List and Others button CSS Inspector List and Others buttonof the CSS Style Inspector.
  5. Select the desired unnumbered list style from the Style drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains unordered lists that aren't already set to be a specific list type.
  6. Select the desired list position from the Position drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains unordered lists that aren't already set to have a specific position.

Demonstration or Practice Activity

For this activity, you will create an unnumbered element style.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Open a new Document Window.
  3. Create an unnumbered list with four items.
  4. Open the CSS Editor.
  5. Create a new element style for the ul li element.
  6. Select the Style drop-down box from the Inspector and change the list item type to something other than the default (solid, round bullets). In the Document Window Layout Editor, the unnumbered list type should change from the default to the selected option.

Styles for Nested Lists

You learned about nested lists in the List Levels section of the Lists lesson. Now it's time to learn how to save some time by creating styles for nested lists.

Creating element styles for nested lists follows the same steps referred to previously for numbered and unnumbered lists; however, it requires close attention to the style names used. Notice the style names referred to in the CSS Editor in Figure 6.5-3:

  • ul li -- Resets the first level unnumbered list item type.
  • ol li -- Resets the first level numbered list time type.
  • ol ol li -- Resets the second level numbered list type.

Each successive list level requires either an additional ol or ul depending on the type of list.

 GoLive CSS Editor

Figure 6.5-3: CSS Editor

Demonstration or Practice Activity

For this activity, you will create some nested element styles.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Open a new Document Window.
  3. Create a numbered list with four first-level items, three second-level items, and two third-level items.
  4. Open the CSS Editor.
  5. Create new element styles for each of the following elements:
    1. ol li set to Upper Roman
    2. ol ol li set to Upper Alpha
    3. ol ol ol li set to Lower Roman

NOTE: You may have to click the Document Window's Preview tab in order to see some of the changes; the list may not display as expected in the Layout Editor.


It's
time!

Students should complete the following assignment from Student Guide 2:

  • Practice Activity 6.5-A

Styles for Lists Using Images as Bullets

The CSS Style Inspector List and Other Properties tab includes a checkbox for using an image as a list item marker (see Figure 6.5-4).

  1. Open the CSS Editor.
  2. Select the New Element Style button New Element Style buttonat the bottom of the CSS Editor.
  3. Select the default text (i.e., "element") and replace it with the name of the element you wish to style (e.g., ol li or ul li). Remember, if you choose to use an image as an item marker, it will replace the default.
  4. Select the List and Others button CSS Inspector List and Others buttonof the CSS Style Inspector.
  5. Place a check in the Image checkbox.
  6. Click the Browse button to open and navigate to the desired image. Make sure the image is appropriate for this use (e.g., it should be very small).
  7. Click Open. The image will not appear in the Layout Editor view. To see the image, click on the Preview tab.
GoLive CSS Style Inspector

Figure 6.5-4: CSS Style Inspector List and Other Properties Tab

Demonstration or Practice Activity

For this activity, you will create an unordered list style that uses images as bullets.

  1. Place the following images on your Desktop or another location where you can find them easily:
    blue diamond-shaped bullet
    bullet_bluediamond.gif    		 lavender square-shaped bullet
    bullet_lavsquare.gif    		 teal arrowhead-shaped bullet
    bullet_tealarrow.gif
  2. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  3. Open a new Document Window.
  4. Create a unnumbered list with two first-level items, two second-level items, and two third-level items.
  5. Open the CSS Editor.
  6. Create new element styles for each of the following elements:
    1. ul li set to use the teal arrowhead as a bullet
    2. ul ul li set to use the lavender square as a bullet
    3. ul ul ul li set to use the blue diamond as a bullet

NOTE: Remember to view the page in the Document Window's Preview tab in order to see the bullet images.


Class Styles for Lists

Element Styles or Class Styles?

You know how to create element styles for lists; now it's time to learn how to create and apply class styles to lists. Creating and applying class styles to lists is similar to creating and applying class styles to text (see the Type-Related Styles in GoLive section of the CSS1 lesson). This will be a good review and give you an idea of other ways class styles can be used.

But first, let's address a more fundamental question: When should you use element styles versus class styles? Here are some general guidelines:

  • Use element styles when you wish to set the default appearance of an element. For example, if you want a site's h1 and h2 headers or numbered lists or unnumbered lists to look a certain way most of the time, then set the default appearance for that element by creating an element class.
  • Use class styles for variations or exceptions. For example, if you only want particular unnumbered lists within the site to use a certain image as a bullet, then create a class for the ul element. That way, you can call upon the class only in those cases when you wish to use it, but it won't become the default (as it would if you were to create an element style instead).

Creating Class Styles for Use with Lists

As you should recall, class styles don't get applied until you specify where the class is to be used within the HTML document (explained below).

To create class styles for use with lists, follow these steps:

  1. Open the CSS Editor.
  2. Select the New Class Style button GoLive CSS Editor New Class buttonat the bottom of the CSS Editor.
  3. Select the default text (i.e., ".class") and replace it with the name you wish to give the new class.
  4. Click the List and Others button CSS Inspector List and Others buttonof the CSS Style Inspector.
  5. Select the desired list styles.

Demonstration or Practice Activity

For this activity, you will create a class that will change the selected list item type to an image of your choice.

  1. Place the following images on your Desktop or another location where you can find them easily:
    blue diamond-shaped bullet
    bullet_bluediamond.gif    		 lavender square-shaped bullet
    bullet_lavsquare.gif    		 teal arrowhead-shaped bullet
    bullet_tealarrow.gif
  2. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  3. Open a new Document Window.
  4. Create two separate unnumbered lists, each with three first-level items.
  5. Create three new list-related class styles as follows:
    • .bulletlavender (set to use the lavender square as a bullet)
    • .bulletblue (set to use the blue diamond as a bullet)
    • .bulletteal (set to use the teal arrowhead as a bullet)
  6. Leave this Document Window open; you will use it in the next activity.

Applying Class Styles to Lists

As you learned previously, applying classes requires the use of the CSS Palette. To apply class styles to list items, follow these steps (these steps assume that the class has already been created):

  1. Open the CSS Palette:

    Window > CSS

  2. Within the Layout Editor, select the list item(s) to which the desired style should be applied.
  3. Within the CSS Palette, click the appropriate checkbox (either Par or Div) corresponding to the desired style or styles. Typically, changes will be seen immediately if the Layout Editor for the page is visible. However, if the style includes the use of an image for a list item, the image will not be visible until the Preview tab is selected.

Demonstration or Practice Activity

For this activity, you will apply the new class styles to the lists.

  1. Use the document from the previous activity.
  2. Steps relating to the top three-item list:
    1. In Layout view, select the first list on the page (i.e., select the entire list).
    2. Within the CSS Palette, click the Div checkbox on the line corresponding to the .bulletlavender class style.
    3. View the page in Preview mode.
    4. View the source code to see how the class was specified for the whole list.
  3. Steps relating to the bottom three-item list:
    1. In Layout view, select the first of the three list items.
    2. Within the CSS Palette, click the Par checkbox on the line corresponding to the .bulletlavender class style.
    3. In Layout view, select the second of the three list items.
    4. Within the CSS Palette, click the Par checkbox on the line corresponding to the .bulletblue class style.
    5. In Layout view, select the third of the three list items.
    6. Within the CSS Palette, click the Par checkbox on the line corresponding to the .bulletteal class style.
    7. View the page in Preview mode.
    8. View the source code to see how the class was specified for each list item.

It's
time!

Students should complete the following assignments from Student Guide 2:

  • 6.5.1: Individual Assignment
  • 6.5.2: Web Team Assignment

CSS Box Model

Although the CSS Box Model doesn't apply specifically or exclusively to lists, it is a very important aspect of cascading style sheets and needs to be discussed before we get further into the curriculum. A good example of how the box model can be applied on a Web page relates to setting a page's margin to accommodate an image on the side of the page. Let's learn a bit about the box model in general and then how to apply it in GoLive.

  1. Properties and Values
  2. Examples

*** Begin section copyright © 2000-2003 ID 4 the Web ***

Properties and Values Top of page

The CSS Box Model provides for a way to place empty space around elements. The box consists of space set aside for padding, borders, and margins. Some of the properties and associated values used by the CSS Box Model include:

width Top of Properties and Values section

The width property is used to define the horizontal width of the box. The values associated with the width property can be expressed in absolute terms (e.g., 100px) or in percentage terms (e.g., 20%). You may also use the preset values auto or inherit.

p {width: 50px}

height Top of Properties and Values section

The height property is used to define how tall the box is. The values associated with the height property can be expressed in absolute terms (e.g., 100px) or in percentage terms (e.g., 20%). You may also use the preset values auto or inherit.

p {height: 50px}

margin Top of Properties and Values section

The margin property identifies the margins for the sides of the box. If you want all four margins to be equal, you can simply use the margin property as shown in Example 1 below. Otherwise, you can specify the four sides separately, using properties margin-top, margin-right, margin-bottom, and margin-left as shown in Example 2 below.

Example 1:

body {margin: 20px}

 Example 2:

body {margin-top: 20px;
      margin-right: 25px;
      margin-bottom: 30px;
      margin-left: 35px;
      }

border Top of Properties and Values section

The border property is used to surround an element with style, color, etc. The various border properties include border-width (e.g., thin, medium, or thick), border-style (e.g., none, dotted, dashed, solid, double, groove, ridge, inset, or outset) and border-color.

h1 {border-width: medium;
   border-style: solid;
   border-color: blue;
   }

padding Top of Properties and Values section

The padding property is used to identify the white-space between the content and the box border. If you want padding on all sides to be equal, you can simply use the padding property as shown in the example below. You can also specify the padding of each side separately, using properties padding-top, padding-right, padding-bottom, and padding-left.

h1 {padding: 20px}

Examples Top of page

To help you understand the relationships among margin, border, and padding, study the CSS Box Model diagram in Figure 6.5-5. As the figure shows, the content (which could be any element, e.g., p or body) is in the center. The content is surrounded by the padding (if any). Outside the padding is the border (if any). Outside the border is the margin (if any).

In the three examples below, we use a paragraph as the content. In each case, the settings of margin, border, and padding are different:

 CSS Box Model

Figure 6.5-5: CSS Box Model

Example Browser Rendering
p {border-width: thin;
   border-style: solid;
   border-color: black;
   padding: 0px;
   margin: 0px;
   }

This paragraph has a thin-width, solid, black border, with no padding on the inside (between paragraph and border) and a 0-pixel margin on the outside (between border and whatever is outside the whole element—in this case, the border of the table cell holding the paragraph).
p {border-width: medium;
   border-style: double;
   border-color: red;
   padding: 10px;
   margin: 15px;
   }

This paragraph has a medium-width, double, red border, with 10 pixels padding on the inside (between paragraph and border) and a 15-pixel margin on the outside (between border and whatever is outside the whole element—in this case, the border of the table cell holding the paragraph).
p {border-width: thick;
   border-style: dashed;
   border-color: black;
   padding: 5px;
   margin: 30px;
   }

This paragraph has a thick-width, dashed, blue border, with 5 pixels padding on the inside (between paragraph and border) and a 30-pixel margin on the outside (between border and whatever is outside the whole element—in this case, the border of the table cell holding the paragraph).

The W3C mentions several ways in which cascading style sheets benefit accessibility:

  • They separate document structure from document presentation. They put much formatting information outside the HTML document, thus simplifying and cleaning up the HTML code, which, in turn, increases accessibility by making the code easier for assistive technologies to understand.
  • They allow precise control over spacing, alignment, positioning, and font size, color, and style.
  • They allow users to override author styles.
  • They support automatically generated numbers and markers to help users stay oriented within a document.
  • They support aural style sheets (ACSS), which specify how documents will sound when rendered as speech.

However, if you choose to use style sheets (and you are encouraged to do so to control layout and presentation), it is critical that your pages are still readable without style sheets. Always check your pages with style sheets turned off to make sure that they remain accessible to those with browsers that don't understand style sheets.

Additional Resources
If you'd like more information about cascading style sheets, see Web Design Group's Cascading Style Sheets page; it has multiple links to many interesting and helpful sites in both informational and tutorial formats. Of course, the ultimate resource is the W3C's CSS page.

*** End section copyright © 2000-2003 ID 4 the Web ***

CSS Box Model Applied in GoLive

External CSS Review

Creating external style sheets was originally addressed in the Cascading Style Sheets 2 lesson. Let's do a brief review before we talk about utilizing the CSS Box Model in GoLive.

To create an external style sheet in GoLive, follow these steps:

  1. Make the following menu selections:

    File > New Special > Cascading Style Sheet

    This opens the External CSS Editor (see Figure 6.5-6).

  2. Note the default element styles referenced in the CSS Editor (i.e., body, p, td).
  3. Save the new external style sheet in the site's site or root folder. The style sheet should have a .css extension.
  4. Add the desired, new style types.
  5. Save the external style again after adding the styles.
  6. Close the CSS Editor.
GoLive CSS Editor

Figure 6.5-6: External CSS Editor

To link an external style sheet to an HTML document, follow these steps:

  1. Open the page to be linked to the external CSS file.
  2. Click the CSS Editor button in the page's Layout Editor.
  3. Click the New Link to External CSS button.
  4. Click the CSS Style Inspector's Browse button associated with the Reference field.
  5. Navigate to and select the desired .css file. Once a CSS file has been linked to a page within your site, external .css files will appear within the External folder of the CSS Editor.

CSS Editor Block Tab

The CSS Box Model's margin and padding properties are represented in the CSS Style Inspector Block Tab (see Figure 6.5-7). The Block Tab is accessed via the Block button GoLive CSS Inspector Block Button. It provides multiple fields for the following sections:

  • Margin -- Sets the margins based on the desired unit of measurement
  • Padding -- Sets the space between the block border and the style item
  • Block -- Sets width and height properties for the current style

The unit of measurement can be selected and/or changed by selecting the pop-up arrow to the right of the desired box field.

 GoLive CSS Style Inspector Block Tab

Figure 6.5-7: CSS Style Inspector Block Tab

CSS Editor Border Tab

The CSS Box Model's border property is represented in the CSS Style Inspector Border tab (see Figure 6.5-8). The Border tab is accessed via the Border button GoLive CSS Inspector Border Button:

  • The left column is used to set the thickness of the border based on the desired unit of measurement.
  • The middle column is used to set the color of the border.
  • The right column is used to set the style of the border (e.g., solid, double, dashed, etc.).

The unit of measurement (for column one) or the color (for column two) can be selected and/or changed by selecting the pop-up arrow to the right of the desired box field.

 GoLive CSS Style Inspector Border Tab

Figure 6.5-8: CSS Style Inspector Border Tab

Demonstration or Practice Activity

For this activity, you will create an external style sheet and link it to the index.html file of your "practice" site.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Create an external style sheet and save it as practicestyle.css.
  3. In the External CSS Editor, select the body element.
  4. Select the Block Tab.
  5. Set the top margin to 40 pixels.
  6. Save the style sheet again.
  7. Open the index.html page of the "practice" site.
  8. Link the practicestyle.css file to the index.html file.
  9. View the index.html file. If there is no text on the page, enter some text to see the application of the external style.

It's
time!

Students should complete the following assignments from Student Guide 2:

  • 6.5.3: Individual Assignment
  • 6.5.4: Individual Assignment
  • 6.5.5: Web Team Assignment

Top of page

| Table of Contents |

Copyright © 2002-2003 Adobe Systems Incorporated, except those portions marked copyright © 2000-2003 ID 4 the Web. All rights reserved.