You are previewing Head First HTML and CSS, 2nd Edition.

Head First HTML and CSS, 2nd Edition

Cover of Head First HTML and CSS, 2nd Edition by Elisabeth Robson... Published by O'Reilly Media, Inc.
  1. Head First HTML and CSS
  2. Dedication
  3. Praise for Head First HTML and CSS
  4. More Praise for Head First HTML and CSS
  5. Praise for other books by Eric Freeman and Elisabeth Robson
  6. Authors of Head First HTML and CSS
  7. How to Use This Book: Intro
    1. Who is this book for?
      1. Who should probably back away from this book?
    2. We know what you’re thinking
      1. And we know what your brain is thinking
    3. Metacognition: thinking about thinking
    4. Here’s what WE did
    5. Here’s what YOU can do to bend your brain into submission
    6. Read me
    7. Tech reviewers (first edition)
    8. Acknowledgments (first edition)
    9. Tech reviewers (second edition)
    10. Acknowledgments (second edition)
    11. Safari® Books Online
  8. 1. Getting to Know HTML: The Language of the Web
    1. The Web Video killed the radio star
    2. What does the web server do?
    3. What does the web browser do?
    4. What you write (the HTML)
    5. What the browser creates
    6. Your big break at Starbuzz Coffee
    7. Creating the Starbuzz web page
    8. Creating an HTML file (Mac)
    9. Creating an HTML file (Windows)
    10. Meanwhile, back at Starbuzz Coffee...
    11. Saving your work
    12. Opening your web page in a browser
    13. Take your page for a test drive
    14. Are we there yet?
    15. Another test drive
    16. Tags dissected
    17. Meet the style element
    18. Giving Starbuzz some style...
    19. Cruisin’ with style...
  9. 2. Going Further with Hypertext: Meeting the “HT” in HTML
    1. Head First Lounge, new and improved
    2. Creating the new lounge
    3. What did we do?
      1. What does the browser do?
    4. Understanding attributes
    5. Getting organized
    6. Organizing the lounge...
    7. Technical difficulties
    8. Planning your paths...
    9. Fixing those broken images...
      1. Finding the path from “lounge.html” to “drinks.gif”
      2. Finding the path from “elixir.html” to “red.jpg”
  10. 3. Building Blocks: Web Page Construction
    1. From journal to website, at 12 mph
    2. The rough design sketch
    3. From a sketch to an outline
    4. From the outline to a web page
    5. Test driving Tony’s web page
    6. Adding some new elements
    7. Meet the <q> element
      1. And test drive
    8. Looooong quotes
    9. Adding a <blockquote>
    10. The real truth behind the <q> and <blockquote> mystery
    11. Meanwhile, back at Tony’s site...
    12. Of course, you could use the <p> element to make a list...
      1. But there are lots of reasons not to
    13. Constructing HTML lists in two easy steps
    14. Taking a test drive through the cities
    15. Putting one element inside another is called “nesting”
    16. To understand the nesting relationships, draw a picture
    17. Using nesting to make sure your tags match
      1. So what?
  11. 4. Getting Connected: A Trip to Webville
    1. Getting Starbuzz (or yourself) onto the Web
    2. Finding a hosting company
    3. HELLO, my domain name is...
    4. How can you get a domain name?
    5. Moving in
    6. Getting your files to the root folder
    7. As much FTP as you can possibly fit in two pages
    8. Back to business...
    9. Mainstreet, URL
    10. What is HTTP?
    11. What’s an absolute path?
    12. How default pages work
    13. How do we link to other websites?
    14. Linking to Caffeine Buzz
    15. And now for the test drive...
    16. Web page fit and finish
      1. Improving accessibility by adding a title to your links
    17. The title test drive...
    18. Linking into a page
    19. Using the id attribute to create a destination for <a>
    20. How to link to elements with ids
      1. Finding the destination heading
      2. Now that you’ve got your hands on their HTML...
      3. Reworking the link in “index.html”
    21. Linking to a new window
    22. Opening a new window using target
  12. 5. Adding Images to your Pages: Meeting the Media
    1. How the browser works with images
    2. How images work
      1. So, what are the differences among JPEG, PNG, and GIF?
    3. <img>: it’s not just relative links anymore
    4. Always provide an alternative
    5. Sizing up your images
    6. Creating the ultimate fan site: myPod
    7. Check out myPod’s “index.html” file
    8. Whoa! The image is way too large
    9. Resize the image to fit in the browser
      1. Here’s what you’re going to do:
    10. Open the image
    11. Resizing the image
    12. You’ve resized—now save
    13. Save the image
    14. Fixing up the myPod HTML
    15. And now for the test drive...
    16. More photos for myPod
    17. Taking myPod for another test drive
    18. Reworking the site to use thumbnails
      1. Create a new directory for thumbnails
    19. Create the thumbnails
    20. Rework the HTML to use the thumbnails
    21. Take myPod for another test drive
    22. Turning the thumbnails into links
    23. Create individual pages for the photos
    24. So, how do I make links out of images?
    25. Add the image links to “index.html”
    26. Open the myPod logo
      1. A closer look...
    27. What format should we use?
    28. To be transparent, or not to be transparent? That is the question...
    29. Save the transparent PNG
    30. Wait, what is the color of the web page background?
    31. Set the matte color
    32. Check out the logo with a matte
    33. Save the logo
    34. Add the logo to the myPod web page
    35. And now for the final test drive
  13. 6. Standards and All that Jazz: Getting Serious with HTML
    1. A Brief History of HTML
    2. The new, and improved, HTML5 doctype
    3. HTML, the new “living standard”
    4. Adding the document type definition
    5. The doctype test drive
    6. Meet the W3C validator
    7. Validating the Head First Lounge
    8. Houston, we have a problem...
    9. Fixing that error
    10. We’re almost there...
    11. Adding a meta tag to specify the character encoding
    12. Making the validator (and more than a few browsers) happy with a <meta> tag...
    13. Third time’s the charm?
    14. Calling all HTML professionals, grab the handbook...
  14. 7. Getting Started with CSS: Adding a Little Style
    1. You’re not in Kansas anymore
    2. Overheard on Webville’s “Trading Spaces”
    3. Using CSS with HTML
    4. Wanna add more style?
    5. Getting CSS into your HTML
    6. Adding style to the lounge
    7. Cruising with style: the test drive
    8. Style the heading
      1. Test drive...
    9. Let’s put a line under the welcome message too
    10. We have the technology: specifying a second rule, just for the h1
      1. Another test drive...
    11. So, how do selectors really work?
    12. Seeing selectors visually
    13. Getting the lounge style into the elixirs and directions pages
    14. Creating the “lounge.css” file
    15. Linking from “lounge.html” to the external stylesheet
    16. Linking from “elixir.html” and “directions.html” to the external stylesheet
    17. Test driving the entire lounge...
    18. It’s time to talk about your inheritance...
      1. The elements inside the <p> element inherit the font-family style from <p>
    19. What if we move the font up the family tree?
      1. What are you waiting for...give it a try
    20. Test drive your new CSS
    21. Overriding inheritance
    22. Test drive
    23. Adding an element to the greentea class
    24. Creating a class selector
    25. A greentea test drive
    26. Taking classes further...
    27. The world’s smallest and fastest guide to how styles are applied
      1. First, do any selectors select your element?
      2. What about inheritance?
      3. Struck out again? Then use the default
      4. What if multiple selectors select an element?
      5. And if we still don’t have a clear winner?
    28. Making sure the lounge CSS validates
  15. 8. Styling with Fonts and Colors: Expanding Your Vocabulary
    1. Text and fonts from 30,000 feet
    2. What is a font family anyway?
    3. Specifying font families using CSS
    4. How font-family specifications work
    5. Dusting off Tony’s journal
    6. Getting Tony a new font-family
    7. Test driving Tony’s new fonts
    8. How do I deal with everyone having different fonts?
    9. How Web Fonts work
    10. How to add a Web Font to your page...
      1. Step one: Find a font
      2. Step two: Make sure you have all the formats of the font you need
      3. Step three: Place your font files on the Web
      4. Step 4: Add the @font-face property to your CSS
      5. Step five: Use the font-family name in your CSS
      6. Step six: Load the page!
    11. Test drive the Web Font in Tony’s journal
    12. Adjusting font sizes
    13. So, how should I specify my font sizes?
    14. Let’s make these changes to the font sizes in Tony’s web page
    15. Test driving the font sizes
    16. Changing a font’s weight
    17. Test drive the normal-weight headings
    18. Adding style to your fonts
    19. Styling Tony’s quotes with a little italic
    20. How do web colors work?
    21. How do I specify web colors? Let me count the ways...
      1. Specify color by name
      2. Specify color in red, green, and blue values
      3. Specify color using hex codes
    22. The two-minute guide to hex codes
    23. How to find web colors
      1. Using an online color chart
    24. Back to Tony’s page...we’re going to make the headings orange, and add an underline too
    25. Test drive Tony’s orange headings
    26. Everything you ever wanted to know about text decorations in less than one page
    27. Removing the underline...
  16. 9. The Box Model: Getting Intimate with Elements
    1. The lounge gets an upgrade
    2. The new and improved, ultra-stylish lounge
    3. Setting up the new lounge
    4. Starting with a few simple upgrades
    5. A very quick test drive
    6. One more adjustment
    7. Checking out the new line height
    8. Getting ready for some major renovations
    9. A closer look at the box model
    10. What you can do to boxes
    11. Meanwhile, back at the lounge...
    12. Creating the guarantee style
    13. A test drive of the paragraph border
    14. Padding, border, and margins for the guarantee
    15. Adding some padding
    16. A test drive with some padding
    17. Now let’s add some margin
    18. A test drive with the margin
    19. Adding a background image
    20. Test driving the background image
    21. Fixing the background image
    22. Another test drive of the background image
    23. How do you add padding only on the left?
    24. Are we there yet?
    25. How do you increase the margin just on the right?
    26. A two-minute guide to borders
    27. Border fit and finish
    28. Congratulations!
      1. Welcome back, and good timing. We’re just about to listen in on an interview with a class...
    29. The id attribute
    30. But how do I use id in CSS?
    31. Using an id in the lounge
      1. Step one: Change the class attribute to an id in your “lounge.html” file
      2. Step two: Change the “.guarantee” class selector in “lounge.css” to an id selector
      3. Step three: Save your changes and reload the page
    32. Remixing stylesheets
    33. Using multiple stylesheets
    34. Stylesheets—they’re not just for desktop browsers anymore...
    35. Add media queries right into your CSS
  17. 10. Divs and Spans: Advanced Web Construction
    1. A close look at the elixirs HTML
    2. Let’s explore how we can divide a page into logical sections
      1. Identifying your logical sections
      2. Using <div>s to mark sections
      3. Labeling the <div>s
      4. Adding some style
      5. Exposing even more structure
      6. Adding structure on structure
    3. Meanwhile, back at the lounge...
    4. Taking the <div> for a test drive
    5. Adding a border
    6. An over-the-border test drive
    7. Adding some real style to the elixirs section
    8. The game plan
    9. Working on the elixir width
    10. Test driving the width
    11. Adding the basic styles to the elixirs
    12. Test driving the new styles
    13. We’re almost there...
    14. What are we trying to do?
      1. What we have now
      2. What we want
    15. What we need is a way to select descendants
    16. Changing the color of the elixir headings
    17. A quick test drive...
    18. Fixing the line height
    19. Look what you’ve accomplished...
    20. It’s time to take a little shortcut
    21. But there’s more...
      1. ...and don’t forget the shorthand for backgrounds
    22. And even more shorthands
    23. Adding <span>s in three easy steps
    24. Steps one and two: Adding the <span>s
    25. Step three: Styling the <span>s
    26. Test driving the spans
    27. The <a> element and its multiple personalities
    28. How can you style elements based on their state?
    29. Putting those pseudo-classes to work
    30. Test drive the links
    31. Isn’t it about time we talk about the “cascade”?
    32. The cascade
    33. Welcome to the “What’s my specificity?” game
    34. Putting it all together
  18. 11. Layout and Positioning: Arranging Elements
    1. Did you do the Super Brain Power?
    2. Use the Flow, Luke
    3. What about inline elements?
    4. How it all works together
    5. One more thing you should know about flow and boxes
      1. When the browser is placing two inline elements next to each other...
      2. When the browser is placing two block elements on top of each other...
    6. How to float an element
      1. First, give it an identity
      2. Now give it a width
      3. Now float it
    7. Behind the scenes at the lounge
    8. The new Starbuzz
    9. A look at the markup
    10. And a look at the style
    11. Let’s take Starbuzz to the next level
    12. Move the sidebar just below the header
    13. Set the width of the sidebar and float it
    14. Test driving Starbuzz
    15. Fixing the two-column problem
    16. Setting the margin on the main section
    17. Test drive
    18. Uh oh, we have another problem
    19. Solving the overlap problem
    20. Test drive
    21. Righty tighty, lefty loosey
      1. Step one: Start with the sidebar
      2. Step two: Take care of the main content
      3. Step three: Take care of the footer
    22. A quick test drive
    23. Liquid and frozen designs
      1. HTML changes
      2. CSS changes
    24. A frozen test drive
    25. What’s the state between liquid and frozen? Jello, of course!
    26. Test driving with a tank of jello
    27. How absolute positioning works
      1. What the CSS does
    28. Another example of absolute positioning
      1. Who’s on top?
    29. Using absolute positioning
    30. Changing the Starbuzz CSS
    31. Now we just need to rework the main <div>
    32. Time for the absolute test drive
    33. How CSS table display works
    34. How to create the CSS and HTML for a table display
    35. Adding HTML structure for the table display
    36. How to use CSS to create table displays
    37. Meanwhile, back at Starbuzz...
    38. A quick test drive...
    39. What’s the problem with the spacing?
    40. Fix the spacing
    41. A final test drive of our table display
    42. Strategies for your CSS layout toolbox
      1. The Floating Layout
      2. The Jello Layout
      3. The Absolute Layout
      4. The Table Display Layout
    43. Problems with the header
    44. Fixing the header images with float
    45. Test drive your float
      1. How float works in the header
    46. Adding the award
    47. Positioning the award
    48. How does fixed positioning work?
    49. Putting the coupon on the page
    50. Putting the coupon on the page
    51. Using a negative left property value
    52. A rather positive, negative test drive
  19. 12. HTML5 Markup: Modern HTML
    1. Rethinking HTML structure
    2. Modern Starbuzz
    3. Update your Starbuzz HTML
    4. Test driving the new ride
    5. Before you continue...
    6. How to update your CSS for the new elements
    7. Test drive #2
    8. Building the Starbuzz blog page
    9. Setting up the CSS for the blog page
    10. Test drive the blog page
    11. We still need to add a date to the blog...
    12. Adding the <time> element to your blog
      1. Test drive the blog
    13. How to add more <header> elements
    14. Testing the header
    15. So, what’s wrong with the header anyway?
    16. A final test drive for the headers
    17. Completing the navigation
    18. Adding the navigation CSS
    19. Who needs GPS? Giving the navigation a test drive
    20. Adding a <nav> element...
    21. Making our CSS more specific...
    22. Ta-da! Look at that navigation!
    23. Creating the new blog entry
    24. And now, introducing the <video> element
    25. Lights, camera, action...
    26. How does the <video> element work?
    27. Closely inspecting the video attributes...
    28. What you need to know about video formats
    29. The video format contenders
    30. How to juggle all those formats...
    31. Take 2: lights, camera, action...
    32. How to be even more specific with your video formats
    33. Update and test drive
  20. 13. Tables and More Lists: Getting Tabular
    1. How do you make tables with HTML?
    2. Creating a table with HTML
    3. What the browser creates
    4. Tables dissected
    5. Adding a caption
    6. Test drive...and start thinking about style
    7. Before we start styling, let’s get the table into Tony’s page
    8. Now let’s style the table
    9. Taking the styled tables for a test drive
    10. Getting those borders to collapse
    11. How about some color?
    12. How about some color in the table rows?
    13. Did we mention that Tony made an interesting discovery in Truth or Consequences, New Mexico?
    14. Another look at Tony’s table
    15. How to tell cells to span more than one row
    16. Test drive the table
    17. Trouble in paradise?
    18. Test driving the nested table
    19. Overriding the CSS for the nested table headings
    20. Giving Tony’s site the final polish
    21. Giving the list some style
    22. What if you want a custom marker?
      1. And, the final test drive...
  21. 14. HTML Forms: Getting Interactive
    1. How forms work
    2. How forms work in the browser
    3. What you write in HTML
    4. What the browser creates
    5. How the <form> element works
    6. What can go in a form?
    7. What can go in a form? (part 2)
    8. Oh, even more can go in a form!
    9. Getting ready to build the Bean Machine form
    10. Figuring out what goes in the form element
    11. Adding the <form> element
    12. How form element names work
    13. Back to getting those input elements into your HTML
    14. A form-al test drive
    15. Adding some more input elements to your form
    16. Adding the select element
    17. Test driving the <select> element
    18. Give the customer a choice of whole or ground beans
    19. Punching the radio buttons
    20. Using more input types
    21. Adding the number and date input types
    22. Test driving the number and date input elements
    23. Completing the form
    24. Adding the checkboxes and text area
    25. The final form test drive
    26. Watching GET in action
    27. Getting the form elements into HTML structure for table display layout
    28. Styling the form with CSS
    29. Test drive the styled form
    30. A word about accessibility
    31. What more could possibly go into a form?
    32. More things that can go in a form
    33. Congratulations! You made it to the end
  22. A. Leftovers: The Top Ten Topics (We Didn’t Cover)
    1. #1 More CSS selectors
      1. Pseudo-elements
      2. Attribute selectors
      3. Selecting by siblings
      4. Combining selectors
    2. #2 Vendor-specific CSS properties
    3. #3 CSS transforms and transitions
    4. #4 Interactivity
      1. What else can scripting do?
    5. #5 HTML5 APIs and web apps
    6. #6 More on Web Fonts
    7. #7 Tools for creating web pages
      1. Some tools to consider
    8. #8 XHTML5
    9. #9 Server-side scripting
    10. #10 Audio
  23. B. This isn’t goodbye
  24. Index
  25. About the Authors
  26. Colophon
  27. Copyright
