Customer Service 1-800-221-5528

HTML and CSS (6th Edition)

by Zak Ruvalcaba, Anne Boehm, and Mary Delamater
17 chapters, 566 pages, 225 illustrations
Published
ISBN 978-1-943873-21-0
List price: $64.50

This 6th edition of our best-selling HTML and CSS book presents the skills that a web developer needs today. To do that, it uses the proven instructional approach that made the first five editions so popular. In addition, it updates and streamlines the previous edition so it works better than ever.

Canvas course file coming soon!

The Canvas course file will contain all the objectives, quizzes, exercises, case studies, and PowerPoint slides that you need to run an effective course. It only takes a few clicks to import it into the Canvas LMS. Then, you can customize it for your course. Learn more. We should complete this in December.

I really like your HTML book. I now use it for two of my classes. I think the way the book is laid out is beneficial to the student, with information on the left side and content examples on the right.”

Gigi Simonsen,
Information Technology Instructor, Nebraska

  • About this Book
  • Table of Contents
  • Courseware
  • FAQs
  • Corrections

What this book does

To present the essential HTML and CSS skills in a manageable progression and at the right pace, this book is divided into 3 sections.

Section 1: Get started fast

To get you started right, the eight chapters in this section are a crash course in using HTML and CSS to develop web pages at a professional level. By the end of this section, your students will be able to develop web pages using the same coding techniques used by today’s top professionals.

That means they’ll be using semantic HTML elements to define the structure of a page. They’ll be using the CSS box model and flexbox layout right from the beginning. And they’ll be using a professional subset of HTML and CSS that consists of the most-used HTML elements, CSS selectors, and CSS properties.

The last chapter in this section shows your students how to use media queries to implement a responsive web design. That way, their web pages will work on devices with screens of all sizes, from mobile devices to desktop computers. This is an essential skill for today’s web developers.

After section 1, the sections and chapters are independent modules. As a result, you can assign them in whatever sequence you prefer.

Section 2: More HTML and CSS skills as you need them

Section 2 expands on section 1 by presenting additional HTML and CSS skills that professional developers use every day. That includes:

  • More skills for working with lists and links
  • More skills for working with images, icons, fonts, and colors
  • How to use embedded fonts so all browsers will have access to them
  • When and how to use tables, including how to make tables responsive
  • How to work with forms and built-in HTML validation
  • How to add audio and video to web pages
  • How to use grid layout to create complex page layouts that are difficult to achieve with flexbox layout
  • How to use CSS for transitions, transforms, filters, and animation
  • How to control CSS specificity

Section 3: Web design and deployment

Section 3 consists of two chapters that help you expand your students’ knowledge beyond HTML and CSS. That includes:

  • Today’s best practices for designing a user-centric website
  • How to use GitHub to deploy a site on a web server that’s running in the cloud
  • How to get a site indexed by the major search engines

 

What's new in this book

When we updated this edition, we focused on what a web developer needs to know today. As a result, we cut obsolete material, rearranged some topics, and streamlined the book so it’s more manageable for your students.

  • We streamlined chapters 1 and 2 to help your students get started more quickly.
  • We modified chapter 6 so it shows how to use flexbox (not floats) for page layout. This is a better and more modern coding practice.
  • We modified chapter 7 so it shows how to use CSS (not jQuery) to display navigation menus. This is a better and more modern coding practice.
  • In chapter 8, we added coverage of container queries, one of the most important new features of CSS.
  • We modified the website that’s presented throughout the book to use mobile-first design instead of desktop-first design since that’s a best practice for a modern website.
  • We moved the extended coverage of lists and links into its own chapter to make it easy for you to cover this material when you want to.
  • We thoroughly streamlined and reworked the chapter on HTML forms to make it easier for your students and to focus on modern best practices.
  • We moved coverage of grid layout further back in the book because it’s a complex skill that can be covered later in most courses.
  • We added some new CSS features to chapter 15 and renamed it “More CSS skills”. It still covers transitions, transforms, animations, and filters. But now, it also covers an assortment of other useful CSS skills.
  • We modified chapter 17 (How to deploy a website) to show your students how to use GitHub to deploy a website to a web server that’s running in the cloud.

We cut chapter 18 (How to use JavaScript). If you want to include some coverage of JavaScript in your course, we recommend using one or more chapters from Murach’s Modern JavaScript.

What's the same as the previous edition

