2012-Head First HTML and CSS (2nd Edition)

Praise for Head First HTML and CSS “Head First HTML and CSS is a thoroughly modern introduction to forward-looking practices in web page markup and pr...

249 downloads 2996 Views 97MB Size

Praise for Head First HTML and CSS “Head First HTML and CSS is a thoroughly modern introduction to forward-looking practices in web page markup and presentation. It correctly anticipates readers’ puzzlements and handles them just in time. The highly graphic and incremental approach precisely mimics the best way to learn this stuff: make a small change and see it in the browser to understand what each new item means.”

— Danny Goodman, author of Dynamic HTML: The Definitive Guide

“Eric Freeman and Elisabeth Robson clearly know their stuff. As the Internet becomes more complex, inspired construction of web pages becomes increasingly critical. Elegant design is at the core of every chapter here, each concept conveyed with equal doses of pragmatism and wit.”

— Ken Goldstein, Executive Vice President and Managing Director, Disney Online

“The Web would be a much better place if every HTML author started off by reading this book.”

— L. David Baron, Technical Lead, Layout and CSS, Mozilla Corporation http://dbaron.org/

“I’ve been writing HTML and CSS for 10 years now, and what used to be a long trial-anderror learning process has now been reduced neatly into an engaging paperback. HTML used to be something you could just hack away at until things looked okay on screen, but with the advent of web standards and the movement toward accessibility, sloppy coding practice is not acceptable anymore…from a business standpoint or a social responsibility standpoint. Head First HTML and CSS teaches you how to do things right from the beginning without making the whole process seem overwhelming. HTML, when properly explained, is no more complicated than plain English, and the authors do an excellent job of keeping every concept at eye level.”

— Mike Davidson, President and CEO, Newsvine, Inc.

“The information covered in this book is the same material the pros know, but taught in an educational and humorous manner that doesn’t ever make you think the material is impossible to learn or you are out of your element.”

— Christopher Schmitt, author of The CSS Cookbook and Professional CSS, [email protected]

“Oh, great. You made an HTML book simple enough a CEO can understand it. What will you do next? Accounting simple enough my developer can understand it? Next thing you know, we’ll be collaborating as a team or something.”

— Janice Fraser, CEO, Adaptive Path

More Praise for Head First HTML and CSS “I *heart* Head First HTML and CSS—it teaches you everything you need to learn in a ‘fun coated’ format!” — Sally Applin, UI designer and fine artist, http://sally.com “This book has humor and charm, but most importantly, it has heart. I know that sounds ridiculous to say about a technical book, but I really sense that at its core, this book (or at least its authors) really care that the reader learns the material. This comes across in the style, the language, and the techniques. Learning—real understanding and comprehension—on the part of the reader is clearly topmost in the minds of the authors. And thank you, thank you, thank you, for the book’s strong and sensible advocacy of standards compliance. It’s great to see an entry-level book, that I think will be widely read and studied, campaign so eloquently and persuasively on behalf of the value of standards compliance in web page code. I even found in here a few great arguments I had not thought of—ones I can remember and use when I am asked (as I still am)—‘what’s the deal with compliance and why should we care?’ I’ll have more ammo now! I also liked that the book sprinkles in some basics about the mechanics of actually getting a web page live—FTP, web server basics, file structures, etc.”

— Robert Neer, Director of Product Development, Movies.com

“Head First HTML and CSS is a most entertaining book for learning how to build a great web page. It not only covers everything you need to know about HTML and CSS, it also excels in explaining everything in layman’s terms with a lot of great examples. I found the book truly enjoyable to read, and I learned something new!”

— Newton Lee, Editor-in-Chief, ACM Computers in Entertainment http://www.acmcie.org

“My wife stole the book. She’s never done any web design, so she needed a book like Head First HTML and CSS to take her from beginning to end. She now has a list of websites she wants to build—for our son’s class, our family…If I’m lucky, I’ll get the book back when she’s done.”

— David Kaminsky, Master Inventor, IBM

“Beware. If you’re someone who reads at night before falling asleep, you’ll have to restrict Head First HTML and CSS to daytime reading. This book wakes up your brain.”

— Pauline McNamara, Center for New Technologies and Education, Fribourg University, Switzerland

Praise for other books by Eric Freeman and Elisabeth Robson “From the awesome Head First Java folks, this book uses every conceivable trick to help you understand and remember. Not just loads of pictures: pictures of humans, which tend to interest other humans. Surprises everywhere. Stories, because humans love narrative. (Stories about things like pizza and chocolate. Need we say more?) Plus, it’s darned funny.”