O'Reilly logo

How to Use This Book: Intro

image with no caption

In this section, we answer the burning question: “So, why DID they put that in an HTML book?”

Who is this book for?

If you can answer “yes” to all of these:

  1. Do you have access to a computer with a web browser and a text editor?

    Note

    If you have access to any computer manufactured in the last decade, the answer is yes.

  2. Do you want to learn, understand, and remember how to create web pages using the best techniques and the most recent standards?

  3. Do you prefer stimulating dinner-party conversation to dry, dull, academic lectures?

this book is for you.

Who should probably back away from this book?

If you can answer “yes” to any one of these:

  1. Are you completely new to computers?

    (You don’t need to be advanced, but you should understand folders and files, simple text editing applications, and how to use a web browser.)

  2. Are you a kick-butt web developer looking for a reference book?

  3. Are you afraid to try something different? Would you rather have a root canal than mix stripes with plaid? Do you believe that a technical book can’t be serious if HTML tags are anthropomorphized?

this book is not for you.

image with no caption

[Note from marketing: this book is for anyone with a credit card.]

We know what you’re thinking

“How can this be a serious book?”

“What’s with all the graphics?”

“Can I actually learn it this way?”

And we know what your brain is thinking

Your brain craves novelty. It’s always searching, scanning, waiting for something unusual. It was built that way, and it helps you stay alive.