Despite all the changes, the 6th edition still uses the same proven instructional approach of the previous editions. In short, it begins with a crash course that teaches the essential HTML and CSS skills that your students need to start developing web pages at a professional level. After that, it presents other skills as independent modules that your students can learn when they need them.

Like the 5th edition, the 6th edition has been printed in full color. This makes the pages more engaging and attractive, and we think it makes many of the skills easier to grasp too.

In addition, the 6th edition still shows how to use the popular Visual Studio Code (VS Code) text editor. This helps your students learn to develop web pages more quickly and with fewer coding errors.

Book features

Here are four features of this book that will to help you teach your students HTML and CSS more effectively.

It always shows how the HTML and its CSS are related

In a modern website, HTML defines the structure and content for the pages, and CSS formats the content. In other words, they always work together. Because of that, this book shows how HTML and CSS work together as early as possible and continues to do so throughout the rest of the book. This makes sure that your students always see the relationship between HTML and CSS, which is critical to learning how to use them.

It emphasizes responsive web design (RWD)

Chapter 8 shows how to use media queries to build responsive web pages that use a fluid layout with navigation menus and scalable images. As a result, by the end of chapter 8, your students should have all the skills that they need for building responsive websites at a professional level.

It integrates accessibility and SEO guidelines

Chapter 1 introduces user accessibility and search engine optimization. After that, this book presents guidelines for accessibility and SEO whenever they are relevant. For instance, when chapter 3 presents the <a> element, it also presents the related accessibility and SEO guidelines.

It presents a realistic website

This book presents dozens of examples that show how HTML and CSS are used in a variety of contexts. However, it also presents a realistic website and enhances this website from one chapter to the next. This lets your students see how HTML and CSS is used in the real world.

What courses this book can be used for

This book is currently used by colleges and universities around the world for a variety of course titles. In general, these course titles fall into two categories:

A complete HTML course

This book is ideal for a one- or two-term HTML and CSS course. The first section presents the most critical HTML and CSS skills at a professional level while emphasizing responsive web design. After that, you can teach the remaining chapters in a sequence that fits the requirements of your course.

Web design with HTML and CSS

Because of its modular design, this book also works for an introductory course that puts more emphasis on web design and less on HTML and CSS. In that case, you can teach section 1, select the remaining chapters that you want to include, and skip the other chapters.

What software your students need

A text editor

To develop web pages with HTML and CSS, your students can use any text editor. However, we recommend using Visual Studio Code (VS Code) because it provides many features that can help your students develop web pages more quickly and with fewer errors. This editor is available for free and runs on Windows and macOS.

A web browser

We recommend using the Chrome browser to do the primary testing for a web page. That’s because Chrome provides excellent developer tools that your students can use to debug their web pages. This web browser is available for free and runs on Windows and macOS.

Related books for JavaScript courses

If you teach a JavaScript course after your HTML and CSS course, we have two JavaScript books for you to consider. Both are ideal for students without previous programming experience who need detailed explanations, but they also work well for students who already know another language and are ready to move more quickly. Either way, when your students are done with your course, they’ll have the JavaScript skills that are in such demand today.

Murach’s Modern JavaScript

This book helps your students learn JavaScript more easily than ever by presenting the best practices of modern JavaScript. If you don’t need to teach jQuery, we recommend using this book.

Murach’s JavaScript and jQuery (4th Edition)

This book integrates the teaching of JavaScript and jQuery, an influential JavaScript library that has been around since 2006 and is still used extensively in millions of websites. If your course needs to include coverage of jQuery, this book is an excellent choice.

What instructors and students say about this book

“The HTML/CSS book was an instant hit. I asked a student to evaluate it for me, and now I cannot get it back!”
- James Gonzalez, Multimedia Studies Instructor, College of Marin

“Needed to learn how to make web pages. Took a class and this was the required textbook. Finished with the class, but I still use this book as reference material. There is so much here and it has helped me a great deal.”
- Posted at an online bookseller

“My students have really enjoyed the HTML book. Murach books are uniquely geared towards two-year colleges; we need books that cut to the chase and hit the ground running. Thanks for providing affordable and quality books.”
- René Bylander, Instructor, IT Web & Software Developer Program, Wisconsin

Great Book, Relevant & Educational! A+: Used this book for my first semester in Web Design, and it was my go-to for any question I had in my class. This is a great supplement to any other course material, with hands-on labs and solutions to modern coding situations. Would Highly Recommend!”
- Posted at an online bookseller

Murach's HTML and CSS is the only worthwhile book I have seen in this category.”
- Andrew McConnell, Emeritus Professor

