A Reset CSS

Once again, copy provided HTML for style-page.html. This page is identical to the one from last week except it contains a <link> to a CSS reset stylesheet which will remove all of the browser's default style information. Again, you may not change the HTML for this exercise.

The reset CSS will give us a consistent starting point across different browsers, but it means we have to do all of the styling ourselves. It can be good to have to consciously make the styling decisions, but for now, it's a really good excuse to practice some CSS basics.

Create a new stylesheet style1.css (not based on the one you created for exercise 3) and give the page a style appropriate to the content. Again, you'll need to find some details in the CSS reference.

You do not have to make this look like the browser's default style, only make the headings look like headings, lists look like lists, etc. Here are some things that likely need attention:

• the headings: the font size, and top and bottom margins. The <h1> and <h2> should be different enough that a reader can tell them apart.
• paragraphs: top and bottom margins.
• the lists: left padding or margin, and the list-style-type.
• code samples: a monospace font.

More CSS Changes

Add these changes to your style1.css from the previous question…

• Use a numeric colour code to give the <h1> a dark green background and light green text.
• Give the <h2>s a top and bottom border that is light blue using a numeric colour code. No left or right border. (Other style details of the border up to you.)
• Above you likely set a top and/or bottom margin on the <p>: remove it only for the paragraphs in the list. (That is, make the top/bottom margin/padding of the <p> in the <ul> to zero.)

Developer Tools

Try the browser developer tools in Firefox or Chrome (whichever you're using) on the page you created above.

Video tutorial: CMPT 165: Browser Developer Tools, or see browser developer tools instructions in the Guide.

Make sure you know how to find an element in the left pane of the tools, both by exploring the document there, and by the “pick an element” tool.

Have a look at the style rules to some elements in the right pane, and at the way the box model of the elements (their margin, padding, border) is displayed in the “Computed”/“Box Model” tab.

There is nothing to submit for this part, but please do it anyway.

Organizing Your Files

Since you'll now have two files named style-page.html and style1.css (from last week and this week), we should start organizing the public_html folder.

Inside your public_html on the server, create a new folder named exercise4. Upload your files for this week into that folder.

Folder names become part of the URL path, separated with a slash. You should be able to go to a URL like this (substituting your username for “userid”) and see your HTML page.

http://cmpt165.csil.sfu.ca/~userid/exercise4/style-page.html

Of course, make sure everything is working before submitting the URL…

Submitting

Submit the URL of your style-page.html page to the CourSys activity Exercise 4.