— Bill Camarda, READ ONLY

“This book’s admirable clarity, humor, and substantial doses of clever make it the sort of book that helps even nonprogrammers think well about problem solving.”

— Cory Doctorow, co-editor of Boing Boing and author of Down and Out in the Magic Kingdom and Someone Comes to Town, Someone Leaves Town

“I feel like a thousand pounds of books have just been lifted off of my head.”

— Ward Cunningham, inventor of the wiki and founder of the Hillside Group

“This book is close to perfect, because of the way it combines expertise and readability. It speaks with authority and it reads beautifully. It’s one of the very few software books I’ve ever read that strikes me as indispensable. (I’d put maybe 10 books in this category, at the outside.)”

— David Gelernter, professor of computer science, Yale University, and author of Mirror Worlds and Machine Beauty

“A nosedive into the realm of patterns, a land where complex things become simple, but where simple things can also become complex. I can think of no better tour guides than these authors.”

— Miko Matsumura, industry analyst, The Middleware Company former Chief Java Evangelist, Sun Microsystems

“I laughed, I cried, it moved me.”

— Daniel Steinberg, Editor-in-Chief, java.net

“Just the right tone for the geeked-out, casual-cool guru coder in all of us. The right reference for practical development strategies—gets my brain going without having to slog through a bunch of tired, stale professor-speak.”

— Travis Kalanick, founder of Scour and Red Swoosh, member of the MIT TR100

“I literally love this book. In fact, I kissed this book in front of my wife.”

— Satish Kumar

Other O’Reilly books by Eric Freeman and Elisabeth Robson Head First Design Patterns Head First HTML with CSS & XHTML (first edition) Head First HTML5 Programming Other related books from O’Reilly HTML5: Up and Running HTML5 Canvas HTML5: The Missing Manual HTML5 Geolocation HTML5 Graphics with SVG and CSS3 HTML5 Forms HTML5 Media Other books in O’Reilly’s Head First series Head First C# Head First Java Head First Object-Oriented Analysis & Design (OOA&D) Head First Servlets and JSP Head First SQL Head First Software Development Head First JavaScript Head First Ajax Head First Rails Head First PHP & MySQL Head First Web Design Head First Networking Head First iPhone and iPad Development Head First jQuery

Download from Wow! eBook

Head First HTML and CSS Wouldn’t it be dreamy if there were an HTML book that didn’t assume you knew what elements, attributes, validation, selectors, and pseudo-classes were, all by page three? It’s probably just a fantasy…

Elisabeth Robson Eric Freeman

Beijing • Cambridge • Farnham • Kln • Sebastopol • Tokyo

Head First HTML and CSS by Elisabeth Robson and Eric Freeman Copyright © 2012 Elisabeth Robson and Eric Freeman. All rights reserved. Printed in Canada. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/ institutional sales department: (800) 998-9938 or [email protected]

Series Creators:

Kathy Sierra, Bert Bates


Brett McLaughlin (first edition), Mike Hendrickson (second edition)

Cover Designer:

Karen Montgomery

HTML Wranglers:

Elisabeth Robson, Eric Freeman

Production Editor:

Kristen Borg


Ron Strauss


Rachel Monaghan

Page Viewer:


Printing History: December 2005: First Edition. September 2012: Second Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. The Head First series designations, Head First HTML and CSS, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and the authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. In other words, if you use anything in Head First HTML and CSS to, say, run a nuclear power plant, you’re on your own. We do, however, encourage you to visit the Head First Lounge. No elements or properties were harmed in the making of this book. Thanks to Clemens Orth for the use of his photo, “applestore.jpg”, which appears in Chapter 5. ISBN: 978-0-596-15990-0 [TI]

Browser wars? You’ll find out in Chapter 6. To the W3C, for saving us from the browser wars and for their brilliance in separating structure (HTML) from presentation (CSS)… And for making HTML and CSS complex enough that people need a book to learn it.

the authors

Authors of Head First HTML and CSS

Elisabeth Ro


Eric Freeman Eric is described by Head First series co-creator Kathy

Sierra as “one of those rare individuals fluent in the language, practice, and culture of multiple domains from hipster hacker, corporate VP, engineer, think tank.”