Today, you’re less likely to be a tiger snack. But your brain’s still looking. You just never know.

So what does your brain do with all the routine, ordinary, normal things you encounter? Everything it can to stop them from interfering with the brain’s real job—recording things that matter. It doesn’t bother saving the boring things; they never make it past the “this is obviously not important” filter.

image with no caption

How does your brain know what’s important? Suppose you’re out for a day hike and a tiger jumps in front of you—what happens inside your head and body?

Neurons fire. Emotions crank up. Chemicals surge.

And that’s how your brain knows...

This must be important! Don’t forget it!

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. You’re studying. Getting ready for an exam. Or trying to learn some tough technical topic your boss thinks will take a week, 10 days at the most.

Just one problem. Your brain’s trying to do you a big favor. It’s trying to make sure that this obviously non-important content doesn’t clutter up scarce resources. Resources that are better spent storing the really big things. Like tigers. Like the danger of fire. Like how you should never again snowboard in shorts.

And there’s no simple way to tell your brain, “Hey brain, thank you very much, but no matter how dull this book is, and how little I’m registering on the emotional Richter scale right now, I really do want you to keep this stuff around.”

image with no caption

Metacognition: thinking about thinking

If you really want to learn, and you want to learn more quickly and more deeply, pay attention to how you pay attention. Think about how you think. Learn how you learn.