“I think others should know the value of your HTML book. It has made a great impact on my teaching and my students’ learning.”
- Posted at an online bookseller

Murach's HTML and CSS is still getting rave reviews from my students.”
- Al Cutting, Professor, Rhode Island

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 Get started fast

Chapter 1 Introduction to web development

How web apps work

The components of a web app

The HTML for a web page

The CSS for a web page

A short history of the HTML and CSS standards

How web pages are processed

Four web development issues

Responsive web design

Cross-browser compatibility

Web 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 HTML comments

The CSS syntax

How to code style rules

How to code basic selectors

How to code CSS comments

How to use VS Code

How to work with folders

How to work with files

How to edit an HTML file

How to edit a CSS file

How to use two VS Code extensions

How to install an extension

How to find syntax errors

How to open an HTML file in a browser

How to test and debug a web page

How to test a web page

How to debug a web page

How to validate HTML and CSS

How to validate HTML

How to validate CSS

Chapter 3 How to use HTML to structure a web page

How to code the head section

How to include metadata

How to set a title and a favicon

How to structure the body section

How to code headings and paragraphs

How to code the structural elements

When and how to use div elements

More skills for presenting text

How to code inline elements

How to code character entities and special types of text

How to code links, lists, and images

How to code URLs

How to code links

How to code lists

How to include images

A structured web page

The page displayed in a browser

The HTML

Chapter 4 How to use CSS to format a web page

An introduction to CSS

How to provide the styles for a web page

How to use the basic selectors

How to specify measurements

How to specify colors

How to work with text

How to set the font family and font size

How to style and format fonts

How to indent, align, and decorate text

How to float an image

How to use other selectors

How to code relational selectors

How to code combination selectors

How to code attribute selectors

How to code pseudo-class selectors

How to code pseudo-element selectors

How the cascade rules work

How to organize your CSS

How to create and use custom properties

How to nest CSS

A formatted web page

The page displayed in a browser

The HTML

The CSS

How to use Developer Tools to inspect styles

Chapter 5 How to use the CSS box model

An introduction to the box model

How the box model works

A web page that shows how the box model works

How to size and space elements

How to set widths and heights

How to set margins

How to set padding

How to work with box sizing

How to use a reset selector

A web page that uses sizing and spacing

How to set borders and backgrounds

How to set borders

How to add rounded corners and shadows

How to set background colors and images

How to set background gradients

A web page that uses borders and backgrounds

Chapter 6 How to use flexbox for page layout

How to get started with flexbox

Flexbox layout concepts

How to create your first flexible box

How to create page layouts

How to create a 1-column layout

How to create a 2-column layout

How to create a 3-column layout

How to change the order of flex items

How to allocate space to flex items

A web page that uses a 2-column layout

How to implement a fluid design

How to control the viewport

How to use units of measure based on the viewport

How to size fonts relative to the viewport

How to scale images

A fluid web page

Chapter 7 How to use flexbox with navigation menus

Basic skills for navigation menus

How to display a navigation menu

How to style the links in a navigation menu

How to wrap menu items

How to align menu items along the main axis

How to align menu items along the cross axis

A web page with a navigation menu

How to create a 2-tier navigation menu

How to position an element

An example that uses positioning

How to create a submenu

Useful symbols for working with menus

A web page with a 2-tier navigation menu

Chapter 8 How to use media queries for responsive web design

Introduction to responsive web design

The components of a responsive web design

How to test a responsive design

How to work with media queries

How to code media queries

How to determine the breakpoints for media queries

A responsive web page

How to create a responsive navigation menu

How to create a menu button

A responsive navigation menu

A 2-tier responsive navigation menu

How to work with container queries

How to define a container

How to code a container query

A web page with a container query

Section 2 More HTML and CSS skills

Chapter 9 How to work with lists and links

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 a list

How to change the numbering system for a 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 tab

How to create and link to placeholders

How to link to a media file

How to create email and phone links

Chapter 10 How to work with images, icons, fonts, and colors

How to work with images

Types of images for the web

How to align an image vertically

How to add an image to a figure

How to change an image based on viewport size

How to use Scalable Vector Graphics

How to get and edit images

How to get images

When to use an image editor

How to work with icons

How to work with Font Awesome icons

How to work with favicons

How to work with fonts

How to embed fonts in a web page

How to use fonts from Google and Adobe

How to work with colors

How to use functions to specify colors

How to use relative colors

How to work with light and dark color schemes

