My Cart (0)

Customer Service 1-800-221-5528

Murach's HTML5 and CSS3

by Zak Ruvalcaba and Anne Boehm
18 chapters, 636 pages, 264 figures
Published December 2011
ISBN 978-1-890774-66-0
eBook: $39.60
List Price: $49.50 Save 20%

There is a new edition of this book. Here is the original copy for this book: HTML5 and CSS3 have made significant changes to the way HTML and CSS are coded, taking web design to a new level. So if you’re learning HTML and CSS for the first time, you need to learn HTML5 and CSS3 from the start. And if you’re still using HTML and CSS, you need to upgrade to HTML5 and CSS3 right away.

College Instructors

Go to our instructor's site to learn more about this book and its instructor's materials.

As I am completing Chapter 15 in your HTML5 & CSS book, I just want to let you know how much I enjoy this book, all the cool things I am learning that continually have me saying ‘wow’ as I go through the chapters."

Dawn Kaczor, Groveland, MA

  • About this Book
  • Table of Contents
  • FREE Downloads
  • Book FAQs
  • Corrections
  • Reviews

What this book does

Section 1: A crash course in HTML5 and CSS3

In the 6 chapters of section 1 of this book, you’ll learn more about web development than you can from most full books. In fact, by the end of those chapters, you’ll be developing web pages the way today’s best professionals do.

That means you’ll be using HTML5 semantic elements to mark up the structure of the content on the page and CSS to format and lay out that content. If you’re new to the subject, you’ll see why you need to use float and the CSS box model right from the beginning. If you’ve used earlier editions of CSS, you’ll be amazed at how easily CSS3 lets you create pages with text and box shadows, rounded corners, and gradients.

Section 2: Refine your web pages with the features that users expect in websites today

That includes:

  • How to work with links, lists, navigation bars, and navigation lists
  • How to work with images, including thumbnails and rollovers
  • When and how to use tables
  • How to work with forms and the HTML5 validation features
  • How to add audio and video to your pages (HTML5 lets you take advantage of the players that are built into all modern browsers, but you’ll also learn how to use Flash as a fallback solution for older browsers)
  • How to format your web content for printing

Section 3: Use JavaScript and jQuery for special effects

This section introduces you to JavaScript and jQuery, so you can see how to:

  • Use tested JavaScript code to enhance your web pages with features like image rollovers, image swaps, and slide shows
  • Use jQuery to enhance your web pages with features like accordions, carousels, and popup boxes
  • Use jQuery Mobile to develop web pages for mobile devices with the look-and-feel of native applications
  • Get started with the HTML5 features that require the use of JavaScript, like embedded fonts, geolocation, and canvas

You’re still going to want to learn JavaScript and jQuery after you read this section so you can take them to the next level. But when you’re ready for that, you can get our JavaScript and jQuery book.

Section 4: Design and deployment

Once you have a good grasp of how to develop web pages, you can understand today’s best practices for designing a site, as shown in chapter 17. Then, chapter 18 shows you not only how to deploy your site on a web server, but how to get the site indexed on the major search engines and directories.

Who this book is for

This book is for anyone who wants to develop web pages the professional way, using HTML5 semantic tags to structure the content and CSS to format and lay it out on the page. That includes:

  • budding web developers
  • experienced web developers who want to upgrade to HTML5 and CSS3
  • web developers who still use tables for page layout when they should be using CSS
  • web programmers who don’t fully understand the power of HTML5

As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.

What software you need

To develop web pages, you need:

  • a text editor (we recommend Aptana Studio 3)
  • two or more web browsers (Internet Explorer for Windows, Safari for Macs, Google’s Chrome, Mozilla Firefox, or Opera)

Although you can use any text editor with this book, a text editor that includes syntax coloring, auto-completion, and error-marking will help you code more quickly and with fewer errors. That’s why we recommend Aptana Studio 3. It’s available for free, it can be used for entering HTML and CSS (and JavaScript, too), and it runs on both Windows and Mac OS systems.