Most of us did not take courses on metacognition or learning theory when we were growing up. We were expected to learn, but rarely taught how to learn.

But we assume that if you’re holding this book, you really want to learn how to create web pages. And you probably don’t want to spend a lot of time. And you want to remember what you read, and be able to apply it. And for that, you’ve got to understand it. To get the most from this book, or any book or learning experience, take responsibility for your brain. Your brain on this content.

The trick is to get your brain to see the new material you’re learning as Really Important. Crucial to your well-being. As important as a tiger. Otherwise, you’re in for a constant battle, with your brain doing its best to keep the new content from sticking.

image with no caption

So how DO you get your brain to think HTML & CSS are as important as a tiger?

There’s the slow, tedious way, or the faster, more effective way. The slow way is about sheer repetition. You obviously know that you are able to learn and remember even the dullest of topics, if you keep pounding on the same thing. With enough repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at the same thing over and over and over, so I suppose it must be.”

The faster way is to do anything that increases brain activity, especially different types of brain activity. The things on the previous page are a big part of the solution, and they’re all things that have been proven to help your brain work in your favor. For example, studies show that putting words within the pictures they describe (as opposed to somewhere else in the page, like a caption or in the body text) causes your brain to try to make sense of how the words and picture relate, and this causes more neurons to fire. More neurons firing = more chances for your brain to get that this is something worth paying attention to, and possibly recording.

