Tools for Information Literacy

Add some CSS to your task 02a web page

Task 02b will see you add three levels of style instructions to your task 02a page.

Add a LINK in the HEAD of the page you created for task 02a

Get a copy of the tools.green file and save it in a stylesheets directory you will have created in your working directory.

There are two ways to LINK your HTML document to an external style sheet, with either an absolute or a relative LINK.

We will go with a relative LINK for this example. Use the code below to replace the already-existing line in the head section of the file that begins with a link tag, so the page can use the styles in the linked style sheet.

<link rel="stylesheet" href="stylesheets/tools.green.css">

Then look at your page to see what, if anything has changed.

Add a STYLE in the HEAD of the page you created for task 02a

Add the following code to the line between your link tag line and your close head tag line.

<style>
        h3 {color:#ffff00; font-style:italic; font-size:30px;}
</style>

Then look at your page to see what, if anything has changed.

Add an INLINE STYLE DECLARATION in the BODY of the page you created for task 02a

Add the following code to the line containing an h3 tag.

<h3 style="font-weight:bold;">

Then look at your page to see what, if anything has changed.

Condition

By 2359 on the day before the following session, SFTP the entire task02a folder into your public_html directory on Opal and tell your lab/recitation instructor to look at it. Task 02b is required just to compel you to compel you to try out linking to an external CSS stylesheet and to try both document level and inline style declarations.

Standard

Validate it again with the W3C Markup Validation Service.

Your hard coded page must again validate using the W3C Markup Validation Service. There must be no errors in your code.