CSS Formating
We have seen how Cascading Style Sheets (CSS) can be used to format HTML. In this lab you will apply CSS formatting using a variety of selectors to a cleanly structured HTML website in order to make some common formatting changes.
Lab Objectives
By the end of this lab, students will be able to...
- Identify common key sections of web page by careful reading of an HTML document.
- Effectively use an external Cascading Style Sheet to format elements on a web page.
- Create several common page formatting effects including: page background-images, styling lists, and font adjustments
- Apply styles using a variety of ID and class selector combinations.
Directions
- Download a basic HTML template page and content files to create the beginnings
of a web site for PRZ Law - a fictitious Seattle law firm.
- Download the zip file prz_formatting.zip
- Extract the zip file into the appropriate directory on you computer: either labs or week3
- The newly created prz_formatting directory should contain an images and a styles directory and the following files: template.html, attorneys.txt, contactus.txt, faqs.txt, index.txt, legallinks.txt, office.txt, practice.txt, images -> przlogo.gif, and styles -> format.css
- Open the template.html file in your editor. You will use this file as a template to create seven HTML pages for the site using the content found in the .txt files. Before you start creating files, review the four major sections of the HTML structure found in the template.html file: header, navigation, content, and footer. Notice template.html is already linked to an external style sheet, format.css located in the styles directory
- In a separate window, Open index.txt; select and copy the entire content of the .txt file
- Place your cursor between the opening and closing <section id="content"> </section> tags in the body of template.html and Paste the text from index.txt
- Insert the cursor in the <title> tag just after the colon. Type the text " Home" just before the closing </title>
- Save the new file as index.htmlin the prz_formatting directory
- Open the template.html file again in your HTML editor and repeat steps 3—6 to create six additional HTML files using the following content map:
- Paste in the contents of attorneys.txt, type " Attorneys", and Save As attorneys.html
- Paste in the contents of practice.txt, type " Practice", and Save As practice.html
- Paste in the contents of offices.txt, type " Offices", and Save As offices.html
- Paste in the contents of faqs.txt, type " FAQs", and Save As faqs.html
- Paste in the contents of legallinks.txt, type " Legal Links", and Save As legallinks.html
- Paste in the contents of contactus.txt, type " Contact Us", and Save As contactus.html
- View all of your new HTML files in the browser and test the links from page to page. If any links are broken re-check that the file names are correct and that you placed all files in the prz_formatting directory.
- When all of the HTML files are complete and their links are working, Delete all of the .txt files from the prz_formatting directory
- Now we are ready to style all the pages using the PRZ Website Style Guide and your CSS coding skills. Determine which selector and which declaration will most effectively achieve the desired result listed in the style guide. Write most of your CSS rules in the external style sheet format.css. Only minor changes will need to be made to the HTML pages (adding a couple of class attributes and an in-line style to one element.)
-
Check your completed PRZ website against the resulting pages illustrated in the following images (drawn by Firefox):
