Tools for Information Literacy ⑤ The presentational layer
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
-
Create a folder in the same place on your computer where your task02a is located,
and name this new folder task02b.
-
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 the task02b 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
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
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.