Professionally, Eric recently ended nearly a decade as a media company executive—having held the position of CTO of Disney Online and Disney.com at the Walt Disney Company. Eric is now devoting his time to WickedlySmart, a startup he co-created with Elisabeth. By training, Eric is a computer scientist, having studied with industry luminary David Gelernter during his Ph.D. work at Yale University. His dissertation is credited as the seminal work in alternatives to the desktop metaphor, and also as the first implementation of activity streams, a concept he and Dr. Gelernter developed. In his spare time, Eric is deeply involved with music; you’ll find Eric’s latest project, a collaboration with ambient music pioneer Steve Roach, available on the iPhone App Store under the name Immersion Station. Eric lives with his wife and young daughter on Bainbridge Island. His daughter is a frequent vistor to Eric’s studio, where she loves to turn the knobs of his synths and audio effects. Write to Eric at [email protected] or visit his site at http://ericfreeman.com. viii

Elisabeth is a software engineer, writer, and trainer.

She has been passionate about technology since her days as a student at Yale University, where she earned a master’s of science in computer science and designed a concurrent, visual programming language and software architecture.

Elisabeth’s been involved with the Internet since the early days; she co-created the award-winning website, the Ada Project, one of the first websites designed to help women in computer science find career and mentorship information online. She’s currently co-founder of WickedlySmart, an online education experience centered on web technologies, where she creates books, articles, videos and more. Previously, as Director of Special Projects at O’Reilly Media, Elisabeth produced in-person workshops and online courses on a variety of technical topics and developed her passion for creating learning experiences to help people understand technology. Prior to her work with O’Reilly, Elisabeth spent time spreading fairy dust at the Walt Disney Company, where she led research and development efforts in digital media. When not in front of her computer, you’ll find Elisabeth hiking, cycling or kayaking in the great outdoors, with her camera nearby, or cooking vegetarian meals. You can send her email at [email protected] or visit her blog at http://elisabethrobson.com.

table of contents

Table of Contents (summary) Intro



The Language of the Web: getting to know html 1


Meet the “HT” in HTML: going further, with hypertext 43


Web Page Construction: building blocks 77


A Trip to Webville: getting connected 123


Meeting the Media: adding images to your pages 163


Serious HTML: standards and all that jazz 219


Adding a Little Style: getting started with CSS 255


Expanding your Vocabulary: styling with fonts and colors 311


Getting Intimate with Elements: the box model 361


Advanced Web Construction: divs and spans 413


Arranging Elements: layout and positioning 471


Modern HTML: html5 markup 545


Getting Tabular: tables and more lists 601


Getting Interactive: html forms 645

Appendix: The Top Ten Topics (We Didn’t Cover): leftovers 697

Table of Contents (the real thing) Intro Your brain on HTML and CSS. Here you are trying to learn something, while here your brain is doing you a favor by making sure the learning doesn’t stick. Your brain’s thinking, “Better leave room for more important things, like which wild animals to avoid and whether naked snowboarding is a bad idea.” So how do you trick your brain into thinking that your life depends on knowing HTML and CSS? Who is this book for ?


Metacognition xxix Here’s what WE did


Bend your brain into submission


Tech reviewers (first edition)


Acknowledgments (first edition)


Tech reviewers (second edition)


Acknowledgments (second edition)



table of contents


getting to know html The Language of the Web The only thing that is standing between you and getting yourself on the Web is learning to speak the lingo: HyperText Markup Language, or HTML for short. So, get ready for some language lessons. After this chapter, not only are you going to understand some basic elements of HTML, but you’ll also be able to speak HTML with a little style. Heck, by the end of this book, you’ll be talking HTML like you grew up in Webville. The web killed the radio star 2 What does the web server do? 3 What you write (the HTML)


What the browser creates 5

No pressure, but thousands of people are going to visit this web page when you’re finished. It not only needs to be correct, it’s gotta look great, too!

Your big break at Starbuzz Coffee


Creating the Starbuzz web page


Creating an HTML file (Mac)


Creating an HTML file (Windows)


Meanwhile, back at Starbuzz Coffee…


Saving your work 18 Opening your web page in a browser


Take your page for a test drive


Are we there yet? 23 Another test drive 24 Tags dissected 25 Meet the style element 29 Giving Starbuzz some style… 30 Cruisin’ with style… 31 Exercise Solutions 38 ile HTML f ‘lounge.ht ml the ’ ed ne


My Playlist

Kick’n Tunes

BT - Satellite: nice downbeat tune.


My Playlist

Kick’n Tunes

BT - Satellite: nice downbeat tune.


My Playlist

Kick’n Tunes

BT - Satellite: nice downbeat tune.


My Playlist

Kick’n Tunes

