HTML and CSS Reference
In-Depth Information
<link rel="stylesheet" href="wildflower.css" type="text/css" />
</head>
<body>
<div id="splashlogo">
<h1>Door County Wildflowers</h1>
</div>
<div id="trillium">
<img src="trillium.jpg" alt="Trillium" width="200" height="150" />
</div>
<div id="yls">
<img src="yls.jpg" alt="Yellow Lady Slipper" width="200"
height="150" />
</div>
<div id="pls">
<img src="pls.jpg" alt="Pink Lady Slipper" width="200" height="150" />
</div>
<div id="enter">
<a href="page1.html">Enter</a>
</div>
</body>
</html>
Save your file as splash.html in the wildflowers folder. Test your page in a browser and
compare it with the one shown in Figure 6.17.
The browser has displayed the page using normal flow—following the order of the
elements in the source code. Don't worry that your elements are not positioned as
they should be. Next, you'll configure the positioning properties as you create the
wildflower.css.
Figure 6.17
The splash page
before the styles are
coded
Part 2—Code the External Style Sheet
Let's take a moment to consider what type of positioning is needed for the splash page:
the splash screen logo, the three images, and the link. Refer to the wireframe sketch
Search WWH ::
Custom Search