CSS - Cascading Style Sheets

Head First HTML looks a good book to read if you want to have a fun introduction to HTML. Actually, I should consider myself too experienced for it, but I enjoy a lot the "Head First" style, so I'm reading it anyway.

Talking about style, the first real argument in the book, after a couple of dozen of pages, is CSS that stands for Cascading Style Sheets and provides a way to specify the style used of presenting our pages.

As usual, an example should help understanding the concept:

<html>
<head>
<title>Starbuzz Coffee</title>
<style type="text/css">
body {
background-color: brown;
margin-left: 25%;
margin-right: 25%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee Beverages</h1>
<h2>House Blend, €1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>
<h2>Mocha Cafe Latte, €2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, €1.89</h2>
<p>A mixture of espresso, steamed milk and foam.</p>
<h2>Chai Tea, €1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>

The only "strange" part in this HTML page is the style tag, in the document head.
In it we are specifying the style for the body. Best way to understand how to work is try the code, making a few changes. All the attributes should be self-explaining; a simple change we can do for the font-family is using sans-serif instead of serif.

I have some spare time, and I'm using it in quite a nerdy way, reading a book on HTML. But at least it is a fun book: Head First HTML.

No comments:

Post a Comment