A conversational style helps because people tend to pay more attention when they perceive that they’re in a conversation, since they’re expected to follow along and hold up their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” is between you and a book! On the other hand, if the writing style is formal and dry, your brain perceives it the same way you experience being lectured to while sitting in a roomful of passive attendees. No need to stay awake.

But pictures and conversational style are just the beginning.

Here’s what WE did

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s concerned, a picture really is worth 1,024 words. And when text and pictures work together, we embedded the text in the pictures because your brain works more effectively when the text is within the thing the text refers to, as opposed to in a caption or buried in the text somewhere.

image with no caption

We used redundancy, saying the same thing in different ways and with different media types, and multiple senses, to increase the chance that the content gets coded into more than one area of your brain.

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, and we used pictures and ideas with at least some emotional content, because your brain is tuned to pay attention to the biochemistry of emotions. That which causes you to feel something is more likely to be remembered, even if that feeling is nothing more than a little humor, surprise, or interest.

We used a personalized, conversational style, because your brain is tuned to pay more attention when it believes you’re in a conversation than if it thinks you’re passively listening to a presentation. Your brain does this even when you’re reading.

image with no caption

We included more than 100 activities, because your brain is tuned to learn and remember more when you do things than when you read about things. And we made the exercises challenging-yet-doable, because that’s what most people prefer.

