book

Head First HTML and CSS, 2nd Edition

by Elisabeth Robson, Eric Freeman

August 2012

Beginner

768 pages

18h 20m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who is this book for?Who should probably back away from this book?We know what you’re thinkingAnd we know what your brain is thinkingMetacognition: thinking about thinkingHere’s what WE didHere’s what YOU can do to bend your brain into submissionRead meTech reviewers (first edition)Acknowledgments (first edition)Tech reviewers (second edition)Acknowledgments (second edition)Safari® Books Online
The Web Video killed the radio starWhat does the web server do?What does the web browser do?What you write (the HTML)What the browser createsYour big break at Starbuzz CoffeeCreating the Starbuzz web pageCreating an HTML file (Mac)Creating an HTML file (Windows)Meanwhile, back at Starbuzz Coffee...Saving your workOpening your web page in a browserTake your page for a test driveAre we there yet?Another test driveTags dissectedMeet the style elementGiving Starbuzz some style...Cruisin’ with style...
Head First Lounge, new and improvedCreating the new loungeWhat did we do?What does the browser do?Understanding attributesGetting organizedOrganizing the lounge...Technical difficultiesPlanning your paths...Fixing those broken images...Finding the path from “lounge.html” to “drinks.gif”Finding the path from “elixir.html” to “red.jpg”
From journal to website, at 12 mphThe rough design sketchFrom a sketch to an outlineFrom the outline to a web pageTest driving Tony’s web pageAdding some new elementsMeet the <q> elementAnd test driveLooooong quotesAdding a <blockquote>The real truth behind the <q> and <blockquote> mysteryMeanwhile, back at Tony’s site...Of course, you could use the <p> element to make a list...But there are lots of reasons not toConstructing HTML lists in two easy stepsTaking a test drive through the citiesPutting one element inside another is called “nesting”To understand the nesting relationships, draw a pictureUsing nesting to make sure your tags matchSo what?

