CSSRule: The Café Tutorial 6

Saturday, May 02, 2009

The Café Tutorial 6

In Cafe IV Tutorial, we had our page organized into different sections, with browser styled headings and paragraphs. With the HTML structure in place, we are now ready to style our document using CSS. There are 3 ways to add CSS styling into a document, one is by inline statements which is by far the least desirable way, another method is to use embedded styles, certainly a better approach than inline but inconvenient from a maintenance point of view , or you can link in a separate style sheet into your document.

Embedded style sheets use the "style" element which goes into the "head" of your HTML. Style element gets the "type" attribute which is given the "text/css" value. You list your CSS rules in between the opening and closing "style" tags. I will add an overall margin of 40 pixels to our document. Since I want this margin to go around my entire document, I added a "homepage" div which wraps around my content. Here's how we style that div.

<html>
<head>
<title>Four Square Cafe</title>
<style  type="text/css">
  #homepage {
     margin:40px;
  }
</style>
</head>

<body>
<div id="homepage">
<div id="intro">
<h1>Four Square Café </h1>
<p>
Four Square Café is located at the intersection of Melrose and Sunset Avenues in Los Angeles. We are a cafe with our own bakery, and also have a charcuterie for your favorite meats and cheeses. We offer breakfasts and made to order sandwiches. You can buy fresh, hot from the oven bread for your home twice a day, at 8 am and 5 am daily. In our Café, we are also famous for fresh organic coffee and tea made with mountain water. Each cup is in its own single cone and paper filter and dripped right into your cup. We then start over for the next customer.  
</p>
</div>

<div id="specials">
<h2>Today's Specials</h2>

<h3>The Pretzel Croissant</h3>
<p>
A unique combination, it's got the best of both worlds. The buttery sweetness and the coarse salt and the flaky outer crust and tender inner crumb, all topped with sesame seeds.
</p>
<h3>Berliner</h3>
<p>Rolled in sugar and filled with raspberry jam, the pillow soft donut that's
perfect with your coffee.</p>



.......................................................
..............  (bulk of code snipped) ................
.......................................................
.......................................................



<h3>Four Square Sails at the Marina</h3>
Monday - Saturday 8 AM - 8 PM
2108 Marquesas Way
Marina Del Rey, CA 90292
310.222.9078
</div>

www.4squarecafe.com 
</div>   <!-- closing div for #homepage -->
</body>
</html>

For results, see this file. Before adding the 40 pixels, our document looked like this. Just to remind you what XHTML can do, we started out with text running into each other. Even though our page is not finished, the addition of HTML and a single CSS rule has transformed our text document.