We used multiple learning styles, because you might prefer step-by-step procedures, while someone else wants to understand the big picture first, while someone else just wants to see a code example. But regardless of your own learning preference, everyone benefits from seeing the same content represented in multiple ways.

image with no caption

We include content for both sides of your brain, because the more of your brain you engage, the more likely you are to learn and remember, and the longer you can stay focused. Since working one side of the brain often means giving the other side a chance to rest, you can be more productive at learning for a longer period of time.

image with no caption

And we included stories and exercises that present more than one point of view, because your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments.

We included challenges, with exercises, and by asking questions that don’t always have a straight answer, because your brain is tuned to learn and remember when it has to work at something. Think about it—you can’t get your body in shape just by watching people at the gym. But we did our best to make sure that when you’re working hard, it’s on the right things. That you’re not spending one extra dendrite processing a hard-to-understand example, or parsing difficult, jargon-laden, or overly terse text.

We used people. In stories, examples, pictures, etc., because, well, because you’re a person. And your brain pays more attention to people than it does to things.

We used an 80/20 approach. We assume that if you’re going to be a kick-butt web developer, this won’t be your only book. So we don’t talk about everything. Just the stuff you’ll actually need.

image with no caption

Here’s what YOU can do to bend your brain into submission

So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn’t. Try new things.

image with no caption

Cut this out and stick it on your refrigerator.

  1. Slow down. The more you understand, the less you have to memorize.

    Don’t just read. Stop and think. When the book asks you a question, don’t just skip to the answer. Imagine that someone really is asking the question. The more deeply you force your brain to think, the better chance you have of learning and remembering.

  2. Do the exercises. Write your own notes.

    We put them in, but if we did them for you, that would be like having someone else do your workouts for you. And don’t just look at the exercises. Use a pencil. There’s plenty of evidence that physical activity while learning can increase the learning.

  3. Read the “There Are No Dumb Questions.”

    That means all of them. They’re not optional sidebars—they’re part of the core content! Don’t skip them.

  4. Make this the last thing you read before bed. Or at least the last challenging thing.

    Part of the learning (especially the transfer to long-term memory) happens after you put the book down. Your brain needs time on its own, to do more processing. If you put in something new during that processing time, some of what you just learned will be lost.

  5. Drink water. Lots of it.

    Your brain works best in a nice bath of fluid. Dehydration (which can happen before you ever feel thirsty) decreases cognitive function.

  6. Talk about it. Out loud.

    Speaking activates a different part of the brain. If you’re trying to understand something, or increase your chance of remembering it later, say it out loud. Better still, try to explain it out loud to someone else. You’ll learn more quickly, and you might uncover ideas you hadn’t known were there when you were reading about it.

  7. Listen to your brain.

    Pay attention to whether your brain is getting overloaded. If you find yourself starting to skim the surface or forget what you just read, it’s time for a break. Once you go past a certain point, you won’t learn faster by trying to shove more in, and you might even hurt the process.

  8. Feel something!

    Your brain needs to know that this matters. Get involved with the stories. Make up your own captions for the photos. Groaning over a bad joke is still better than feeling nothing at all.

  9. Create something!

    Apply this to something new you’re designing, or rework an older project. Just do something to get some experience beyond the exercises and activities in this book. All you need is a pencil and a problem to solve...a problem that might benefit from using HTML and CSS.

