Comment on Exercise 3


The first instruction -- to create and use a CLASS rule in the stylesheet -- has already been used. To show how it can be applied I created a hili yellow rule and used it on the first list.

The second task was to create an embedded class rule and apply it both as a SPAN and DIV. I created a tips class rule setting the background color as blue and applied it first as a SPAN, then almost immediately as a DIV. I gave the DIV the id of "baskets" to remind me of what the tip was.

The third step was to override an existing rule with an inline style. I gave the link at the bottom of the page a black background.

Part four was to use FLOAT and CLEAR. The two clocks at the start use FLOAT:left and FLOAT:right to position them. The heading then has a CLEAR:both rule to push it down to the next line rather than positioned between them.

The next three clocks illustrate the difference between FLOAT:left (embedded in the text) and FLOAT:none (the text starts aligned with the bottom of the clock). The third clock (part of the basket DIV) has the rule FLOAT:left, which keeps the blue background with the height of the text.

The margin specification to make one element overlap another is already used to keep the left-side image away from the body of the text. I added a clock after the DIV then set the MARGIN-TOP to -60px. How it looks depends on the size of the browser.

The sixth exercise was to make a static border and one that changes when the browser is resized. The static border is the home div on uses, the resizable border (50%) is the storage section.

 


Go to the page