The appendix in this book shows you how to download and install Aptana and the web browsers. And chapter 2 gives you a quick tutorial on using Aptana Studio 3.

The perfect companion books

If you combine our HTML5 and CSS3 book with its two companion books, you’ll have the answers to all of your client-side development questions.

Murach’s Dreamweaver CC 2014

Dreamweaver is the most widely-used IDE for professional web developers. It has a powerful user interface that you can use to add HTML to a page and provide the CSS that formats it...without coding the HTML and CSS yourself. To learn how to use the latest and best version of Dreamweaver, please consider Murach’s Dreamweaver CC 2014.

Murach’s JavaScript and jQuery

Section 3 of our HTML5/CSS3 book shows you how to use tested JavaScript and jQuery code to add features like image rollovers and slide shows to your web pages. But if you want to write your own JavaScript and jQuery routines, our JavaScript and jQuery book will take your skills to the professional level.

What people say about this book

"An excellent source for anybody, novice or professional, looking to get started with HTML5 and CSS3. It is my go-to guide when I’m designing web pages."
- Jamie McMahon,

“Entry-level options don't get any better. You'll have all the skills you need to create basic web pages by the end, including HTML structure, styling with CSS, mobile web design, as well as basic JavaScript and jQuery skills.”
- Posted at an online bookseller

“For me, the great thing about this book is the way it is laid out. Information is on the left page and the visual of what is being discussed is on the right page - genius!”
- Posted at an online bookseller

"I needed to solve some specific issues with our company web site, so I dove directly into the chapters that addressed my problems. Chapter 12, How to format web pages for printing, was worth the price of the book all by itself. It allowed us to unsnarl the mess we had made of the printed version of our web pages because we got our original instructions from online articles and blogs."
- Marnie Hutcheson; posted at an online bookseller

“What makes the book better than so many other technical books is how it uses a running example that becomes more complex, and weaves in lots of CSS3 along the way. It's been very helpful towards learning the fundamentals, and not merely being used as a cookbook.”
- Posted at an online bookseller

“I usually do not like big thick programming books, but I was very impressed on how this book was structured and organized. Unlike other programming books, it was not boring at all and it was so well written that it was very easy to follow, understand, and most importantly, to LEARN from. After reading this book at work, I decided to purchase a copy of my own.”
- Posted at an online bookseller

"This is not just a training book, but also something of a cookbook and reference guide. I can see it not spending much time on my bookshelf!"
- David Bolton,

“In the typical Murach style, this book walks you through HTML in a clever step-by-step fashion, making it extremely easy to learn and remember. As an added benefit, the book teaches you best practices for making your web page easily accessible on the web, along with SEO every step of the way.”
- Posted at an online bookseller

“It's the first time I bought a book and enjoyed every page of it. I've been doing web developing for a while. Never saw a book like this. A++++”
- Posted at an online bookseller

View the table of contents for this book in a PDF: Table of Contents (PDF)

Click on any chapter title to display or hide its content.

Section 1 A crash course in HTML and CSS

Chapter 1 Introduction to web development

How web applications work

The components of a web application

How static web pages are processed

How dynamic web pages are processed

A survey of web browsers and server-side scripting languages

How client-side JavaScript fits into web development

An introduction to HTML and CSS

The HTML for a web page

The CSS for a web page

A short history of the HTML and CSS standards

Tools for web development

Text editors for HTML and CSS

IDEs for web development

FTP programs for uploading files to the web server

How to view deployed web pages

How to view a web page

How to view the source code for a web page

Three critical web development issues

Cross-browser compatibility

User accessibility

Search engine optimization

Chapter 2 How to code, test, and validate a web page

The HTML syntax

The basic structure of an HTML document

How to code elements and tags

How to code attributes

How to code comments and whitespace

The CSS syntax

How to code CSS rule sets and comments

How to code basic selectors

How to use Aptana to work with HTML and CSS files

How to create a project

How to open an HTML file

How to start a new HTML file

How to edit an HTML file

How to open or start a CSS file

How to edit a CSS file

How to preview and run an HTML file

How to test, debug, and validate HTML and CSS files

