CSSRule: The Café Tutorial III

Thursday, April 23, 2009

The Café Tutorial III

If you are working on this tutorial along with me, make sure you save your .html file as "text document" and not "rich text document". I am using "Wordpad" to edit my changes. RT will insert formatting codes into your text which will display messy in the browser. When you choose plain text as your save type, Wordpad will issue a warning, asking you if you are Ok with removing formatting from your file, answer yes to that question. Do also make sure you type ".html" as your file extension so that you can view your updates in a browser.

For mark-up, I used the paragraph tag and different heading tags with name of restaurant getting the largest (h1) and headings getting smaller as we down the hierarchy (h2's and h3's). I wasn't sure what to do about price lines but looks like I'm gonna have to enclose those within p tags as well. We can always add a class for the price later. I am using one blockquote element which makes sense for the customer review posted on the site. You can of course make that a regular p element and style it accordingly but from a semantic point of view, blockquote element fits the bill. Remember mark-up is for building structure and adding meaning to your document.

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

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

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

<h2>Treats</h2>

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

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

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

<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>
Each $2.00
Chewy New York style water bagels that are perfect with
our chive onion veggie cheese spread

<h3>Pretzel Rolls</h3>
Each $2.00
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 charcuterie.

<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

www.4squarecafe.com 
</body>
</html>