Read me

This is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we’re working on at that point in the book. And the first time through, you need to begin at the beginning, because the book makes assumptions about what you’ve already seen and learned.

We begin by teaching basic HTML, then standards-based HTML5.

To write standards-based HTML, there are a lot of technical details you need to understand that aren’t helpful when you’re trying to learn the basics of HTML. Our approach is to have you learn the basic concepts of HTML first (without worrying about these details), and then, when you have a solid understanding of HTML, teach you to write standards-compliant HTML (the most recent version of which is HTML5). This has the added benefit that the technical details are more meaningful after you’ve already learned the basics.

It’s also important that you be writing compliant HTML when you start using CSS, so we make a point of getting you to standards-based HTML before you begin any serious work with CSS.

We don’t cover every single HTML element or attribute or CSS property ever created.

There are a lot of HTML elements, a lot of attributes, and a lot of CSS properties. Sure, they’re all interesting, but our goal was to write a book that weighs less than the person reading it, so we don’t cover them all here. Our focus is on the core HTML elements and CSS properties that matter to you, the beginner, and making sure that you really, truly, deeply understand how and when to use them. In any case, once you’re done with Head First HTML and CSS, you’ll be able to pick up any reference book and get up to speed quickly on all the elements and properties we left out.

This book advocates a clean separation between the structure of your pages and the presentation of your pages.

Today, serious web pages use HTML to structure their content, and CSS for style and presentation. Nineties-era pages often used a different model, one where HTML was used for both structure and style. This book teaches you to use HTML for structure and CSS for style; we see no reason to teach you outdated bad habits.

We encourage you to use more than one browser with this book.

While we teach you to write HTML and CSS that are based on standards, you’ll still (and probably always) encounter minor differences in the way web browsers display pages. So, we encourage you to pick at least two modern browsers and test your pages using them. This will give you experience in seeing the differences among browsers and in creating pages that work well in a variety of them.

We often use tag names for element names.

Rather than saying “the a element,” or “the ‘a’ element,” we use a tag name, like “the <a> element.” While this may not be technically correct (because <a> is an opening tag, not a full-blown element), it does make the text more readable, and we usually follow the name with the word “element” to avoid confusion.

The activities are NOT optional.

The exercises and activities are not add-ons; they’re part of the core content of the book. Some of them are to help with memory, some are for understanding, and some will help you apply what you’ve learned. Don’t skip the exercises. The crossword puzzles are the only things you don’t have to do, but they’re good for giving your brain a chance to think about the words in a different context.

The redundancy is intentional and important.

One distinct difference in a Head First book is that we want you to really get it. And we want you to finish the book remembering what you’ve learned. Most reference books don’t have retention and recall as a goal, but this book is about learning, so you’ll see some of the same concepts come up more than once.

The examples are as lean as possible.

Our readers tell us that it’s frustrating to wade through 200 lines of an example looking for the two lines they need to understand. Most examples in this book are shown within the smallest possible context, so that the part you’re trying to learn is clear and simple. Don’t expect all of the examples to be robust, or even complete—they are written specifically for learning, and aren’t always fully functional.

We’ve placed all the example files on the Web so you can download them. You’ll find them at http://wickedlysmart.com/hfhtmlcss/.

The Brain Power exercises don’t have answers.

For some of them, there is no right answer, and for others, part of the learning experience of the Brain Power activities is for you to decide if and when your answers are right. In some of the Brain Power exercises, you will find hints to point you in the right direction.

Tech reviewers (first edition)

image with no caption

Louise Barr

image with no caption

Joe Konior

image with no caption

Valentin Crettaz

image with no caption

Corey McGlone

image with no caption

Barney Marispini

image with no caption
image with no caption
image with no caption

Marcus Green

image with no caption

Ike Van Atta

image with no caption

David O’Meara

Our reviewers:

