My Cart (0)

Customer Service 1-800-221-5528

Murach's HTML5 and CSS3 (4th Edition)

by Zak Ruvalcaba and Anne Boehm
20 chapters, 744 pages, 297 figures
Published March 2018
ISBN 978-1-943872-26-8
eBook: $54.50

This 4th edition of our best-selling book integrates all of the HTML and CSS skills that are needed on the job with the proven instructional approach that made the first three editions of this book so popular. And now, this new edition includes chapters on Flexible Box and Grid Layout, which are the latest approaches to Responsive Web Design.

College Instructors

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

Until now, my websites looked great but have been coded with what seems like 'duct-tape and bubble-gum' methods, just for appearances and not for professionalism nor compliance. This book taught me all [that is] possible with simple HTML5 and CSS3 coding... What a game changer!”

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

What this book does

Section 1: The essential concepts and skills

This book starts with an 8-chapter course that teaches you how to use HTML and CSS to build websites. This course works for beginners as well as experienced web designers, and the last chapter teaches you how to use Responsive Web Design so your pages will look good and work right on any screen, from phone to tablet to desktop.

When you complete this short course, you will be able to develop web pages at a professional level. Then, you can go on to any other section or chapter in this book to learn new skills whenever you need them.

Section 2: Page layout and Responsive Web Design

The two chapters in this section show how to use the latest CSS3 modules for responsive page layout: Flexible Box and Grid Layout. These modules let you build modern page layouts without using floating. That’s why knowing how to use both of these modules has become an essential skill on the job.

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

This section presents all of the other HTML and CSS skills that you may need. That includes:

  • More on working with images, which were introduced in section 1, including icons, rollovers, and image maps
  • When and how to use tables, including how to make them responsive
  • How to work with forms and the HTML5 validation features
  • How to add audio and video to your pages by using HTML5 to work with the players that are built into all modern browsers
  • How to use embedded fonts so you can be sure all browsers that access your website will have them
  • How to format your web pages for printing
  • How to use the CSS3 features for transitions, animations, transforms, and filters

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 of this section. Then, chapter 18 not only shows how to deploy a site on a web server, but also how to get the site indexed on the major search engines and directories. 

Section 5: Other skills for professional web developers

Chapter 19 in this section shows how to add JavaScript and jQuery features to web pages...without knowing how to code JavaScript and jQuery. That will answer some of the questions you might have about the common features that you see on websites, like image swaps and slide shows.

After you finish this chapter, you’ll probably want to learn how to write your own JavaScript and jQuery routines so you can customize the features of your website. So when you’re ready for that, you can get our JavaScript and jQuery book.

This section (and book) ends with chapter 20, which introduces some of the third-party development tools that professional developers use...like Emmet, SASS, Bootstrap, GitHub, and Node.js. That will give you some useful perspective on what you’re likely to encounter on the job.

Who this book is for

This book is for anyone who wants to develop web pages at a thoroughly professional level. That includes:

  • budding web designers and developers
  • web developers who need to expand and enhance their skillsets
  • JavaScript and jQuery programmers who need to know more about the HTML and CSS that they’re scripting

What's new in this book

Most important are the two new chapters on Responsive Web Design that show how to use Flexible Box and Grid Layout for page layout so that your websites look good and work right on any screen or device. These have become essential skills on the job.

In addition, there’s a new chapter on third-party development tools that are popular today. This provides a nice perspective on what you can expect in the real world.

Beyond that, every chapter in the book has been improved, enhanced, and upgraded. That’s why this book works even better than the previous edition.

What software you need

A text editor

Although you can use a text editor as simple as Notepad to code HTML and CSS, a text editor that includes syntax coloring, auto-completion, and error-marking will help you build web pages more quickly and with fewer errors. That in turn means that you will learn faster.

That’s why our book recommends Brackets as the text editor. This editor was developed by Adobe; 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. To help you get started with this editor, the appendix in our book shows how to download and install the software, and chapter 2 gives you a tutorial on using it.