BT - Satellite: nice downbeat tune.


“Found it, here ya go”

Web Server


table of contents


going further with hypertext Meeting the “HT” in HTML Did someone say “hypertext?” What’s that? Oh, only the entire basis of the Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice markup language (the “ML” in HTML) for describing the structure of web pages. Now we’re going to check out the “HT” in HTML, hypertext, which will let us break free of a single page and link to other pages. Along the way we’re going to meet a powerful new element, the element, and learn how being “relative” is a groovy thing. So, fasten your seat belts—you’re about to learn some hypertext.

Head First Lounge, new and improved 44 Creating the new lounge 46 What did we do? 48 Understanding attributes 51 Getting organized 56 Organizing the lounge… 57 Technical difficulties 58 Planning your paths… 60 Fixing those broken images… 66 Exercise Solutions 73


table of contents


building blocks Web Page Construction I was told I’d actually be creating web pages in this book? You’ve certainly learned a lot already: tags, elements, links, paths…but it’s all for nothing if you don’t create some killer web pages with that knowledge. In this chapter we’re going to ramp up construction: you’re going to take a web page from conception to blueprint, pour the foundation, build it, and even put on some finishing touches. All you need is your hard hat and your toolbelt, as we’ll be adding some new tools and giving you some insider knowledge that would make Tim “The Toolman” Taylor proud. From journal to website, at 12 mph


The rough design sketch 80 h1 p


From the outline to a web page


Test-driving Tony’s web page 84 Adding some new elements 85


Meet the element 86


Looooong quotes 90 p

h2 p





From a sketch to an outline

Adding a blockquote


The real truth behind the and



Meanwhile, back at Tony’s site…


Of course, you could use the

element to make a list…


Constructing HTML lists in two easy steps


Taking a test drive through the cities


Putting one element inside another is called “nesting”


To understand the nesting relationships, draw a picture


Using nesting to make sure your tags match


Exercise Solutions 117

table of contents


getting connected A Trip to Webville Web pages are a dish best served on the Internet. So far you’ve only created HTML pages that live on your own computer. You’ve also only linked to pages that are on your own computer. We’re about to change all that. In this chapter we’ll encourage you to get those web pages on the Internet where all your friends, fans, and customers can actually see them. We’ll also reveal the mysteries of linking to other pages by cracking the code of the h, t, t, p, :, /, /, w, w, w. So, gather your belongings; our next stop is Webville. Getting Starbuzz (or yourself) onto the Web


Finding a hosting company 125 How can you get a domain name?


Moving in 128 Getting your files to the root folder


As much FTP as you can possibly fit in two pages


Back to business… 133 Mainstreet, USA 134 What is HTTP? 135 What’s an absolute path? 136 How default pages work 139 Earl needs a little help with his URLs


How do we link to other websites?


Linking to Caffeine Buzz 143 And now for the test drive…


Web page fit and finish


The title test drive… 148 Linking into a page 149 Using the id attribute to create a destination for


How to link to elements with ids


Linking to a new window


Opening a new window using target


Exercise Solutions 160


table of contents


adding images to your pages Meeting the Media Smile and say “cheese.” Actually, smile and say “gif,” “jpg,” or “png”—these are going to be your choices when “developing pictures” for the Web. In this chapter you’re going to learn all about adding your first media type to your pages: images. Got some digital photos you need to get online? No problem. Got a logo you need to get on your page? Got it covered. But before we get into all that, don’t you still need to be formally introduced to the element? So sorry, we weren’t being rude; we just never saw the “right opening.” To make up for it, here’s an entire chapter devoted to . By the end of the chapter you’re going to know all the ins and outs of how to use the element and its attributes. You’re also going to see exactly how this little element causes the browser to do extra work to retrieve and display your images. How the browser works with images


How images work 167 Here’s a lot of pixels that together make up the upper part of the right wing of the butterfly.

Here’s one pixel.

: it’s not just relative links anymore


Always provide an alternative 173 Sizing up your images 174 Creating the ultimate fan site: myPod


Whoa! The image is way too large


Open the image 182 Resizing the image 183 Fixing up the myPod HTML


More photos for myPod 190 This image is made up of thousands of pixels when it’s displayed on a computer screen.

Turning the thumbnails into links


Create individual pages for the photos


So, how do I make links out of images?


What format should we use?


To be transparent, or not to be transparent? That is the question… 204 Wait, what is the color of the web page background?


Check out the logo with a matte


Add the logo to the myPod web page


