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.

But first, to remain organized, create a new folder on your laptop

1. Create a folder in the same place on your computer where your task02a is located, and name this new folder task02b.
2. Then copy yourindex.html from thetask02a folder and paste it into thetask02b folder you just created so that it will display as the first page in that directory.

Add a LINK in the HEAD of the page you just pasted intask02b folder.

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 task02b 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.