If you already have a favorite editor or IDE, you can of course use that. But if you don’t have a favorite, Brackets has some excellent features.

The Chrome browser

To run and test web applications, you should use at least two browsers. Since Internet Explorer, Edge, and Safari are installed automatically on Windows or Mac OS systems, you’re likely to already have one browser. Then, for the second browser, you should install Chrome because it’s the most popular browser and because this book shows how to use some of its developer tools. That’s why the appendix in this book shows how to download and install Chrome.

The perfect companion book

If you combine this book with Murach’s JavaScript and jQuery, you’ll be on your way toward mastering client-side development. This companion book takes you from beginner to expert as it presents the JavaScript and jQuery skills that you need for building client-side applications. And unlike other books, it uses a tightly integrated approach that shows you how to use JavaScript for what it does best, and how to use jQuery for what it does best.

What people say about this book

“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

"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, DreamInCode.net

“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 website, 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, news.dice.com

“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 The essential concepts and skills

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

Five critical web development issues

Users and usability

Cross-browser compatibility

User accessibility

Search engine optimization

Responsive Web Design

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 style rules and comments

How to code basic selectors

How to use Brackets to work with HTML and CSS files

How to open and close the folder for a website

How to open, close, and display files

How to start a new HTML file

How to edit an HTML file

How to start and edit a CSS file

How to use split view and the Quick Edit feature

How to preview 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 use the primary HTML5 semantic elements

How to use some of the other HTML5 semantic elements

When and how to code div and span 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

Two ways to provide for browser compatibility

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 to work with Cascading Style Sheets

How the cascade rules work

How to use the developer tools to inspect the styles that have been applied

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 set properties for formatting 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 external style sheets

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, fluid 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 sidebar that uses positioning

Chapter 7 How to work with lists, links, and navigation menus

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

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 email, phone, and Skype links

How to create navigation menus

How to create a vertical navigation menu

How to create a horizontal navigation menu

How to create a 2-tier navigation menu

How to create a 3-tier navigation menu

The CSS for a 3-tier navigation menu

Chapter 8 How to use Responsive Web Design

Introduction to Responsive Web Design

The three components of a responsive design

How to test a responsive design

How to implement a fluid design

Fluid layouts vs. fixed layouts

How to convert fixed widths to fluid widths

How to use other units of measure with responsive design

How to size fonts

How to scale images

A web page with a fluid design

How to use CSS3 media queries

How to control the mobile viewport

How to code media queries

Common media queries for a responsive design

How to build responsive menus with the SlickNav plugin

A web page that uses Responsive Web Design

The design of the web page

The HTML for the web page

The CSS for the web page

Section 2 Page layout and Responsive Web Design

Chapter 9 How to use Flexible Box Layout for page layout and RWD

Getting started with Flexible Box Layout

An introduction to flexbox

How to create your first flexible box

How to set flexbox properties

How to align flex items along the main axis

How to align flex items along the cross axis

How to wrap and align wrapped flex items

How to allocate space to flex items

How to change the order of flex items

A responsive web page that uses flexbox

The design of the web page

The HTML for the main structural elements

The CSS for desktop layout

The CSS for mobile layouts

Chapter 10 How to use Grid Layout for page layout and RWD

Getting started with Grid Layout

An introduction to Grid Layout

How to create a basic grid

How to set the size of grid tracks

How to align grid items and grid tracks

How to define the grid areas for elements

How to use numbered lines

How to use named lines

How to use template areas

How to use the 12-column grid concept

A responsive web page that uses grid

The design of the web page

The HTML for the structural elements

CSS that uses template areas

CSS that uses a 12-column grid

Common page layouts that use grid

The headline and gallery layout

The fixed sidebar layout

The advanced grid layout

Section 3 More HTML and CSS skills as you need them

Chapter 11 How to work with images and icons

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 use the picture element

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

How to get and work with icons

How to create favicons

