<< Return to Syllabus

CSS Tutorial: Example

The Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
   <head>
      <title>Visit the Duke Gardens</title>
      <style type="text/css">

         body{
            font-family: arial, sans-serif;
            border-top: 5px solid #337733;
            border-left: 7px solid #337733;
            padding: 1em;
         }
         div#top { float: left; }
         h1, h2 { font-family: times; }
         h1 {
            position: absolute;
            margin-left: 5em;
            margin-top: 0.1em;
            padding: 0 0.3em;
				
            border-bottom: 2px solid #000000;
            border-left: 2px solid #000000;
            color: #ffffff;
            background-color: #337733;
         }
         h2 {
            color: #003300;
            padding-left: 1em;
            border-bottom: 1px solid #337733;
            clear: both;
         }
			
         p{
            font-size: 0.8em;
            text-indent: 1.5em;
            text-align: justify;
            color: #115511;
         }
			
         /* Making the table images the right size. */
         table { border: 1px solid #337733; }
         table img { height: 150px; }
			
         /*Making my links horizontal and styled.*/
         ul { list-style-type: none; padding-left: 0.5em; }
         li {
            display: inline;
            border: 1px solid #000000;
         }
         a {
            padding: 0 10px;
            text-decoration: none;
            color: #337733;
         }
         a:hover {
            color: #ffffff;
            background-color: #337733;
         }

      </style>
   </head>
   <body>
   <!-- My title/image combination -->
   <div id="top">
		<h1>The Duke Gardens</h1>
		<img src="./pictures/popup_photo_pergola.jpg" />
	</div>
		
		<!-- 3 paragraph description -->
		<p>
			One of the most beautiful locations on Duke's campus is the Duke Gardens.  From open areas to picnic or play games, to secluded regions for walks through the woods, the Gardens have much to offer any visitor.
		</p>
		
		<p>
			Though spring and summer certainly bring out the best in the Gardens' plants, beauty can be found throughout the year.  More than a simple display of flowers, the Sarah P. Duke Gardens include a wide range of trees, bushes, and shrubs.
		</p>
		
		<p>
			In addition to the beautiful scenery, the Gardens are also home to many different animals.  Along with the typical squirrels and birds founds in most woodland settings, visiting the Gardens' ponds also will find ducks, geese, turtles, and - of course - fish. The spring and summer tradition of the baby ducklings following their parents around the Gardens is enough to make visiting the Sarah P. Duke Gardens a tradition of your own.
		</p>
		
		<!-- A simple table of pictures -->
		<h2>More Garden Photos</h2>
		<table>
			<tr>
				<td><img src="./pictures/popup_photo_gate_house.jpg" /></td>
				<td><img src="./pictures/popup_photo_goldfish_pond.jpg" /></td>
			</tr>
			<tr>
				<td><img src="./pictures/popup_photo_sunahama_to_ishi.jpg" /></td>
				<td><img src="./pictures/popup_photo_bird_watching_shelter.jpg" /></td>
			</tr>
		</table>
		
		<!-- Links to more information -->
		<h2> Find Out More </h2>
		<ul>
			<li><a href="http://www.duke.edu">Duke University</a></li>
			<li><a href="http://www.hr.duke.edu/dukegardens/dukegardens.html">Gardens</a></li>
			<li><a href="http://www.hr.duke.edu/dukegardens/visitor_info.htm">Visitor Information</a></li>
		</ul>
	</body>
</html>
<< Back to Introduction <<