Lists and Styles
Objectives
Practice
Files

Lists (You Tube Video | Video)

As a web page displays more information, we want to provide the information in a format that it readable by users. One way to display multiple pieces of information is in a list. Lists come in two flavors: ordered and unordered. An ordered list has numbers, letters or numerals next to the list items and signifies an order or precedence. Unordered lists have bullets next to them and signifies information that is not in any priority.
  1. In your Striped Umbrella site, open the spa.html page.
  2. Select the three items under Massages (Sport Massage, Swedish Massage and Hot Stone Massage) along with their descriptions.
  3. In the HTML Properties Panel, Click on the Unordered List button (it looks like a bulleted list).
  4. Place the cursor at the end of the Sports Massage description (after clients) and insert a paragraph break. Line breaks do not create new list items in a list, but paragraph breaks do.
  5. Repeat this process for the services listed under Facials and Body Treatments.
  6. Save and view in the browser.
  1. At the end of the spa.html page (after extension 39) insert a paragraph break and a horizontal rule.
  2. Import the text from questions.doc. Be sure to clean and spell check as well.
  3. Highlight the four questions and answers and apply an ordered list (looks like a numbered list) from the HTML Properties Panel. Be sure to apply paragraph breaks if necessary to make each question/answer have a number.
  4. Save and view in the browser.
Styles

When the internet started, web programming was much like the wild west. Each browser got to decide how it would process and display information. After a while, the need for standards arose and out of that came a division of power. HTML, it was decided, would be used to mark up content, while CSS (Cascading Style Sheets) would be used to make the content look good. Style can be stored internally in the page, or externally in their own file. Storing styles externally is more powerful and efficient because they can then be applied to multiple pages.

Creating a Class Rule (You Tube Video | Video) A class rule is a rule that can be applied to many different elements. In style code a class is denoted with a '.'. So, a class to turn text blue would be shown as .blue. When creating class rules, it is helpful to name the classes pneumonically, in other words, name them descriptively so that the class name implies what it does.
  1. Open the spa.html page of your Striped Umbrella Site
  2. In the Styles Panel on the right, find a click the + button.
  3. In the New CSS Rule Window:
    • In the Selector Type choose Class
    • For the Selector Name, type listHeading (note the consistent naming convention)
    • For the Rule Definition, choose New Style Sheet File
    • Click OK
  4. You will be prompted to save the file. Save the file as suStyle.css in the style folder of your stripedUmbrella site.
  5. In the CSS Rule Definition Window:
    • In the Type Category, set the Font-Family to Arial, Helvetica, sans-serif. This is a priority list of possible fonts to be used. Since each computer has its own fonts, it is recommended to provide a list of possible fonts to be used in case your first choice font is not on the computer viewing the site.
    • In the Type Category, set the Font Size to 12px.
    • In the Type Category, set the Font-weight to bold.
    • In the Type Category, set the color to #006.
    • Click OK
  6. At this point, nothing on your screen has changed as we need to apply the class to the desired elements. Highlight the word Massages that is just above the unordered list we created.
  7. In the CSS Properties Panel, click on the Targeted Rule box and select the listHeading option. Note the change in the highlighted word.
  8. Repeat this process for Facials, Body Treatments and Questions You May Have
  9. Save and view in browser.

Editing a Rule (You Tube Video | Video) Occasionally, the rule that you made needs to be modified or changed. Sometimes, we need to add a style or take away a style. Sometimes, we need to change the color because the color scheme of our site has changed. Here is how to edit a rule.
  1. In the Styles Panel on the right, find the suStyles.css listing.
  2. If it is not shown in expanded form, click the plus sign to the left of the file name
  3. You should now see the .listHeading style that you created. Double click on it.
  4. The CSS Rule Definition window will re-appear, with all of your current styles still applied.
  5. Change the Font-size to 14px and check the underline box.
  6. Click on Apply to see your changes.
  7. Click on OK to finalize your changes.
  8. Save and preview in browser.

Creating a Tag Rule (You Tube Video | Video ) Tags are the HTML code that marks up the content of a page. Most of our content appears in a p or paragraph tag. However, we have also used h1 and h2 tags when we created Heading 1 and Heading 2 elements. When we make a tag rule, the styles are automatically applied to any instance of that tag on the page.
  1. Click the New CSS Rule Button (+) in the Styles Panel.
  2. In the New CSS Rule dialog:
  3. In the CSS Rule Definition Dialog:
  4. Repeat the process to make a rule for the h2 tag that is Arial, 18 and font-weight=normal
  5. Repeat the process to make a rule for the h3 tag that is Arial, 16 and font-weight=bold
  6. Save and preview in browser.

Linking a Style Sheet (You Tube Video | Video) As previously discussed, the power of a style sheet is that, once created, the styles can be applied to multiple pages without the need to re-create them on each page. So, once a style sheet has been created and populated with styles, we only need to link it to the pages on which we want it to be used.
  1. Open the index.html file
  2. Insert the cursor after "Welcome to the Striped Umbrella" and add a paragraph break.
  3. Click in the text "Welcome to the Striped Umbrella" and in the HTML Properties Panel, set the format to Heading 1.
  4. In the Styles Panel, click on the link button (next to the add style button) and locate the suStyles.css file from your Striped Umbrella styles folder.
  5. Note the change in the h1 text
  6. Save and preview in browser.