Comp 140 - Lab 3 - FAQ

Laboratory Assignment 3

1. Can I do this lab at home?

   Yes. You will need SSH access to the Camosun CS server, deepblue. You can download and install the WinSCP SSH application to do this. See the online notes. Substitute the H: drive with your local drive and folder (e.g. documents\camosun\comp140\lab03). You can download a trial version of Adobe's DreamWeaver from the adobe web site.

2. What do I need to know before doing this lab?

   Lab 2 completion will help but is not required. Review the lab write-up and lecture material on CSS.

3. What should I have learned from completing this lab?

   CSS provides a rich and flexible method for styling web page content. Inline CSS is best limited to single use for one or two HTML elements within the web page. Embedded CSS provides a way to group all page-specific style definitions into the HTML document's head element. Linked CSS uses an external stylesheet to enforce a standard style across all pages in a web site. CSS properties define many styles including colour backgrounds, font selection, font display, spacing, text and image alignment, container spacing such as padding and margins, element layout, and hyperlink display. CSS styles can be grouped into classes for sharing a common style among multiple elements or id's for a unique element. CSS uses the rule of proximity to make those styles defined closest to the element have highest importance. The CSS rule of specificity indicates which CSS style definitions will apply in case an element is styled at different levels (e.g. class versus id). The rule of specification in CSS says that when two styles have the same weight, the last rule specified is used (e.g. having two color styles defined for the same element).

4. I would like to learn more about CSS. Where do I start?

   Go to the W3C web site and review the latest official specification documentation.

5. How do I style the other HTML pages after I complete the styling update for index.html and menu.html pages?

   For lab 3 all your site's web pages should share the same template -- identical navigation style, same header, and same footer, only the content in the middlebox will be different. You can copy and save the content portion of the opportunity.html file in a text file, then save the index.html file as the file opportunity.html and re-edit the middlebox with the new content from the text file.

6. My web page won't display the CSS style in the browser. What do I do?

   • Verify the URL in the browser is correctly defined. Are you by chance pointing to the lab 2 version?
   • Verify the <link> element in the HTML file is correctly defined within the head element
   • Verify the CSS is properly defined in the .css file. Use the W3C online CSS validator to check that your CSS properties and values are syntactically correct (no missing semicolons at the end of the declarations, no dropped colons separating the property and value, no misspelled property or value names)
   • Verify the HTML in your document is valid. You may be missing an end tag for one of the div elements.
   • Use the Firebug tool in Firefox to check the HTML page elements and the associated CSS styles.
   • If all else fails, send me your HTML and CSS files as an e-mail message attachment.