How to test and debug a web page

How to validate an HTML file

How to validate a CSS file

Chapter 3 How to use HTML to structure a web page

How to code the head section

How to code the title element

How to link to a favicon

How to include metadata

How to code text elements

How to code headings and paragraphs

How to code special blocks of text

How to code inline elements for formatting and identifying text

How to code character entities

How to code the core attributes

How to structure the content of a page

How to code div and span elements

How to structure a page with the HTML5 semantic elements

How to use some of the other HTML5 semantic elements

How to code links, lists, and images

How to code absolute and relative URLs

How to code links

How to code lists

How to include images

A structured web page

The page layout

The HTML file

Chapter 4 How to use CSS to format the elements of a web page

An introduction to CSS

Three ways to provide CSS styles for a web page

How to use CSS with the HTML5 semantic elements in older browsers

How to specify measurements and colors

How to specify measurements

How to specify colors

How to use the CSS3 color specifications

How to code selectors

How to code selectors for all elements, element types, ids, and classes

How to code relational selectors

How to code combinations of selectors

How to code attribute selectors

How to code pseudo-class and pseudo-element selectors

How the cascade rules work

How to work with text

How to set the font family and font size

How to set the other properties for styling fonts

How to indent and align text

How to transform and decorate text

How to use CSS3 to add shadows to text

How to float an image so text flows around it

A web page that uses an external style sheet

The page layout

The HTML file

The CSS file

Chapter 5 How to use the CSS box model for spacing, borders, and backgrounds

An introduction to the box model

How the box model works

A web page that illustrates the box model

How to size and space elements

How to set heights and widths

How to set margins

How to set padding

A web page that illustrates sizing and spacing

The HTML for the web page

The CSS for the web page

A version of the CSS that uses a reset selector

How to set borders and backgrounds

How to set borders

How to use CSS3 to add rounded corners and shadows to borders

How to set background colors and images

How to use CSS3 to set background gradients

A web page that uses borders and backgrounds

The HTML for the web page

The CSS for the web page

Chapter 6 How to use CSS for page layout

How to float elements in 2- and 3-column layouts

How to float and clear elements

How to use floating in a 2-column, fixed-width layout

How to use floating in a 2-column, liquid layout

How to use floating in a 3-column, fixed-width layout

Two web pages that use a 2-column, fixed-width layout

The home page

The HTML for the home page

The CSS for the home page

The speaker page

The HTML for the speaker page

The CSS for the speaker page

How to use CSS3 to create text columns

The CSS3 properties for creating text columns

A 2-column web page with a 2-column article

How to position elements

Four ways to position an element

How to use absolute positioning

How to use fixed positioning

A table of contents that uses positioning

Section 2 More HTML and CSS skills as you need them

Chapter 7 How to work with links and lists

How to code lists

How to code unordered lists

How to code ordered lists

How to code nested lists

How to code description lists

How to format lists

How to change the bullets for an unordered list

How to change the numbering system for an ordered list

How to change the alignment of list items

How to code links

How to link to another page or start an email message

How to format links

How to use a link to open a new browser window or tab

How to create and link to placeholders

How to link to a media file

How to create navigation lists and bars

How to create a navigation list

How to create a navigation bar

The Town Hall home page with a navigation bar

Chapter 8 How to work with images

Basic skills for working with images

Types of images for the Web

How to include an image on a page

How to resize an image

How to align an image vertically

How to float an image

Advanced skills for working with images

How to use the HTML5 figure and figcaption elements

How to work with thumbnails

How to do image rollovers

How to create image maps

Related skills for working with images

When to use an image editor

How to get images and icons

How to create favicons

Chapter 9 How to work with tables

Basic skills for using tables

An introduction to tables

How to create a table

How to use CSS to format a table

How to add a header and footer

How to use the CSS3 structural pseudo-classes for formatting tables

How to use the HTML5 figure and figcaption elements with tables

How to merge cells in a column or row

How to provide for accessibility

Other skills for working with tables

How to nest tables

How to control wrapping

Chapter 10 How to work with forms