Chapter 11 How to work with tables

Basic HTML skills for defining tables

An introduction to tables

How to define a table

How to add a header and footer

Basic CSS skills for formatting tables

How to format a table

How to use structural pseudo-classes to format a table

More skills for working with tables

How to add a table to a figure

How to merge cells in a column or row

How to make a table accessible

How to make a table responsive

Chapter 12 How to work with forms

How to get started with forms

How to define a form

How to format a form

How to get started with controls

How to use labels and text fields

How to use text areas

How to use radio buttons and check boxes

How to group controls

How to use drop-down lists

How to use list boxes

How to define buttons

How to format buttons

Other skills for working with forms and controls

How to set the tab order and assign access keys

How to use the number, email, url, and tel controls

How to use the date and time controls

How to use the file upload control

How to use HTML for data validation

The HTML attributes and CSS selectors

How to use regular expressions

A web page with a form

The web page

The HTML for the form

The CSS for the form

Chapter 13 How to add audio and video

An introduction to media on the web

Common media types for audio and video

How to convert from one media type to another

How to add audio and video

How to add audio

How to add video

How to provide alternate source files

Chapter 14 How to use grid layout

How to get started with grid layout

An introduction to grid layout

How to create a grid

How to set the size of grid tracks

The properties for aligning grid items and tracks

A page layout that uses alignment

How to define grid areas

How to use numbered lines

How to use named lines

How to use template areas

How to use the 12-column grid

A web page that uses grid layout

The web page

The HTML for the structural elements

The mobile-first CSS for small screens

The media queries for larger screens

Common page layouts that use grid

The headline and gallery layout

The fixed sidebar layout

The advanced grid layout

How to debug the layout for a page

Chapter 15 More CSS skills

How to use transitions and transforms

How to code transitions

How to create an accordion using transitions

How to code 2D transforms

A gallery of images with 2D transforms

How to use animations and filters

How to code simple animations

How to set the keyframes for a slide show

How to use filters

Ten filter functions applied to the same image

Four more CSS skills

How to add shadows to text

How to work with user preferences

How to use functional pseudo-class selectors

How to work with logical properties

How to work with specificity

How specificity is calculated

How to use classes

How to use the :where() pseudo-class

How to use cascade layers

Section 3 Web design and deployment

Chapter 16 Users, usability, and web design

Users and usability

An introduction to usability

The current conventions for usability

Web design guidelines

Use mobile-first design

Use the home page to sell the site

Let users know where they are

Make the best use of web page space

Divide long pages into shorter chunks

Know the principles of graphic design

Write for the web

Chapter 17 How to deploy a website

How to deploy a website for testing

How to set up a GitHub account

How to install the GitHub Desktop app

How to create a GitHub repository

How to add files to a repository

How to set up a DigitalOcean account

How to deploy a website

How to test a deployed website

How to make changes to a deployed website

More skills for deploying a website

How to get a web host

How to get a domain name

How to get your website into search engines

How to set up, maintain, and improve a website

Appendix

Appendix A How to set up your computer for this book

How to download the files for this book

How to install Visual Studio Code

How to install Chrome and other browsers

Coming in December

We want to make it easy for you to teach an effective course with our book. And we want students to feel that any assignment you give them isn’t busywork. To make that happen, we supply a complete set of instructor’s materials.

Objectives

  • Help your students focus on the skills that they should master

Test banks

  • Provide a way to test comprehension
  • Can be imported to all modern LMSs
  • Are designed to test the skills described by the objectives for each chapter
  • Use only multiple-choice test questions because they have the highest validity

Short exercises

  • Give your students a chance to gain valuable hands-on experience
  • Can be used for quizzes or tests since the solutions aren’t available to students (unlike the exercises that are printed in the book)

Case studies

  • Have your students develop small websites with extensive guidance

Generic projects

  • Have your students design and develop small websites of their own with minimal guidance

PowerPoint slides

  • Summarize the critical information presented in the book
  • Start with the instructional objectives for each chapter

For a detailed description of all the materials, please see the Instructor’s Summary PDF when completed in December.

If you use the Canvas LMS, we also provide a Canvas course file that you can use to import most of these materials with just a few clicks.

We'll be posting answers to the frequently asked questions (FAQs) for this book here. So, if you have any questions, please send them to us by email. Thanks!

There are no book corrections that we know of at this time. But if you find any errors in this book, please send them to us by email, so we can post the corrections here. Thank you!

Murach college books and courseware since 1974