CSSRule: The Café Tutorial IV

Thursday, April 23, 2009

The Café Tutorial IV

In this step, I introduced divisions into the markup, with the ubiqutious "div" tag. You will not see any differences in the browser yet even though there are many div's. Div's alone do not change the output but are used as hooks into the document to style it using CSS.

I also have a new element in this version, the ul or the unordered list element that's perfect for a list of similar items such as the different muffins that the Cafe has on their menu.

"specials", "coffee", "treats", "breakfast", "locations" are the five divisions that I've marked up using div's. All my div's use the element identifier, id. "id" is an identifier used to identify a unique element which means an element that can occur only once in a document. Even though the id name itself does not change anything from a programming point of view, it's good practice to choose relevant names for your id names which will provide meaning and organization for your document.

id attribute can be used with many other HTML elements and not just with the generic "div" element. As we talked before all attributes have values. The values I have used for the id's in our tutorial are descriptive names such as "coffee" and "locations". The syntax includes an opening angle bracket followed by HTML element name (div in this case), a space, the word "id", an equal sign, and the value for the id in quotes. <div id="locations">

The end tag does not change. An id element and a generic element both close the same way. </div> is how you would close a div element for either case.

We also have the "class" attribute which is used for categorizing similar elements. Unlike the id attribute, You can have more than one element sharing the same class name. The class syntax for HTML is identical to an id, the only difference being, the word "class" instead of "id", <div class="american">

<html>

<head>
<title>Four Square Cafe</title>
</head>

<body>
<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 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>

<h3>Cinnamon Swirl Coffee</h3>
<p>A flavored coffee that is full-bodied with a heady cinnamon aroma and a nutty, creamy flavor that competes with the frosting on a cinnamon bun. Drink your favorite cinnamon bun in a cup!</p>
</div>

<div id="coffee">
<h2>Coffee</h2>

<h3>Jamaica Blue Mountain</h3>
<p>
One of the world’s finest coffees is grown below the rich rain forests of Jamaica Blue Mountain on nearly 7,500 ft high lots, with suitable soil and climate for coffee farms. Clean bold taste with excellent body and intense aroma. Try it today.
</p>

<h3>Nepal Everest</h3>

<p>From the magestic Himalayans, Nepal Everest coffee has a spicy, smoky aroma, and a chocolate body with a nutty flavor and tart plum finish. Get to Base Camp without no climbing!</p>

<h3>Viennese Blend</h3>
<p>
Vienna-style roasting creates a deep brown, medium dark roast that toasts the beans to perfection. Mellow, smooth, and delicately nuanced with hints of chocolate, our Viennese Blend draws on a unique style of coffee roasting in Vienna that dates back to 1683 when Vienna’s first coffee house opened after the retreating Ottomans left their coffee bean sacks behind.</p>
</div>

<blockquote>
"My go-to cafe when I'm craving a sweet treat and latte: Berliner, Brie and Pear Tart, Brownie, Double chocolate cookies, Apricot muffins all super duper tasty and yummy good. The service is friendly and quick. They have a wide variety of wonderful sandwiches and salads"
</blockquote>

<div id="treats">
<h2>Treats</h2>

<h3>Brownies</h3>
<p>Each $3.50</p>
<p>Deep chocolate flavor with chocolate frosting and walnuts brownie is dusted with powdered sugar.</p>

<h3>Cookies</h3>
<p>Each $2.00</p>
<ul>
<li>Peanut Mice</li>
<li>Chocolate Chip</li>
<li>Chocolate Nib Medallions</li>
</ul>

<h3>Macarons</h3>
<p>Each $3.50</p>
<ul>
<li>Red Ketchup with Relish</li>
<li>Double Chocolate</li>
<li>Pistachio Cream</li>
<li>Hazelnut Herme</li>
</ul>
</div>

<div id="breakfast">
<h2>Breakfast</h2> 

<h3>Muffins</h3>
All Muffins $2.00
<h3>Cranberry Orange Muffins</h3>
<p>A great way to wake up with this vitamin packed muffin, it's topped with a
dollop of cranberry jam.</p>

<h3>Fresh Fruit Muffins</h3>
<p>Blueberry and seasonal fruits, topped with crunchy, dememara sugar.</p>

<h3>Whole Wheat Bran Muffins</h3>
<p>Apples, carrots and pineapple power this good for you healthy muffin
studded with plump raisins. Topped with cruncy honey glazed oat flakes.</p>


<h3>Cafe Bagel</h3>
<p>Each $2.00</p>
<p>Chewy New York style water bagels that are perfect with
our chive onion veggie cheese spread</p>

<h3>Pretzel Rolls</h3>
<p>Each $2.00</p>
<p>Your favorite pretzel as a morning roll, baked to a perfect caramel
brown and studded with salt. Great way to eat your favorite meat and
cheese from our deli counter.</p>
</div>

<div id="locations">
<h2>Locations</h2>

<h3>Four Square Café </h3>
Open Daily 8 AM - 8 PM
100 Melrose Boulevard
Los Angeles, CA 90211
319.949.1200

<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 
</body>
</html>