<section>
<?= t_head("Create CSS Stylesheet", "10") ?>
<!-- <figure class="example">
<img src="aboutme_no_css.png" alt="About Victoria Kirst" />
<figcaption>This is a similar page describing former CSE 190 M TA and coauthor of our textbook, Victoria Kirst.</figcaption>
</figure>
-->
<ol>
<li>
<p>Download the following HTML page:</p>
<p class="resource"><a href="wookie.html">wookie.html</a></p>
<p class="note important">Right-click the link, then select “Save Link As…” and ensure “HTML Only” is selected.</p>
</li>
<li>
Create the CSS file this HTML file links to, <samp>wookie.css</samp>. Add a style rule that does something very obvious (like setting the font size really big) to test to be sure your CSS file is properly linked. (Then you can remove that rule if you like.)
</li>
</ol>
</section>
<section>
<?= t_head("Targeting Elements", "10") ?>
<ol>
<li>This page could have some more HTML in it, to better represent some items. For example, the title of each piece of fanfic could be a type of header. Wrap each title in a <code>h3</code>, since they’re inside of an <code>h2</code>.</li>
<li>The Wookie image is really big. Make a style rule that changes its <code>height</code> to 200 pixels.</li>
<li>Divide the page into three sections: the header at the top, the stories section, and the footer at the bottom. To do this, wrap each section in a <code>div</code> tag and give each section an ID.</li>
<li>Wrap each article description in a paragraph tag.</li>
<li>The “stats” line of each article has no HTML at all. Add some HTML so that you can style all ratings on the page together.</li>
</ol>
</section>
<section>
<?= t_head("Set Box Model Properties", "10–15") ?>
<ol>
<li>Set the <strong>background color</strong> of all paragraphs to something obvious (for example, <code>fuchsia</code>).</li>
<li>Set <strong>one of your paragraphs</strong> to have an <code>id</code> attribute and give it a different colors for the background and border, and a different border style (for example, <code>dotted</code>).</li>
<li>Set the <strong>border</strong> of all paragraphs to something obvious (for example, <code>dashed red 10px</code>).</li>
<li>Set the <strong>margins</strong> of all paragraphs to something obvious (for example, <code>3em</code>).</li>
<li>Set the <strong>padding</strong> of all paragraphs to something obvious but different than margins (for example, <code>1.5em</code>).</li>
<li>Set the <strong>width</strong> of all paragraphs to be 300px.</li>
</ol>
</section>
<section>
<?= t_head("Inspect With Firebug", "5", array('essential' => true)) ?>
<ol>
<li>Right-click on one of the paragraphs and select <strong>Inspect Element</strong>. The Firebug panel will open.</li>
<li>In the left pane will be all HTML in the document. The element you clicked on will be highlighted.</li>
<li>Hover your mouse over the highlighted element; the space it takes up on screen will be highlighted.
<ul>
<li>Notice there are different colors of highlighting. Which color corresponds to which property?</li>
</ul>
</li>
<li>In the small right pane of Firebug, click the Layout tab. Notice the dimensions displayed there.</li>
<li>Hover your mouse over the various box model elements in the Layout tab. Notice the ruler that is shown, and calipers which illustrate the dimensions of the element.
<ul>
<li>How wide is your element in total? Is this different from what you would expect, having set the <code>width</code> property to be <code>300px</code>?</li>
</ul>
</li>
</ol>
</section>
<!-- <section>
<?= t_head("Positioning", "10") ?>
<ol>
<li>Add a phrase element (for example, <code>strong</code>) to one paragraph.</li>
<li>Attach an <code>id</code> attribute to each of your other paragraphs.</li>
<li>Make the paragraph with the phrase element <code>position: relative</code>, with an obvious value for <code>top</code> and <code>left</code>.</li>
<li>Make the phrase element <code>position: absolute</code>, with obvious values for two of the dimension properties (<code>top</code>, <code>left</code>, <code>bottom</code>, and <code>right</code>).</li>
<li>Make another paragraph <code>position: absolute</code>, with obvious values for two of the dimension properties.</li>
<li>Make another paragraph <code>position: fixed</code>, with obvious values for two of the dimension properties. Resize the window to ensure there is a scroll bar, and scroll the contents of the page.</li>
</ol>
</section> -->
<footer>
<p>If you’ve finished everything, good job! Make your page look a little more attractive.</p>
</footer>