Basics of Cascading Style Sheets, Part 2

This lab provides some initial practice with cascading style sheets, classes, and div tags.

Color

In working with color (either for a font or for the background of a region), HTML considers an overall color as being a composite of red, green, and blue, often abbreviated RGB.

• The amount of each color is given on a scale from 0 through 255.

  	Pure red is maximum red with no green or blue—sometimes represented as rgb(255, 0, 0).
  	Pure green is maximum green with no red or blue—sometimes represented as rgb(0, 255, 0).
  	Pure blue is maximum blue with no red or green—sometimes represented as rgb(0, 0, 255).
  	White represents a maximum amount of each color, rgb(255, 255, 255)
  	Black represents the absence of color, rgb(0, 0, 0).

• Many sources on the Web provide RGB values for a wide range of colors. See for example, https://www.rapidtables.com/web/color/RGB_Color.html or https://en.wikipedia.org/wiki/Web_colors.

Work Started in Class

Consider the sample-css-page.html and its associated style sheet: style-lab.css.

1. Click on each of these links: note that the results will appear in different tabs in your browser. Save each of these files in the CS-199 shared drive: mb://cs-199.willamette.edu/www, using a filename for your collaborative team. (The filename might be something like sample-css-page-???.html and style-lab-???.css, where ??? is related to your team.

2. Open both the sample-css-page-???.html and style-lab-???.css in TextEdit. Within file sample-css-page-???.html, change the style sheet reference to style-lab-???.css

3. In reviewing the page and style sheet, explain how the following elements on the page are achieved:

   1. What part(s) of the page cause the quotes from Thoreau to be numbered?
   2. How is the font and background color for quote 1 achieved? (Explain briefly)
   3. Classes are identified for quotes 1 and 2. Why do these list elements look different? (Explain briefly)
   4. Why do quotes 3, 6, and 9 appear with only a black font on a white background?
   5. Why does so much space surround the paragraphs within the Bibliography and Citation section?

4. Check whether the sample page and style sheet conform to the standards of the World Wide Web Consortium. Explain the steps you used for checking.

5. For the bibliography and citation, change the attributes of the relevant class, so the top and bottom margins are just 30px each, and the left and right margins are 50px each.

6. Adjust the style for an h1 header, so the font is larger than in the original.

7. Adjust the style for an h2 header, so the font color is green in each case.

8. What happens when a class name is misspelled on an html page?

9. What happens when an attribute is misspelled in a cascading style sheet?

10. In the stylesheet specification for a paragraph, what happens if the bottom margin is set to 0px? Explain.

11. Make additional changes to at least four elements of the style sheet. In each case, indicate the change made and how that change is reflected when the page is loaded into the browser.

12. Create a new page with at least two headers and at least 3 paragraphs. Then use a style sheet, so that various parts of the page have different appearances. Separate from the page and style sheet, write a brief description of your vision for the appearance of the resulting page and how your text and style sheet implement that vision.

Work to be Turned In

• Descriptions and explanations for steps 3-11.
• Printout of the html and style sheet for Step 12, together with the URL that can be used to access that page.

created 15 January 2019 revised 22-23 January 2019