Exercise Solutions 213


table of contents


standards and all that jazz Serious HTML What else is there to know about HTML? You’re well on your way to mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to make all this bland markup look fabulous? Before we do, we need to make sure your HTML is really ready for the big leagues. Don’t get us wrong, you’ve been writing first-class HTML all along, but there are just a few extra things you need to do to make it “industry standard” HTML. It’s also time you think about making sure you’re using the latest and greatest HTML standard, otherwise known as HTML5. By doing so, you’ll ensure that your pages play well with the latest i-Device, and that they’ll display more uniformly across all browsers (at least the ones you’d care about). You’ll also have pages that load faster, pages that are guaranteed to play well with CSS, and pages that are ready to move into the future as the standards grow. Get ready, this is the chapter where you move from web tinkerer to web professional. A Brief History of HTML


The new, and improved, HTML5 doctype


HTML, the new “living standard”


Adding the document type definition


The doctype test drive 230 Meet the W3C validator 233 Validating the Head First Lounge


Houston, we have a problem…


Fixing that error 236 We’re almost there… 237 Adding a <meta> tag to specify the character encoding


Making the validator (and more than a few browsers) happy with a <meta> tag… 240 Third time’s the charm? 241 Calling all HTML professionals, grab the handbook…


Exercise Solutions 251


table of contents


getting started with CSS Adding a Little Style I was told there’d be CSS in this book. So far you’ve been concentrating on learning HTML to create the structure of your web pages. But as you can see, the browser’s idea of style leaves a lot to be desired. Sure, we could call the fashion police, but we don’t need to. With CSS, you’re going to completely control the presentation of your pages, often without even changing your HTML. Could it really be so easy? Well, you are going to have to learn a new language; after all, Webville is a bilingual town. After reading this chapter’s guide to learning the language of CSS, you’re going to be able to stand on either side of Main Street and hold a conversation. You’re not in Kansas anymore


Overheard on Webville’s “Trading Spaces”


Using CSS with HTML 259

Five-Minute Mystery

Getting CSS into your HTML


Adding style to the lounge


Let’s put a line under the welcome message too


So, how do selectors really work?


Seeing selectors visually 270 Getting the Lounge style into the elixirs and directions pages


It’s time to talk about your inheritance…


Overriding inheritance 284 Adding an element to the greentea class


Creating a class selector 288 Taking classes further… 290 The world’s smallest and fastest guide to how styles are applied


Exercise Solutions 303 html
















table of contents


styling with fonts and colors Expanding Your Vocabulary Your CSS language lessons are coming along nicely.You already have the basics of CSS down, and you know how to create CSS rules to select and specify the style of an element. Now it’s time to build your vocabulary, and that means picking up some new properties and learning what they can do for you. In this chapter we’re going to work through some of the most common properties that affect the display of text. To do that, you’ll need to learn a few things about fonts and color. You’re going to see you don’t have to be stuck with the fonts everyone else uses, or the clunky sizes and styles the browser uses as the defaults for paragraphs and headings. You’re also going to see there is a lot more to color than meets the eye. Text and fonts from 30,000 feet


What is a font family anyway?


Specifying font families using CSS


Dusting off Tony’s journal 318 How do I deal with everyone having different fonts?


How Web Fonts work


How to add a Web Font to your page…


Adjusting font sizes 328

3 2 1 0




9 7 8

A 10

B 11

So, how should I specify my font sizes?


Let’s make these changes to the font sizes in Tony’s web page


Changing a font’s weight 335

C 12 D 13 E

14 15 F

Adding style to your fonts


Styling Tony’s quotes with a little italic


How do web colors work?


How do I specify web colors? Let me count the ways…


The two-minute guide to hex codes


How to find web colors


Back to Tony’s page…


Everything you ever wanted to know about text-decorations


Removing the underline… 354 Exercise Solutions 357


table of contents


the box model Getting Intimate with Elements To do advanced web construction, you really need to know your building materials. In this chapter we’re going to take a close look at our building materials: the HTML elements. We’re going to put block and inline elements right under the microscope and see what they’re made of. You’ll see how you can control just about every aspect of how an element is constructed with CSS. But we don’t stop there—you’ll also see how you can give elements unique identities. And, if that weren’t enough, you’re going to learn when and why you might want to use multiple stylesheets. So, turn the page and start getting intimate with elements. The lounge gets an upgrade


Starting with a few simple upgrades


Checking out the new line height


Getting ready for some major renovations


A closer look at the box model


What you can do to boxes