We’re extremely grateful for our technical review team. Johannes de Jong organized and led the whole effort, acted as “series dad,” and made it all work smoothly. Pauline McNamara, “co-manager” of the effort, held things together and was the first to point out when our examples were a little more “baby boomer” than hip. The whole team proved how much we needed their technical expertise and attention to detail. Valentin Crettaz, Barney Marispini, Marcus Green, Ike Van Atta, David O’Meara, Joe Konior, and Corey McGlone left no stone unturned in their review and the book is much better for it. You guys rock! And further thanks to Corey and Pauline for never letting us slide on our often too formal (or we should just say it, incorrect) punctuation. A shout-out to JavaRanch as well for hosting the whole thing.

A big thanks to Louise Barr, our token web designer, who kept us honest on our designs and on our use of HTML and CSS (although you’ll have to blame us for the actual designs).

Acknowledgments (first edition)[1]

Even more technical review:

We’re also extremely grateful to our esteemed technical reviewer David Powers. We have a real love/hate relationship with David because he made us work so hard, but the result was oh so worth it. The truth be told, based on David’s comments, we made significant changes to this book and it is technically twice the book it was before. Thank you, David.

image with no caption

Don’t let the sweater fool you—this guy is hardcore (technically of course).

At O’Reilly:

Our biggest thanks to our editor, Brett McLaughlin, who cleared the path for this book, removed every obstacle to its completion, and sacrificed family time to get it done. Brett also did hard editing time on this book (not an easy task for a Head First title). Thanks, Brett; this book wouldn’t have happened without you.

Our sincerest thanks to the whole O’Reilly team: Greg Corrin, Glenn Bisignani, Tony Artuso, and Kyle Hart all led the way on marketing and we appreciate their out-of-the-box approach. Thanks to Ellie Volkhausen for her inspired cover design that continues to serve us well, and to Karen Montgomery for stepping in and bringing life to this book’s cover. Thank you, as always, to Colleen Gorman for her hardcore copyedit (and for keeping it all fun). And we couldn’t have pulled off a color book like this without Sue Willing and Claire Cloutier.

image with no caption

Brett McLaughlin

No Head First acknowledgment would be complete without thanking Mike Loukides for shaping the Head First concept into a series, and to Tim O’Reilly for always being there and his continued support. Finally, thanks to Mike Hendrickson for bringing us into the Head First family and having the faith to let us run with it.

Kathy Sierra and Bert Bates:

Last, and anything but least, to Kathy Sierra and Bert Bates, our partners in crime and the BRAINS who created the series. Thanks, guys, for trusting us even more with your baby. We hope once again we’ve done it justice. The three-day jam session was the highlight of writing the book, we hope to repeat it soon. Oh, and next time around, can you give LTJ a call and tell him he’s just going to have to make a trip back to Seattle?

image with no caption

Tech reviewers (second edition)

We couldn’t sleep at night without knowing that our highpowered HTML & CSS reviewer, David Powers, has scoured this book for inaccuracies. Truth is, so many years had passed since the first edition that we had to hire a private detective to locate him (it’s a long story, but he was finally located in his underground HTML & CSS lair and research lab). Anyway, more seriously, while all the technical faults in this book sit solely with the authors (that’s us), we can assure you in every case David tried to make sure we did things right. Once again, David was instrumental in the writing of this book.

We’re extremely grateful for everyone on our technical review team. Joe Konior joined us once again for this edition, along with Dawn Griffiths (co-author of Head First C), and Shelley Powers (an HTML & CSS “power”house who has been writing about the Web for years). Once again, you all rock! Your feedback was amazingly thorough, detailed, and helpful. Thank you.

image with no caption
image with no caption
image with no caption

Acknowledgments (second edition)

Our biggest thanks to our chief editor, Mike Hendrickson, who made this book happen in every way (other than actually writing it), was there for us the entire journey, and more importantly (the biggest thing any editor can do) totally trusted us to get it done! Thanks, Mike; none of our books would have happened without you. You’ve been our champion for well over a decade and we love you for it!

Of course it takes a village to publish a book, and behind the scenes a talented and friendly group at O’Reilly made it all happen. Our sincerest thanks to the whole O’Reilly team: Kristen Borg (production editor extraordinaire); the brilliant Rachel Monaghan (proofreader); Ron Strauss for his meticulous index; Rebecca Demarest for illustration help; Karen Montgomery, ace cover designer; and last but definitely not least, Louise Barr, who always helps our pages look better.

image with no caption
image with no caption

Safari® Books Online

image with no caption

Safari® Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.



[1] The large number of acknowledgments is because we’re testing the theory that everyone mentioned in a book acknowledgment will buy at least one copy, probably more, what with relatives and everything. If you’d like to be in the acknowledgment of our next book, and you have a large family, write to us.

The best content for your career. Discover unlimited learning on demand for around $1/day.