How to use forms and controls 318

How to create a form

How to use buttons

How to use text fields

How to use radio buttons and check boxes

How to use drop-down lists

How to use list boxes

How to use text areas

How to use labels

How to group controls with fieldset and legend elements

How to use a file upload control

Other skills for working with forms

How to align controls

How to format controls

How to set the tab order and assign access keys

How to use the HTML5 features for data validation

The HTML5 attributes and CSS3 selectors for data validation

How to use regular expressions for data validation

How to use a datalist to present entry options

How to use the HTML5 controls

How to use the email, url, and tel controls

How to use the number and range controls

How to use the date and time controls

How to use the search control for a search function

How to use the color control

How to use the output element to display output data

How to use the progress and meter elements to display output data

A web page that uses HTML5 data validation

The page layout



Chapter 11 How to add audio and video to your web site

An introduction to media on the web

Common media types for video and audio

Video codecs

Audio codecs

Audio and video support in current browsers

How to encode media

How to add audio and video to a web page

How to use the object and param elements

How to use the embed element

How to use the HTML5 video and audio elements

How to fall back to Flash for backward compatibility

A web page that offers both audio and video

The page layout


Chapter 12 How to format web pages for printing

The skills for formatting printed web pages

How to define the style sheets and rule sets for printed pages

Recommendations for print formatting

CSS properties for printed pages

A two-column web page with special formatting for printing

The web page

The links to the style sheets

The printed page

The CSS for the print style sheet

Section 3 JavaScript and jQuery skills

Chapter 13 How to use JavaScript to enhance your web pages

Introduction to JavaScript and DOM scripting

How JavaScript works

How the DOM (Document Object Model) works

How DOM scripting works

How to include JavaScript in an HTML document

How to use JavaScript to enhance your web pages

JavaScript for opening a popup window

JavaScript for image rollovers

JavaScript for image swaps

JavaScript for slide shows

JavaScript for tabbed data

What to do if the JavaScript doesn’t work

Web sites for JavaScript code

Another example: JavaScript for data validation

The page layout


The JavaScript code

Chapter 14 How to use jQuery to enhance your web pages

Introduction to jQuery

What jQuery is and where to get it

How to include jQuery and jQuery UI in your web pages

How to use jQuery

How to use two of the jQuery features

jQuery for carousels

jQuery for slide shows

How to use four of the jQuery UI features

jQuery UI for accordions

jQuery UI for auto-completion

jQuery UI for popup dialog boxes

jQuery UI for sortable lists

A web page that uses jQuery

The page layout

The HTML for the accordion and the popup dialog box

The CSS for the accordion and the popup dialog box

Chapter 15 How to use jQuery Mobile to build mobile web sites

How to work with mobile devices

How to provide pages for mobile devices

How to set the viewport properties

Guidelines for designing mobile web pages

Guidelines for testing mobile web pages

An introduction to jQuery Mobile

What jQuery Mobile is and where to get it

How to include jQuery Mobile in your web pages

How to create one web page with jQuery Mobile

How to use jQuery Mobile to create a mobile web site

How to code multiple pages in a single HTML file

How to use dialog boxes and transitions

How to create buttons

How to create a navigation bar

How to format content with jQuery Mobile

The default styles that jQuery Mobile uses

How to apply themes to HTML elements

How to use jQuery Mobile for page layout

How to lay out your content in two columns

How to create collapsible content blocks

How to create an accordion

How to create a contents list

A mobile web site that uses jQuery Mobile

The layout for the mobile web site

The HTML for the mobile web site

Chapter 16 Advanced HTML5 and CSS3 features

How to embed fonts in a web page

How to use the CSS3 @font-face selector to embed fonts

How to use Google Web Fonts

How to use Adobe Typekit fonts

Other options for embedding fonts

How to use the Geolocation feature

How Geolocation works

How to show the geolocation on a Google map

How to handle Geolocation errors

How to use the web storage feature

How to use local storage

How to use session storage

How to use the Canvas feature

How Canvas works

How to draw shapes

How to draw paths and text