How to work with Scalable Vector Graphics

Chapter 12 How to work with tables

Basic HTML skills for coding tables

An introduction to tables

How to create a table

How to add a header and footer

Basic CSS skills for formatting tables

How to use CSS properties to format a table

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

Other skills for working with 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

How to nest tables

How to control wrapping

How to make a table responsive

Chapter 13 How to work with forms

How to use forms and controls

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

The HTML

The CSS

Chapter 14 How to add audio and video to your website

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

A web page that offers both audio and video

The page layout

The HTML

Chapter 15 How to work with fonts and printing

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 Edge Web Fonts

The skills for formatting printed web pages

How to define the style sheets and style rules for printed pages

Recommendations for print formatting

CSS properties for printed pages

A two-column web page with print formatting

The web page

The links to the style sheets

The printed page

The CSS for the print style sheet

Chapter 16 How to use CSS3 transitions, transforms, animations, and filters

How to use CSS3 transitions

How to code transitions

How to create an accordion using transitions

How to use CSS3 transforms

How to code 2D transforms

A gallery of images with 2D transforms

How to use CSS3 animations

How to code simple animations

How to set the keyframes for a slide show

How to use CSS3 filters

How to code filters

The ten filter methods applied to the same image

Section 4 Web design and deployment

Chapter 17 How to design a website

Users and usability

What web users want is usability

The current conventions for usability

Design guidelines

Think mobile from the start

Use the home page to sell the site

Let the users know where they are

Make the best use of web page space

Divide long pages into shorter chunks

Know the principles of graphics design

Write for the web

How to design a website

The lifecycle of a website

Step 1: Define the audience and set the goals

Step 2: Develop the site map

Step 3: Wireframe the critical pages

Step 4: Illustrate the critical pages

Other design considerations

Development teams

Top-down design and prototyping

Chapter 18 How to deploy a website 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 website on a remote web server

How to upload and download files

Four more skills for deploying a website

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

How to get your website into search engines

How to control which pages are indexed and visited

How to maintain a healthy website

Section 5 Other skills for professional web developers

Chapter 19 How Javascript and jQuery are used to enhance web pages

Introduction to JavaScript

How JavaScript works

Three ways to include JavaScript in a web page

How DOM scripting works

Methods and properties for DOM scripting

How JavaScript handles events

The Email List application in JavaScript

The HTML

The JavaScript

Introduction to jQuery

How to include jQuery in your web pages

How to code jQuery selectors, methods, and event methods

The Email List application in jQuery

The HTML

The jQuery

How to use JavaScript and jQuery as a non-programmer

The Image Swap application

A Slide Show application

Three sources for tested JavaScript and jQuery

Chapter 20 When and how to use third-party development tools

Introduction to third-party web development tools

Some of the most useful tools

How these tools can make you more productive

How to use Emmet, Git, and GitHub

How to use Emmet

How to use Git and Github

How to use Sass

How to use Sass to nest style rules

How to use Sass variables and mixins

How to use Bootstrap

How to configure Bootstrap

How to use the Bootstrap grid system

How to use Bootstrap components

How to use Node.js

Node.js for server-side development

The Node Package Manager

How to use Gulp.js

How to install Gulp.js and Gulp.js plugins

How to create and run Gulp.js tasks

Appendixes

Appendix A How to install and use the software and downloadable files

How to install Brackets

On a Windows system

On a Mac OS system

How to install Chrome

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 (1,148Kb) 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 solutions for the exercises in the book

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

Exe file for Windows (34.6Mb) Download Now

Zip file for any system (34.6Mb) Download Now

On this page, we'll be posting answers to the questions that come up most often about this book. So if you have any questions that you haven't found answered here at our site, please email us at murachbooks@murach.com. Thanks!

 

There are no book corrections that we know of at this time. But if you find any, please email us at murachbooks@murach.com, and we'll post any corrections that affect the technical accuracy of the book here. 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:

1-800-221-5528

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.