Getting Starbuzz (or yourself) onto the WebFinding a hosting companyHELLO, my domain name is...How can you get a domain name?Moving inGetting your files to the root folderAs much FTP as you can possibly fit in two pagesBack to business...Mainstreet, URLWhat is HTTP?What’s an absolute path?How default pages workHow do we link to other websites?Linking to Caffeine BuzzAnd now for the test drive...Web page fit and finishImproving accessibility by adding a title to your linksThe title test drive...Linking into a pageUsing the id attribute to create a destination for <a>How to link to elements with idsFinding the destination headingNow that you’ve got your hands on their HTML...Reworking the link in “index.html”Linking to a new windowOpening a new window using target
How the browser works with imagesHow images workSo, what are the differences among JPEG, PNG, and GIF?<img>: it’s not just relative links anymoreAlways provide an alternativeSizing up your imagesCreating the ultimate fan site: myPodCheck out myPod’s “index.html” fileWhoa! The image is way too largeResize the image to fit in the browserHere’s what you’re going to do:Open the imageResizing the imageYou’ve resized—now saveSave the imageFixing up the myPod HTMLAnd now for the test drive...More photos for myPodTaking myPod for another test driveReworking the site to use thumbnailsCreate a new directory for thumbnailsCreate the thumbnailsRework the HTML to use the thumbnailsTake myPod for another test driveTurning the thumbnails into linksCreate individual pages for the photosSo, how do I make links out of images?Add the image links to “index.html”Open the myPod logoA closer look...What format should we use?To be transparent, or not to be transparent? That is the question...Save the transparent PNGWait, what is the color of the web page background?Set the matte colorCheck out the logo with a matteSave the logoAdd the logo to the myPod web pageAnd now for the final test drive
A Brief History of HTMLThe new, and improved, HTML5 doctypeHTML, the new “living standard”Adding the document type definitionThe doctype test driveMeet the W3C validatorValidating the Head First LoungeHouston, we have a problem...Fixing that errorWe’re almost there...Adding a meta tag to specify the character encodingMaking the validator (and more than a few browsers) happy with a <meta> tag...Third time’s the charm?Calling all HTML professionals, grab the handbook...
You’re not in Kansas anymoreOverheard on Webville’s “Trading Spaces”Using CSS with HTMLWanna add more style?Getting CSS into your HTMLAdding style to the loungeCruising with style: the test driveStyle the headingTest drive...Let’s put a line under the welcome message tooWe have the technology: specifying a second rule, just for the h1Another test drive...So, how do selectors really work?Seeing selectors visuallyGetting the lounge style into the elixirs and directions pagesCreating the “lounge.css” fileLinking from “lounge.html” to the external stylesheetLinking from “elixir.html” and “directions.html” to the external stylesheetTest driving the entire lounge...It’s time to talk about your inheritance...The elements inside the <p> element inherit the font-family style from <p>What if we move the font up the family tree?What are you waiting for...give it a tryTest drive your new CSSOverriding inheritanceTest driveAdding an element to the greentea classCreating a class selectorA greentea test driveTaking classes further...The world’s smallest and fastest guide to how styles are appliedFirst, do any selectors select your element?What about inheritance?Struck out again? Then use the defaultWhat if multiple selectors select an element?And if we still don’t have a clear winner?Making sure the lounge CSS validates
Text and fonts from 30,000 feetWhat is a font family anyway?Specifying font families using CSSHow font-family specifications workDusting off Tony’s journalGetting Tony a new font-familyTest driving Tony’s new fontsHow do I deal with everyone having different fonts?How Web Fonts workHow to add a Web Font to your page...Step one: Find a fontStep two: Make sure you have all the formats of the font you needStep three: Place your font files on the WebStep 4: Add the @font-face property to your CSSStep five: Use the font-family name in your CSSStep six: Load the page!Test drive the Web Font in Tony’s journalAdjusting font sizesSo, how should I specify my font sizes?Let’s make these changes to the font sizes in Tony’s web pageTest driving the font sizesChanging a font’s weightTest drive the normal-weight headingsAdding style to your fontsStyling Tony’s quotes with a little italicHow do web colors work?How do I specify web colors? Let me count the ways...Specify color by nameSpecify color in red, green, and blue valuesSpecify color using hex codesThe two-minute guide to hex codesHow to find web colorsUsing an online color chartBack to Tony’s page...we’re going to make the headings orange, and add an underline tooTest drive Tony’s orange headingsEverything you ever wanted to know about text decorations in less than one pageRemoving the underline...
The lounge gets an upgradeThe new and improved, ultra-stylish loungeSetting up the new loungeStarting with a few simple upgradesA very quick test driveOne more adjustmentChecking out the new line heightGetting ready for some major renovationsA closer look at the box modelWhat you can do to boxesMeanwhile, back at the lounge...Creating the guarantee styleA test drive of the paragraph borderPadding, border, and margins for the guaranteeAdding some paddingA test drive with some paddingNow let’s add some marginA test drive with the marginAdding a background imageTest driving the background imageFixing the background imageAnother test drive of the background imageHow do you add padding only on the left?Are we there yet?How do you increase the margin just on the right?A two-minute guide to bordersBorder fit and finishCongratulations!Welcome back, and good timing. We’re just about to listen in on an interview with a class...The id attributeBut how do I use id in CSS?Using an id in the loungeStep one: Change the class attribute to an id in your “lounge.html” fileStep two: Change the “.guarantee” class selector in “lounge.css” to an id selectorStep three: Save your changes and reload the pageRemixing stylesheetsUsing multiple stylesheetsStylesheets—they’re not just for desktop browsers anymore...Add media queries right into your CSS
A close look at the elixirs HTMLLet’s explore how we can divide a page into logical sectionsIdentifying your logical sectionsUsing <div>s to mark sectionsLabeling the <div>sAdding some styleExposing even more structureAdding structure on structureMeanwhile, back at the lounge...Taking the <div> for a test driveAdding a borderAn over-the-border test driveAdding some real style to the elixirs sectionThe game planWorking on the elixir widthTest driving the widthAdding the basic styles to the elixirsTest driving the new stylesWe’re almost there...What are we trying to do?What we have nowWhat we wantWhat we need is a way to select descendantsChanging the color of the elixir headingsA quick test drive...Fixing the line heightLook what you’ve accomplished...It’s time to take a little shortcutBut there’s more......and don’t forget the shorthand for backgroundsAnd even more shorthandsAdding <span>s in three easy stepsSteps one and two: Adding the <span>sStep three: Styling the <span>sTest driving the spansThe <a> element and its multiple personalitiesHow can you style elements based on their state?Putting those pseudo-classes to workTest drive the linksIsn’t it about time we talk about the “cascade”?The cascadeWelcome to the “What’s my specificity?” gamePutting it all together
Did you do the Super Brain Power?Use the Flow, LukeWhat about inline elements?How it all works togetherOne more thing you should know about flow and boxesWhen the browser is placing two inline elements next to each other...When the browser is placing two block elements on top of each other...How to float an elementFirst, give it an identityNow give it a widthNow float itBehind the scenes at the loungeThe new StarbuzzA look at the markupAnd a look at the styleLet’s take Starbuzz to the next levelMove the sidebar just below the headerSet the width of the sidebar and float itTest driving StarbuzzFixing the two-column problemSetting the margin on the main sectionTest driveUh oh, we have another problemSolving the overlap problemTest driveRighty tighty, lefty looseyStep one: Start with the sidebarStep two: Take care of the main contentStep three: Take care of the footerA quick test driveLiquid and frozen designsHTML changesCSS changesA frozen test driveWhat’s the state between liquid and frozen? Jello, of course!Test driving with a tank of jelloHow absolute positioning worksWhat the CSS doesAnother example of absolute positioningWho’s on top?Using absolute positioningChanging the Starbuzz CSSNow we just need to rework the main <div>Time for the absolute test driveHow CSS table display worksHow to create the CSS and HTML for a table displayAdding HTML structure for the table displayHow to use CSS to create table displaysMeanwhile, back at Starbuzz...A quick test drive...What’s the problem with the spacing?Fix the spacingA final test drive of our table displayStrategies for your CSS layout toolboxThe Floating LayoutThe Jello LayoutThe Absolute LayoutThe Table Display LayoutProblems with the headerFixing the header images with floatTest drive your floatHow float works in the headerAdding the awardPositioning the awardHow does fixed positioning work?Putting the coupon on the pagePutting the coupon on the pageUsing a negative left property valueA rather positive, negative test drive
Rethinking HTML structureModern StarbuzzUpdate your Starbuzz HTMLTest driving the new rideBefore you continue...How to update your CSS for the new elementsTest drive #2Building the Starbuzz blog pageSetting up the CSS for the blog pageTest drive the blog pageWe still need to add a date to the blog...Adding the <time> element to your blogTest drive the blogHow to add more <header> elementsTesting the headerSo, what’s wrong with the header anyway?A final test drive for the headersCompleting the navigationAdding the navigation CSSWho needs GPS? Giving the navigation a test driveAdding a <nav> element...Making our CSS more specific...Ta-da! Look at that navigation!Creating the new blog entryAnd now, introducing the <video> elementLights, camera, action...How does the <video> element work?Closely inspecting the video attributes...What you need to know about video formatsThe video format contendersHow to juggle all those formats...Take 2: lights, camera, action...How to be even more specific with your video formatsUpdate and test drive
How do you make tables with HTML?Creating a table with HTMLWhat the browser createsTables dissectedAdding a captionTest drive...and start thinking about styleBefore we start styling, let’s get the table into Tony’s pageNow let’s style the tableTaking the styled tables for a test driveGetting those borders to collapseHow about some color?How about some color in the table rows?Did we mention that Tony made an interesting discovery in Truth or Consequences, New Mexico?Another look at Tony’s tableHow to tell cells to span more than one rowTest drive the tableTrouble in paradise?Test driving the nested tableOverriding the CSS for the nested table headingsGiving Tony’s site the final polishGiving the list some styleWhat if you want a custom marker?And, the final test drive...
How forms workHow forms work in the browserWhat you write in HTMLWhat the browser createsHow the <form> element worksWhat can go in a form?What can go in a form? (part 2)Oh, even more can go in a form!Getting ready to build the Bean Machine formFiguring out what goes in the form elementAdding the <form> elementHow form element names workBack to getting those input elements into your HTMLA form-al test driveAdding some more input elements to your formAdding the select elementTest driving the <select> elementGive the customer a choice of whole or ground beansPunching the radio buttonsUsing more input typesAdding the number and date input typesTest driving the number and date input elementsCompleting the formAdding the checkboxes and text areaThe final form test driveWatching GET in actionGetting the form elements into HTML structure for table display layoutStyling the form with CSSTest drive the styled formA word about accessibilityWhat more could possibly go into a form?More things that can go in a formCongratulations! You made it to the end
#1 More CSS selectorsPseudo-elementsAttribute selectorsSelecting by siblingsCombining selectors#2 Vendor-specific CSS properties#3 CSS transforms and transitions#4 InteractivityWhat else can scripting do?#5 HTML5 APIs and web apps#6 More on Web Fonts#7 Tools for creating web pagesSome tools to consider#8 XHTML5#9 Server-side scripting#10 Audio

Content preview from Head First HTML and CSS, 2nd Edition

Chapter 8. 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

A lot of CSS properties are dedicated to helping you style your text. Using CSS, you can control font, style, color, and even the decorations that are put on your text, and we’re going to cover all these in this chapter. We’ll start by exploring the actual fonts that are used to display your pages. You’ve already seen the font-family property, and in this chapter you’re going to learn a lot more about specifying fonts.

Before we dive in, let’s get the 30,000-foot view of ...