css assignment 1 - Mrs. Wing
advertisement
CSS ASSIGNMENT 1
1. Open Notepad and insert the “bare bones.”
<html>
<head>
<title>Your Student Name</title>
</head>
<body>
</body>
</html>
2. Save the document as cssinternal.html.
3. Type the following text in the body of the document.
Black Goose Bistro
The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere.
The menu changes regularly to highlight the freshest ingredients.
Catering Services
You have fun... we'll do the cooking. Black Goose Catering can handle events
from snacks for bridge club to elegant corporate fundraisers.
Location and Hours
Bakers Corner in Seekonk, Massachusetts
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
4. Change the café title to h1, other headings to h2 and insert paragraph tags around the
remainder of the text.
5. Insert the blackgoose.gif from the drive indicated by your teacher.
6. Save your document and open in a browser.
INTERNAL STYLE SHEET
7. In the head section of your webpage, insert the following:
<style type="text/css">
body {
background-color: #C2A7F2;
font-family: Garamond;}
h1 {
color: #2A1959;
border-bottom: 2px solid #2A1959;}
h2 {
color: #474B94;
font-size: 1.2em;}
h2, p {
margin-left: 120px;}
</style>
Modified from Learning Web Design by Jennifer Niederst Robbins, 3rd edition; edited by jwing Mar 2013
CSS ASSIGNMENT 1
8. Save the webpage and open in a browser. It should look this example.
9. Using your CSS Reference Tag or looking up CSS syntax, add four more CSS tags to the
page that will show an obvious change.
10. Insert a comment tag /*Comment*/ to explain the two tags that were added.
11. Print your webpage from a browser and turn in.
a. Make sure your name is the title of the documents so you will receive credit.
EXTERNAL STYLE SHEET
12. Open a new Notepad window.
13. Save the new document as cssexternal.css.
14. Open the cssinternal.html document.
15. Resave the file (save as) as cssexternal.html.
16. Cut the CSS style tags from the heading of cssexternal.html and paste in cssexternal.css.
17. Delete the open and close style tags.
18. Save the CSS file.
19. In the head of the cssexternal.html document type the following.
<link rel="stylesheet" type="text/css" href="F:\Adv. Web Page Design\Stnd 1 DW\CSS\css_external.css" />
20. Edit the section in italics with the pathway of where you saved the CSS document in
your student directory.
21. Save the html file and open in a browser.
22. Print the html code from both the CSS and html file from Notepad, staple and turn in.
Modified from Learning Web Design by Jennifer Niederst Robbins, 3rd edition; edited by jwing Mar 2013