Creating the guarantee style


A test drive of the paragraph border


Padding, border, and margins for the guarantee


Adding a background image


Fixing the background image


How do you add padding only on the left?


How do you increase the margin just on the right?


A two-minute guide to borders


Border fit and finish


Using an id in the lounge


Using multiple stylesheets 399 Stylesheets—they’re not just for desktop browsers anymore… 400 Add media queries right into your CSS


Exercise Solutions 407


Download from Wow! eBook

table of contents


divs and spans Advanced Web Construction It’s time to get ready for heavy construction. In this chapter we’re going to roll out two new HTML elements:

and . These are no simple “two by fours”; these are full-blown steel beams. With
and , you’re going to build some serious supporting structures, and once you’ve got those structures in place, you’re going to be able to style them all in new and powerful ways. Now, we couldn’t help but notice that your CSS toolbelt is really starting to fill up, so it’s time to show you a few shortcuts that will make specifying all these properties a lot easier. And we’ve also got some special guests in this chapter, the pseudo-classes, which are going to allow you to create some very interesting selectors. (If you’re thinking that “pseudo-classes” would make a great name for your

ir Weekly Elix Specials

next band, too late; we beat you to it.) A close look at the elixirs HTML


Let’s explore how we can divide a page into logical sections


Adding a border 424


Lemon Bre

, healthy drink The ultimate l mbines herba this elixir co d an s, ral ne botanicals, mi twist of a vitamins with smooth citrus lemon into a l keep your wil t tha er wond tem going all immune sys ht. day and all nig

Adding some real style to the elixirs section


Working on the elixir width


Adding the basic styles to the elixirs


What we need is a way to select descendants


Changing the color of the elixir headings


Fixing the line height 440 Chai Chiller

ditional chai, Not your tra h xes maté wit this elixir mi and adds chai spices k olate kic an extra choc ted taste for a caffeina ice. sensation on

Black Brain


t your Want to boos our Black memory? Try ir, made Brain Brew elix tea and long with black oo of espresso. just a touch l thank you Your brain wil t. for the boos

It’s time to take a little shortcut


Adding s in three easy steps


element and its multiple personalities


How can you style elements based on their state?


Putting those pseudo-classes to work


Isn’t it about time we talk about the “cascade”?


The cascade 459 Welcome to the “What’s my specificity?” game


Putting it all together 461 Exercise Solutions 467

these and all evening for Join us any ul elixirs. our wonderf


table of contents

layout and positioning


Arranging Elements It’s time to teach your HTML elements new tricks. We’re not going to let those HTML elements just sit there anymore—it’s about time they get up and help us create some pages with real layouts. How? Well, you’ve got a good feel for the
and structural elements and you know all about how the box model works, right? So, now it’s time to use all that knowledge to craft some real designs. No, we’re not just talking about more background and font colors—we’re talking about full-blown professional designs using multicolumn layouts. This is the chapter where everything you’ve learned comes together. Did you do the Super Brain Power?


Use the Flow, Luke 473 What about inline elements? 475

h2 h2 p p

Fixing the two-column problem



Setting the margin on the main section


em span


Solving the overlap problem 495


Righty tighty, lefty loosey 498


Liquid and frozen designs 501


How absolute positioning works

text text p


479 488

p id=“amazing”

text text


How to float an element Move the sidebar just below the header




The new Starbuzz 483



How it all works together



Changing the Starbuzz CSS 507 img


How CSS table display works


Adding HTML structure for the table display


What’s the problem with the spacing?


Problems with the header 524 Fixing the header images with float


Positioning the award 528 How does fixed positioning work?


Using a negative left property value


Exercise Solutions 539


table of contents


html5 markup Modern HTML So, we’re sure you’ve heard the hype around HTML5.


given how far along you are in this book, you’re probably wondering if you made the right purchase. Now, one thing to be clear about, up front, is that everything you’ve learned in this book has been HTML, and more specifically has met the HTML5 standard. But there are some new aspects of HTML markup that were added with the HTML5 standard that we haven’t covered yet, and that’s what we’re going to do in this chapter. Most of these additions are evolutionary, and you’re going to find you are quite comfortable with them given all the hard work you’ve already done in this book. There’s some revolutionary stuff too (like video), and we’ll talk about that in this chapter as well. So, let’s dive in and take a look at these new additions! Rethinking HTML structure 546 Update your Starbuzz HTML


How to update your CSS for the new elements


Setting up the CSS for the blog page


We still need to add a date to the blog…


Adding the