How to draw transparent shapes and use gradients

How to use the Drag and Drop feature

How to use HTML to create draggable content

How to use HTML to work with drag-and-drop events

How to use JavaScript for the event handlers

Section 4 How to design and deploy a web site

Chapter 17 How to design a web site

Users and usability

What web users want is usability

The current conventions for usability

Design guidelines

Use the home page to sell the site

Let the users know where they are

Make the best use of web page space

Write for the web

Chunk long pages into shorter pages

Know the basic principles of graphics design

Design methods and procedures

The use of development teams

Top-down design, stepwise refinement, and prototyping

The lifecycle of a web site

The design procedure applied to a small web site

Define the audience and set the goals

Design the home page

Design the primary content pages

Design the other pages

Plan the navigation

Plan the folders for the site

Chapter 18 How to deploy a web site on a web server

How to get a web host and domain name

How to find a web host

How to get a domain name

How to transfer files to and from the web

How to install FileZilla Client

How to connect to a web site on a remote web server

How to upload and download files

Three more skills for deploying a web site

How to test a web site that has been uploaded to the web server

How to get your web site into search engines and directories

How to control which pages are indexed and visited


Appendix A How to set up your computer for this book

How to install Aptana Studio 3

On a Windows system

On a Mac OS system

How to install Firefox

How to install and use the source code for this book

For Windows users

For Mac OS users

Sample chapters

Chapter 5: How to use the CSS box model for spacing, borders, and backgrounds

To give you an idea of how well this book works, you can download this chapter. It shows you how to use the CSS box model to control the spacing above, below, and on the sides of elements like headings, text, and images.

This chapter also shows you how to use CSS to add borders or backgrounds to elements. That includes the CSS3 features that let you round the corners of borders, add shadows to borders, and provide gradients as backgrounds…without using the images that were required before CSS3.

Chapter 5 PDF (715Kb) Download Now

Book applications and exercises

This download includes:

  • The HTML and CSS code for all of the applications that are presented in the book
  • The starting source code for the exercises in the book
  • The cumulative solutions for the exercises in Section 1 and Section 2 (the solution for Section 1 is the starting code for the exercises in Section 2; the solution for Section 2 is the starting code for the exercises in Section 3)

Appendix A in the book shows how to install and use these files on Windows and Mac systems.

Exe file for Windows (44Mb) Download Now

Zip file for any system (44Mb) Download Now

Below are the answers to the questions that have come up most often about this book. If you have any questions that aren’t answered here, please email us. Thanks!

How do I create a project from the downloadable folders if I’m using Aptana Studio 3.4 or later?

The instructions on pages 54 and 55 of our book were written for Aptana Studio 3.0, which was the current version when the book was published. Since then, Aptana Studio 3.4 has been released, and you can no longer use the same procedure to create a project from an existing folder. Instead, you have to import the folder as a new project.

To import a folder, use the File→Import command to start the Import wizard. Then, in the first dialog box, expand the General folder, select Existing Folder as New Project, and click the Next button. In the next dialog box, enter or browse to the folder that contains the project files. Then, enter a name for the project, make sure the Web-Primary project type is selected, and click the Finish button.

Why do I get an error when validating a page that contains an hgroup element?

Although the hgroup element was new with the HTML5 specification, it was dropped on April 16, 2013. So if you try to validate a page that uses this element, you’ll get an error indicating that it’s obsolete. Because of that, you shouldn’t use this element.


To view the corrections for this book in a PDF, just click on this link: View the corrections

Then, if you find any other errors, please email us so we can correct them in the next printing of the book. Thank you!

There are no reviews for this product yet.

To leave a review, please log in to your account.     Log In Here

Our Ironclad Guarantee

You must be satisfied. Try our books for 60 days. They must be the best you've ever used or send them back for a prompt refund. No questions asked!

Contact Murach Books

For orders and customer service:


Weekdays, 8 to 4 Pacific Time

College Instructors

If you're a college instructor who would like to consider a book for a course, please visit our website for instructors to learn how to get a complimentary review copy and the full set of instructional materials.