HTML5 and CSS

Introduction

HTML and CSS in Brief

Web Browsers

Web Standards and Specifications

Progressive Enhancement: A Best Practice

Is This Book for You?

How This Book Works

Companion Website

Chapter 1. Webpage Building Blocks

Thinking in HTML

A Basic HTML Page

Markup: Elements, Attributes, Values, and More

A Webpage's Text Content

Links, Images, and Other Non-Text Content

File and Folder Names

URLs

HTML: Markup with Meaning

A Browser's Default Display of Webpages

Key Takeaways

Chapter 2. Working with Webpage Files

Planning Your Site

Creating a New Webpage

Saving Your Webpage

Specifying a Default Page or Homepage

Editing Webpages

Organizing Files

Viewing Your Page in a Browser

The Inspiration of Others

Chapter 3. Basic HTML Structure

Starting Your Webpage

Creating a Title

Creating Headings

Common Page Constructs

Creating a Header

Marking Navigation

Marking the Main Area of a Webpage

Creating an Article

Defining a Section

Specifying an Aside

Creating a Footer

Creating Generic Containers

Improving Accessibility with ARIA

Naming Elements with a Class or ID

Adding the Title Attribute to Elements

Adding Comments

Chapter 4. Text

Adding a Paragraph

Specifying Fine Print

Marking Important and Emphasized Text

Creating a Figure

Indicating a Citation or Reference

Quoting Text

Specifying Time

Explaining Abbreviations

Defining a Term

Creating Superscripts and Subscripts

Adding Author Contact Information

Noting Edits and Inaccurate Text

Marking Up Code

Using Preformatted Text

Highlighting Text

Creating a Line Break

Creating Spans

Other Elements

Chapter 5. Images

Images for the Web

Getting Images

Choosing an Image Editor

Saving Your Images

Inserting Images on a Page

Offering Alternative Text

Specifying Image Sizes

Scaling Images with the Browser

Scaling Images with an Image Editor

Adding Icons for Your Website

Chapter 6. Links

Creating a Link to Another Webpage (and Other Link Basics)

Creating and Linking to Anchors

Creating Other Kinds of Links

Chapter 7. CSS Building Blocks

Constructing a Style Rule

Adding Comments to Style Rules

Understanding Inheritance

The Cascade: When Rules Collide

A Property's Value

Chapter 8. Working with Style Sheets

Creating an External Style Sheet

Linking to External Style Sheets

Creating an Embedded Style Sheet

Applying Inline Styles

The Cascade and the Order of Styles

Using Media-Specific Style Sheets

The Inspiration of Others: CSS

Chapter 9. Defining Selectors

Constructing Selectors

Selecting Elements by Name

Selecting Elements by Class or ID

Selecting Elements by Context

Selecting an Element That Is the First or Last Child

Selecting the First Letter or First Line of an Element

Selecting Links Based on Their State

Selecting Elements Based on Attributes

Specifying Groups of Elements

Combining Selectors

Chapter 10. Formatting Text with Styles

Before and After

Choosing a Font Family

Specifying Alternate Fonts

Creating Italics

Applying Bold Formatting

Setting the Font Size

Setting the Line Height

Setting All Font Values at Once

Setting the Color

Setting the Background

Controlling Spacing

Adding Indents

Aligning Text

Changing the Text Case

Using Small Caps

Decorating Text

Setting Whitespace Properties

Chapter 11. Layout with Styles

Considerations When Beginning a Layout

Structuring Your Pages

Styling HTML5 Elements in Older Browsers

Resetting or Normalizing Default Styles

The Box Model

Controlling the Display Type and Visibility of Elements

Setting the Height or Width for an Element

Adding Padding Around an Element

Setting the Border

Setting the Margins Around an Element

Making Elements Float

Controlling Where Elements Float

Positioning Elements Relatively

Positioning Elements Absolutely

Positioning Elements in a Stack

Determining How to Treat Overflow

Aligning Elements Vertically

Changing the Cursor

Chapter 12. Building Responsive Webpages

Responsive Web Design: An Overview

Making Images Flexible

Creating a Flexible Layout Grid

Understanding and Implementing Media Queries

Putting It All Together

Accommodating Older Versions of Internet Explorer

Chapter 13. Working with Web Fonts

What Is a Web Font?

Where to Find Web Fonts

Downloading Your First Web Font

Understanding the @font-face Rule

Styling Text with a Web Font

Applying Italics and Bold with a Web Font

Using Web Fonts from Google Fonts

Chapter 14. Enhancements and Effects with CSS

Browser Compatibility, Progressive Enhancement, and Polyfills

Understanding Vendor Prefixes

Rounding the Corners of Elements

Adding Drop Shadows to Text

Adding Drop Shadows to Elements

Applying Multiple Backgrounds

Using Gradient Backgrounds

Setting the Opacity of Elements

Effects with Generated Content

Combining Images with Sprites

Chapter 15. Lists

Creating Ordered and Unordered Lists

Choosing Your Markers

Using Custom Markers

Choosing Where to Start List Numbering

Controlling Where Markers Hang

Setting All List-Style Properties at Once

Styling Nested Lists

Creating Description Lists

Chapter 16. Forms

Improvements to Forms in HTML5

Creating Forms

Processing Forms

Organizing the Form Elements

Creating Text Boxes

Labeling Form Parts

Creating Password Boxes

Creating Email, Search, Telephone, and URL Boxes

Creating Radio Buttons

Creating Checkboxes

Creating Text Areas

Creating Select Boxes

Allowing Visitors to Upload Files

Creating Hidden Fields

Creating a Submit Button

Disabling Form Elements

Styling Forms Based on Their State

Chapter 17. Video, Audio, and Other Multimedia

Third-Party Plugins and Going Native

Video File Formats

Adding a Video to Your Webpage

Adding Controls and Autoplay to Your Video

Looping a Video and Specifying a Poster Image

Preventing a Video from Preloading

Using Video with Multiple Sources and a Text Fallback

Providing Accessibility

Audio File Formats

Adding an Audio File with Controls to Your Webpage

Autoplaying, Looping, and Preloading Audio

Providing Multiple Audio Sources with a Fallback

Adding Video and Audio with a Flash Fallback

Advanced Multimedia

Further Resources

Chapter 18. Tables

Structuring Tables

Spanning Columns and Rows

Chapter 19. Adding JavaScript

Loading an External Script

Adding an Embedded Script

JavaScript Events

Chapter 20. Testing & Debugging Webpages

Validating Your Code

Testing Your Pages

Trying Some Debugging Techniques

Checking the Easy Stuff: General

Checking the Easy Stuff: HTML

Checking the Easy Stuff: CSS

When Images Don't Display

Chapter 21. Publishing Your Pages on the Web

Getting Your Own Domain Name

Finding a Host for Your Site

Transferring Files to the Server

Appendix HTML Reference

Index