Beginning CSS

1. save a TextEdit file to your Portfolio Folder. Name it artist.html and type in:

<html>
<head><title>Mr Machtay artist page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<head>

<body>
<div class=”church”><img src=”images/tamaro01.jpg” align=”left”>
<img src=”images/tamaro02.jpg” align=”right”><br>
<h1>Church at Mount Tamaro</h1>
<p class=”text”>Mario Botta designed this church in Italy. When you move around the church, it looks different from every angle.</p>
</div>

</body>
</html>

2. Save another TextEdit file to your Portfolio folder. Name this one styles.css and type in:

body {background: url(images/bg7.gif); color: #660099}
h1 {margin: 0; font-size: 17.5px; line-height: 18.5px}
p.text {margin-top: 0; font-size: 10.5px; line-height: 16px; font-family: Verdana,Arial}
div.church {position: absolute; margin-top: 50px; margin-left: 100px; width: 430px}

3. Use the CSS CHEATSHEET handout to change the font sizes, faces and colors. Choose your own background and colors.

4. Now create a new DIV tag in artist.html file. Name it <div class=”household”> and insert the images “images/chairs.jpg” and “images/pitchers.jpg”. Then in the same DIV type in this text: Aside from designing buildings, Mario Botta also designed household items like chairs and pitchers.

5. In styles.css set positioning for div.household. Work on the page to make it look nice and reflect good design.

6. In artist.html create one other DIV tag named <div class=”sfmoma”> and insert the image “images/sfmoma.jpg”. Then in the same DIV type in this text: Mario Botta’s first building in the United States as the San Francisco Museum of Modern Art.

7. In styles.css set positioning for div.sfmoma. Work on the page to make it look nice and reflect good dsign.