DIGI 220 Labs
Lab 07 - Basic CSS Formatting
This week's standard lab includes the creation of a basic HTML webpage and a basic CSS external style sheet which demonstrate the range of the basic formatting properties found in CSS. Expect to do some typographical reverse engineering! You'll show your knowledge of properties relating to fonts, backgrounds, and general text formatting. Below are an example and instructions for the standard version of Lab 07.
- HTML recreated
- CSS recreated
- Properties added as necessary (5 marks)
- ADV 3 images and info (3 marks)
Part 1 - Create Your HTML
- Grab the
lab07.htmlinto your labs folder and adjust the
linkelement so it points to the CSS file you create in the next section. Aside from this change, you should not have to modify any of the HTML for this lab.
- Remember to put a link from your
index.htmlpage to your
Part 2 - Create Your CSS
- Grab the
lab07.csstemplate, and place it with the other CSS files for your site.
- You will need to add new rules and properties (look inside the template to find out where) to the CSS file in order to have the HTML be presented as closely as possible to the background image which has been set for the paragraph.
- Once everything is working on your local copy of the website, upload the two files to your site
- Don't forget to test and validate your HTML and CSS files - I'll be checking both. Also, don't forget a link from your index.html to your new lab
One of the web development challenges we've discussed is that the user agent plays a big role in the presentation of our content. For the Advanced portion of the lab, take a screenshot of your work in three different browsers. Tastefully organize the three images, alongside relevant browser information, and make note of presentational differences you deem to be significant.