Cascading Style Sheets (CSS)

Lab 7

Copy hello.html from LAB6 to a new LAB7 directory.
Add a second attribute assignment to the opening tag of the p element in the body of your new hello.html page:
o n c l i c k = i n i t ( ) ;
Remove the first line of the script element:
w i n d o w . o n l o a d = i n i t ;
Save your file and open it in some browser. Click on the Hello World text. Type your name in the popup window. Then hit Enter.
Now click on your name and enter someone else's name.

In your LAB7 directory, download and extract lounge.zip.
Edit the lounge.html file in the lounge directory.
Create a <style> element inside its <head> element.
Modify color, font-family, and border bottom of <h1>, <h2>, and <p> elements as indicated in the text.
Move your CSS rules to a lounge.css file in your Chapter7 directory.
Using the <link> element, attach your lounge.css CSS rules to your lounge.html page.
Link the elixir.html and directions.html pages to the same lounge.css file. (Get the relative path right as the value for the <link>'s href attribute.)
Use property inheritance to change the default font-style to sans-serif by creating a rule for the <body> element.
Use the class attribute (as indicated in the text) to change the colors of the text in the paragraphs of the elixir.html page.
Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
Edit the index.html file in your LABS directory to hyper-link to the revised hello.html and lounge.html pages in your LAB7 directory.

Create an project.css file in your PROJECT directory.
Use inheritance to make the default font-style be some sans-serif font family.
Attach this CSS file to your index.html page and your other project pages.
Check that the CSS is valid.

Always turn off your computer and screen before leaving the room.