Murach college books and courseware since 1974
Customer Service 1-800-221-5528
Murach’s HTML5 and CSS3 (4th Edition)
List price: $59.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.
For this edition, we also provide a lab manual in Print or eBook format that provides all of the student activities for this book. Your students can also purchase both the text and Lab Manual in eBook format as part of a VitalSource eBook and eManual bundle.
Latest Edition
HTML and CSS (5th Edition)
Published December 2021
I love the Murach HTML5 book—and a couple of my colleagues have heard good things through the grapevine and stopped by to ask which book I was using, so you might just pick up a couple more adoptees. I'm very happy with it and am planning to use it as my primary text for the foreseeable future.”
Shelly Hokanson, Assistant Professor
School of Media Arts and Design
James Madison University
- About this Book
- Table of Contents
- Courseware
- FAQs
- Corrections
What this book does
Section 1: The essential concepts and skills
In the 8 chapters of this section, your students will learn how to use HTML to mark up the content of web pages and CSS to present that content. In fact, by the end of section 1, your students will be able to develop web pages the way today’s best professionals do.
That means they will be using the HTML5 semantic elements to mark up the structure of a page. They will be using float and the CSS box model. And they will be using a professional subset of HTML5 and CSS3 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 Responsive Web Design so their pages will work on all screens, from mobile devices to computers. This, of course, is an essential skill for all web developers. That’s why it’s in the first section of the book.
From this point on, the sections and chapters are written as independent modules, so you can assign them in whatever sequence you prefer.
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 them has become an essential skill on the job.
Section 3: The other HTML and CSS skills
Section 3 expands on section 1 by presenting the other HTML and CSS skills that professional developers need. That includes:
- How to work with images, which were introduced in section 1, including icons, rollovers, and image maps
- When and how to use tables, including how to make tables responsive
- How to work with forms and the HTML5 validation features
- How to add audio and video to web pages by using HTML5 to work with the players that are built into all modern browsers
- How to use embedded fonts so all browsers will have access to them
- How to format web pages for printing
- How to use the CSS3 features for transitions, animations, transforms, and filters
Section 4: Design and deployment
Section 4 consists of two chapters. Chapter 17 presents today’s best practices for designing a website. And chapter 18 shows not only how to deploy a site on a web server, but also how to get the site indexed on the major search engines and directories. Because of the modular structure of this book, you can assign these chapters any time after section 1.
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 your students are likely to have about the common features that they see on websites, like image swaps and slide shows.
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 your students some useful perspective on what they’re likely to encounter on the job.
What's new in this book
Most important are the two new chapters that show how to use Flexible Box and Grid Layout for page layout and Responsive Web Design. These have become essential skills on the job.
In addition, there’s the new chapter on third-party development tools that are popular today. This provides a nice perspective on what can be expected in the real world.
And although you can use any text editor you choose, this book now uses Brackets (instead of Aptana). So chapter 2 provides a short tutorial on Brackets.
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’s new in the instructor’s materials: Enhancements + New Lab Manual
- We enhanced the test banks so there are more questions for each chapter, and we converted all of the completion questions to multiple-choice.
- We developed a new Health case study that you can use as an alternative to the Halloween case study.
- We offer a Lab Manual that provides all the student activities in a single manual as well as a VitalSource eBook+eManual bundle.
Book features
Like all of our books, this one has our standard features, like paired pages, logical content organization, real-world examples, modular design, exercises that solidify your students’ skills, and much more. Here, though, are features that are specific to this book.
HTML and CSS are always related
In a modern website, HTML is used to define the structure and content for the site, and CSS is used to format the content. In other words, they always work together, and that’s the way our book teaches them...from the first chapter to the last.
In contrast, some books start by first presenting a complete subset of HTML and then presenting a subset of CSS. But that means that the students don’t see the relationships between HTML and CSS until later in the book. Worse, some books have a section on HTML and a separate section on CSS. That may work okay for reference, but it doesn’t work didactically.
HTML and CSS are presented before web design
Many HTML and CSS books present web design before the students understand how a website is implemented with HTML and CSS. We think that’s a mistake.
As a result, our book first shows how to build pages with HTML and CSS. Then, after the students understand how websites are implemented, they are ready to learn the principles of web design, which can be taught any time after section 1.
Responsive Web Design is emphasized
Chapter 8 in this book shows how to build responsive web pages with fluid layout, scalable images, and media queries. It also shows how to use a jQuery plugin called SlickNav to convert the menus for a page to a form that works on mobile devices. Then, chapters 9 and 10 present the two latest CSS modules for page layout and Responsive Web Design. In short, your students learn all the skills that they need for building responsive websites at a professional level.
Accessibility and SEO guidelines are integrated
User accessibility and search engine optimization are presented in chapter 1. After that, guidelines for accessibility and SEO are presented whenever they are relevant. For instance, when the <a> element is presented, the related accessibility and SEO guidelines are presented too.
The continuing application is real world
Like other books, our book has dozens of examples that show how HTML and CSS are used in a variety of contexts. Beyond that, though, our book presents a real-world application that is progressively enhanced from one chapter to the next. In fact, this application is a simplified version of a site that we developed for a local nonprofit that brings six speakers each year to its Town Hall meetings.
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, though, these course titles fall into two categories:
A complete HTML course
If you teach an HTML and CSS course, regardless of whether it’s a one- or two-term course, this book is for you. It presents all of the HTML and CSS skills at a professional level. It shows how to design and deploy websites, It presents additional perspective on JavaScript and jQuery and third-party development tools. After the first section, it lets you put together any chapters you want in any sequence you want, to fit the course structure. And even if you aren’t able to cover all of the content, your students will have the book to answer questions and learn new features on their own (yes, many students actually keep our books!).
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. Then, your students can use the rest of the book in an advanced course or as a reference for their own work.
What software your students need
A text editor
Although your students can use a text editor as simple as Notepad to code HTML and CSS, we think that a text editor that includes syntax coloring, auto-completion, and error-marking will help your students build web pages more quickly and with fewer errors. That in turn means that they 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 make it easy for your students to adjust to this editor, the appendix in our book shows how to download and install the software, and chapter 2 gives a tutorial on using it.
Of course, your students can use whichever editor or IDE you want with this book. If you don’t have a favorite, though, Brackets has some excellent features.
The Chrome browser
To run and test web applications, your students should use at least two browsers. Since Internet Explorer, Edge, and Safari are installed automatically on Windows or Mac OS devices, your students already have one browser. Then, for the second browser, your students 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.
Related book for JavaScript courses
Murach’s JavaScript and jQuery (4th Edition)
This book integrates the teaching of JavaScript and jQuery because that’s the way JavaScript is used in websites today. So your students will get that practical perspective right from the start. Beyond that, this book uses a didactic approach that works for students with no programming background as well as for students who have already taken a programming course. So if you teach a JavaScript course right after your HTML and CSS course, please take a hard look at our book.
What instructors and students say about this book
“The HTML5/CSS3 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
“Murach's HTML5 and CSS3 is still getting rave reviews from my students.”
- Al Cutting, Professor, Rhode Island
“My students have really enjoyed the HTML5 book. My thoughts are 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 Indianhead Technical College
“Murach's HTML5 and CSS3 is the only worthwhile book I have seen in this category.”
- Andrew McConnell, Emeritus Professor, Napa Valley College
“I think others should know the value of your HTML5 book. It has made a great impact on my teaching and my students’ learning.”
- C. Michael Sturgeon, PhD, Faculty Coordinator of Instructional Technology, Tennessee
"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.”
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 set up your computer for this book
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
Besides the end-of chapter activities in the book and the student download from our website, here’s a description of what we offer. In brief, we provide all of the activities that other publishers provide...but without the busywork.
The instructor’s materials
For a complete description of all of the instructor’s materials for this book, please read the Instructor’s Summary. Otherwise, here’s a quick summary:
- Instructional objectives by chapter
- PowerPoint slides for classroom presentations
- Test banks of multiple-choice questions
- Two case studies that present chapter-by-chapter exercises, plus their solutions
- Short exercises that can be used for added practice, quizzes, or tests, plus their solutions
- Generic projects that offer minimal guidance as they have your students design and develop small websites of their own
The Lab Manual
- The Lab Manual for this book presents all of the student activities in a single Print or eBook manual. That includes course objectives, chapter summaries, term lists, exercises, case studies, and projects.
- This Lab Manual insures that your students will have everything they need for the course, with the exception of the starting code that you’ll supply from the instructor’s materials. And it makes it easier for you to assign case studies and projects.
- This Lab Manual is available as a separate Print or eBook manual and also in a VitalSource bundle that consists of the eBook + Lab Manual.
- The instructor’s materials include a PDF version of the lab materials for the first 6 chapters of the book. If you like what you see there, you can request the complete manual by going to our Lab Manual or bundle page.
To view the "Frequently Asked Questions" for this book in a PDF, just click on this link: View the questions
Then, if you have any questions that aren't answered here, please email us. Thanks!
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!
Contact Murach Books
Buy Murach Books
This is our site for college instructors. To buy Murach books, please visit our retail site.