HTML and CSS

What You Will Learn

The building blocks of the web are plain HTML and CSS—and you can make a website knowing just those two technologies. That’s what you learn in this book. Specifically, you’ll get the ins and outs of what it takes to write good, meaningful, and well-structured HTML. You’ll learn how to write proper, maintainable CSS to make your HTML look nice. And you’ll learn how to get it all online.

Websites are meant to be universal files that can be accessed and displayed everywhere by everyone. Accessibility— in multiple senses of the word—is the name of the game, and learning to design and build websites that can be reached by all users, regardless of their personal abilities, using any device they choose.

To make a webpage, you need only what you already have on your computer: a text editor, a place to save files, and a browser. This book teaches you how to put all those pieces together.

Who Is This Book For?

In short, this book is written for anyone who wants to learn HTML and CSS. It assumes no prior knowledge.

That means that if you want to make a website for your hobby, this book is for you. If you’re taking a beginner course (or teaching a beginner course), it’s for you too. Or if you want to become a professional web developer, hey, it’s for you too. After all, books like this are how I got my start. You’ll get all the tools you need to get a website online. And then I’ll give you some options for what you can learn next.

However, if you’re looking for advanced techniques, like using HTML Canvas, writing JavaScript from scratch, or using advanced build tools like node.js, this book is not for you. Though I will say that after reading through the official HTML and CSS documentation thoroughly, you’ll probably pick up some new things. I know I did.

How This Book Is Structured

This book is structured so that each chapter builds on the last. That means you’ll first learn exactly what HTML and CSS are and what the purpose of each is. Then you’ll learn about how to organize your website’s files and directories. Then, on to the crux of the matter!

Both the HTML and CSS sections of the book start with the most basic markup or code and move to more complex techniques. If you’re starting with no knowledge, it’s best to take the chapters in order.

This book, like others in the Visual QuickStart Guide series, uses a combination of explanatory text and step-by-step tasks to teach you HTML and CSS. Each chapter begins with text that introduces a topic, and a series of short sections present specific features within that topic.

These sections typically begin with an explanation of the feature, which is followed by one or more tasks that walk you through implementing the feature. Code samples and images accompany each task to show you what to do.

If you’re brushing up or using this book as a reference, each chapter also stands alone—so if you need a refresher on forms or on the box model, you can just check out those chapters. While the book is not comprehensive, it covers all the important parts and it points you in the right direction for the rest.

The book ends with some bigger concepts to consider once you’re comfortable putting an entire website together.

Although you’ll get all the building blocks to make a full site, we won’t build a single site from scratch. There will, however, be full-page examples for you to follow, as well as starter files to work from.

<a href="#contact">Jump to Contact
→Form</a>

<!-- This is an HTML comment -->

/* This is a CSS comment */

Online Content

Your purchase of this Visual QuickStart Guide includes online materials provided by way of your Account page on peachpit.com.

Errata

Finally, try as I might to get rid of them all, there still may be some errors in the final, printed text. You can find a list of those on the book’s page at www.peachpit.com/title/9780136702566. Click the Updates tab to report an error or to see any corrections that are available.

I hope you enjoy the book and get a lot out of it, whether you’re learning or using it as a reference.

What Is HTML?

HTML stands for HyperText Markup Language and it does two important things: it describes how webpages should look, and it defines the semantics of those pages.

But what is a markup language? Well, websites are made up of a bunch of different components. A variety of kinds of data—text, images, audio, video, and downloadable media—are part of a website. Those files—every component of the website—are stored on a server for you and other people to access.

Think of it this way: imagine that accessing a website from a server is like ordering takeout. You order from your favorite restaurant (sending a request across the internet), the kitchen staff (the server) selects the items you need, and then the delivery person (the internet again) brings the food (the files for the website) to your door (your computer).

All of this data is presented to you in your browser (Chrome, Firefox, Safari, Microsoft Edge, etc.) in a human-readable way.

Because humans and computers don’t read data the same way, there needs to be something that tells computers how to display all of this data in a structured way—to render it—so humans can read it.

The raw data files that the server sends you come with one or more files written in HTML. To continue our takeout analogy, you can think of an HTML file like a bento box (or, if you’re not into Japanese cuisine, like a cafeteria tray). It acts as a container that keeps the different types of data organized and presents them in a useful arrangement.

That’s where markup comes in. An HTML file is simply a text file marked up with special codes that tell the web browser how to display the data it’s receiving from the server on the computer’s screen. HTML markup draws from a large collection of text tags that are embedded in the text and tell the computer—specifically the browser—how a website should look.

Semantics in this context is important because it gives meaning to those tags (also known as elements). For example, there’s an <h1> HTML element (for Heading 1) (FIGURE 1.1), which tells the browser and search engines that the enclosed text is a heading—and not just any heading, but the most important heading. The browser then knows to display it in big bold letters … that is, unless you use CSS, or Cascading Style Sheets (which you’ll learn about later), to tell the browser to display it differently.

While you could just put a bunch of plain text into a file and open it in a browser, that text will have no structure or meaning. It will all run together, and there will be no visual hierarchy. It will just be a blob of text.

Let’s start by looking at the simple Word document in FIGURE 1.2. You can see there are multiple headings at different sizes, paragraphs with spacing, and text that’s formatted as bold or italic type.

This visual hierarchy gives the reader an idea of how they should approach the text: when a new section starts, where emphasis in the text lies, and more. In Word you do this using the Styles pane. On a webpage, you do that by adding HTML tags to the HTML file.

To create a simple hierarchy with HTML:

1. Open Notepad on Windows, or TextEdit on Mac.

2. Type <h1>Bigger headings are more important</h1>.

3. Type <h2>This is smaller</h2>.

4. Type <h3>This is smaller still</h3>.

5. <p>This is body copy, and is most common.</p>.

6. Save the file as hierarchy.html.

7. Double-click the file to open it in your browser.

   Your browser should display four paragraphs of text, decreasing in size from top to bottom (FIGURE 1.3).

What Is CSS?

If HTML provides the structure for a webpage, then CSS supplies the style—and it’s right in the name! CSS stands for Cascading Style Sheets, and it describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look however you want.

While HTML uses tags, CSS uses rulesets. They look like this:

h1 {
    color: black;
    font-size: 30px;
}

A great example of how CSS works is the website CSS Zen Garden. You can visit the site at csszengarden.com and, by changing the CSS, completely change the look and feel of the pages without changing the underlying HTML markup. Much like when you apply different themes or layouts to documents in Microsoft Word, changing the CSS styles on a webpage makes the page look different, but the hierarchy of the content stays the same (FIGURE 1.4).

While browsers come with their own default styles, you can easily override them with your own styles, in the form of CSS files called style sheets.

How HTML and CSS Work Together

Even though HTML and CSS perform different functions for a website, they are almost always coupled in learning materials such as this book.

That’s because they are the two core languages necessary for making modern websites. Although technically only HTML is required to make a webpage, without CSS you’ll get a bland website that doesn’t look like much more than a Word document (FIGURE 1.5).

These days, with the power of HTML5 and CSS3, we can create with our websites unique experiences that would have required a true programming language like JavaScript just a few years ago (FIGURE 1.6).

Wrapping Up

Another reason HTML and CSS are so often discussed together is that they’re both processed by the user’s browser. Other web technologies, programs, and apps work differently. Some might be processed by a server, or some on a developer’s computer and exported. HTML and CSS are uniquely positioned because the source code is accessible to the user in the browser.

When something new gets added to HTML or CSS, it’s up to each individual browser to implement the changes. That means that Google Chrome, Firefox, Safari, and Microsoft Edge may implement the new features at different times.

As a result, the websites you create might look different in each browser.

We’ll talk more about testing your websites in a later chapter, but knowing this will help you understand the true power of HTML and CSS: any device that has a browser can view your website.

It also means that you don’t need any additional tools, equipment, or expenses to start making websites. You can do it right from your computer.

Let’s do that now.

Using a Text Editor

A text editor is a program that lets you write plain text (that is, text without any formatting) on your computer. In Windows, Notepad serves that purpose, and macOS ships with TextEdit (FIGURE 2.1). Be careful: TextEdit lets you add simple formatting to plain text, so you’ll need to make sure to save the file in plain text format and add the .html extension to the file name. Don’t save the file in the default rich text format (.rtf).

To create a new webpage:

1. Open Notepad on Windows, or TextEdit on macOS.

   In the following steps, enter each tag on a separate line of code.

2. Type <html>.

3. Type <head>.

4. Type </head>.

5. Type <body>.

6. Type </body>.

7. Type </html>.

8. Save the file as index.html.

Using Advanced Tools

There are also a multitude of advanced tools specifically for writing code and markup. They include features like:

• Syntax highlighting to make your code easier to read

• Autocompletion to allow you to write code faster

• Real-time compiling

• Error checking

• Version control

Some are souped-up text editors, like Notepad++ (for Windows) and Atom and Visual Studio Code (VS Code), which are both cross-platform.

Some are integrated development environments (IDEs) that have whole suites of tools built in. Coda for Mac is a popular one, but there’s also the cross-platform PHPStorm. These are generally used for programming in languages like PHP or Python.

I recommend VS Code (FIGURE 2.2). It’s free, well made, and stable, and the user interface is completely customizable. The ability to customize the interface of VS Code will make reading HTML and CSS easier, and it allows you to highlight the markup for an HTML tag or CSS statement, which we’ll cover in later chapters.

Website Directory Structures and File Extensions

With a code editor in place, it’s time to talk about the actual files you’ll need for your website, and the folder, or directory, structure you’ll use to store them.

Since you’re developing right on your computer, you could technically just throw all the files onto the desktop and work from there. But I strongly recommend against that. Instead, you should create a proper directory structure.

Your initial examples and projects will use only one or two files. But as your websites get more complex, you’ll need more files (and more types of files). Having a good file structure will keep your site organized. It will help you, and anyone else who might maintain your code, find things easily.

Accessing your files

When you want to open an HTML file, you can double-click its icon on your computer to open it in the browser. Taking files online so that other people can open them is a bit of a different story, and I’ll talk more about that in Chapter 21. But there is one important piece of information you should know.

To access a file online, you need to know its path—that is, its location in the file system hierarchy. File paths use the format /directory/file-name. Many times, when we use a browser to visit a website, we don’t specify the name of the file we wish to access. The browser could be visiting a domain (peachpit.com) or a specific subfolder in that domain (peachpit.com/store/). A domain serves as the “address” for a website. You can think of it the same way you’d think of a mailing address for house.

Continuing the home address analogy, to get to a specific file on the web you have to know the route to follow to reach it. This is provided by the file’s Uniform Resource Locator (URL). The URL of a file incorporates the name of its domain and the file’s path (FIGURE 2.3).

What if you don’t know the exact URL of the page you want to visit, but you know the domain name of its website? In these cases, most web servers will choose a default file to show you. This default file is most often named index.html and sits at the root of the directory we’re accessing. So the main page for your website (its home page) will have the file name index.html.

Using CodePen for Quick Tests

There’s one more option for quickly testing code without the need for a web server, but you will need an internet connection.

The popular website CodePen provides an interface that lets you write and test code in a single window. You can see how this works in FIGURE 2.4.

You enter your HTML and CSS into one of the panels at the top of the page, while the bottom of the page displays the results in real time. So if you want to rapidly see the effects of what you’re writing without opening and refreshing your browser, CodePen is a great option. It’s especially good for rapid prototyping.

Wrapping Up

Now that you have your text editor, your local website directory, and a fast way to test code, you’re ready to start writing HTML.

In the next chapter we’re going to dive into how HTML works. Let’s do it!

How HTML Tags Work

Take a look at one of the most common HTML tags (FIGURE 3.1). The <p> is a standard HTML tag. It starts with a less-than sign (<), followed by the letter p (the name of the tag), and ends with a greater-than sign (>). Taken together, these constitute an HTML tag.

Note that HTML tags usually work in pairs that frame the content to which they apply. The only difference between the first and second p tags is the addition of the forward slash (/) after the left angle bracket that encloses the second p tag. This denotes the closing tag, and treated as a unit, the whole statement creates an HTML element: opening tag, content, and closing tag.

The p in between the angle brackets is the character—this tells the browser what the content is. In this case, “p” stands for “paragraph” and causes the browser to display the content between the tags as a block of text.

One might read this aloud as, “An opening paragraph tag, followed by text, then a closing paragraph tag.” Depending on the tag, the browser will display the text differently.

To change an HTML tag and see the result in the browser:

1. In your text editor, type <p>This is text</p> (FIGURE 3.2).

   

2. Save the file as tag.html.

3. Double-click the file to open it in your browser (FIGURE 3.3).

   

4. Back in the editor, replace <p> with <h1>.

5. Replace </p> with </h1> (FIGURE 3.4).

   

6. Save the file.

7. In the browser, refresh the page to see how the text changes size and style (FIGURE 3.5).

   

<p lang="en">This is a paragraph.</p>

Adding Comments

Finally, it’s considered a best practice to annotate your HTML code with information about the code itself by adding comments. You can do this to label sections of the code or to explain the purpose of individual pieces of code. These comments are helpful when you revisit the code later to update it, or especially when someone else works on the code.

Comments don’t appear on the page when it’s rendered in a browser. This is useful during development, because you can “comment out” a piece of code to try out the effect of turning it off temporarily without actually deleting it from the file.

To add comments to HTML:

1. In your HTML file, find the spot where you want the comment to start and type <!--.

2. Do one of the following:

   If you’re adding a comment, type the text of the comment followed by -->.

   If you’re commenting out existing code, place the insertion point at the end of the code and type -->.

See CODE 3.1 for an example of commented code. FIGURE 3.6 shows the rendered page.

Structuring an HTML Page

Now that you have a basic understanding of how HTML tags work, you need an understanding of the structure of an entire page. The essential components of a standard HTML page can be distilled into a boilerplate file. You can use this boilerplate file as a template for new HTML documents (FIGURE 3.7).

These components should exist on every HTML page:

• A DOCTYPE declaration (to tell the browser what version of HTML we’re using) as the very first line.

• An opening <html> tag. All other tags on the page will be placed between the opening and closing html tags.

• Opening and closing <head> tags.

• Opening and closing <body> tags.

• A closing </html> tag ends the document. Nothing should come after that.

<html>, <head>, and <body> tags

Aside from the DOCTYPE, three different tags define the overall structure of a webpage:

• The <html> tags mark the opening and closing of the entire document. Every other tag (aside from DOCTYPE) will go between these tags.

• The <head> element is where information about the page goes. In most cases, none of this information will be displayed in the browser window.

• The <body> element is where all the page content goes. If there’s text between the <body> and </body> tags, it will likely be displayed to the user.

There are some exceptions to these rules about the <head> and <body> and what gets displayed. A good example for the <head> is the <title> element. The <title></title> tags go in the <head> and define the text that gets displayed in the tab of your browser (FIGURE 3.8).

The <meta> Tag

The <meta> tag, much like the <title> tag, belongs in the <head> of the document. However, unlike <title>, this displays no information to the user.

Instead, the <meta> tag is used to send information about the web page to search engines. Its most common attributes are name and content, which are used for name-value pairs. One example of this is to provide the description of a document:

Click here to view code image

<meta name="description" content="A basic HTML boilerplate file.">

A list of common values for the name attribute are:

• author: Defines the name of the author of the document

• description: Provides the description of the document that should show up in search engine results

• color-scheme: Determines whether a page supports dark mode on devices that allow it.

• viewport: Gives information about the initial size of the document. This is used on mobile devices only.

• robots: Determines whether the document should be included in search engine results.

To create an HTML boilerplate file:

1. Create a new file in your text editor.

2. Type <!DOCTYPE html>.

   This is the DOCTYPE declaration. In HTML5, just “html” is used. In older versions, the definition is a bit more verbose.

3. Type <html> to start the document.

4. Type <head>.

5. Type <title>HTML Boilerplate</title>.

6. Type <meta name="author" content="your name">.

   Be sure to replace your name with your own name.

7. Type </head>.

8. Type <body>.

9. Type </body>.

10. Type </html> to close the document.

11. Save the file as boilerplate.html in your website folder.

What Is Semantic Markup?

As you’ve learned, the tags tell the browser the kind of content being presented. But why is that important?

By using the appropriate tags, we’re describing our content—to the user, to the browser, and to search engines and other computer-based processors. This allows each to interpret the information the way they see fit. This could mean displaying it in a certain color, or highlighting it in specific search results.

For example, Google displays site navigation directly in search results, as long as the appropriate semantic tags are used (FIGURE 3.9).

In short, semantic markup means our webpage is more accessible to everyone. It can be more easily translated for international visitors, and assistive technology (like screen readers) can understand its content better.

Wrapping Up

HTML tags are the building blocks of the web. They create structure and assign meaning to our text. This helps everything and everyone who visits your webpage understand it better.

Now that you have a basic understanding of how HTML works and why we should use it, let’s use it for our most common task: formatting content.

HTML Text Formatting

If you’ve created text in Word or Google Docs, you’ll know that formatting can be done with the press of a few buttons. Select the text and choose a style from the menu, and formatting is applied. White space is added between paragraphs and headings, bullets are added to unordered lists, you can change the color of text, and more.

It’s not quite like that in HTML. If you just write text in an HTML document, there will be no formatting. All the text will run together, new lines will be ignored, and certain characters will not display properly.

While browsers do use a default style sheet to format all HTML elements, we still need to use HTML to describe every piece of content on the page. Without the HTML, the browser won’t know what kind of text is on the page.

So let’s start with the most common elements: headings and paragraphs.

Paragraphs and Headings

You were introduced to paragraphs in the last chapter. They are blocks of text that generally contain one idea, in one or more sentences.

To create paragraphs:

1. Open the boilerplate.html file and save it as chapter4.html.

2. On a new line after the opening <body> tag, type <p>.

3. Type This is a paragraph!.

4. Type </p>.

5. On a new line, type <p>This is another paragraph.</p>.

6. On a new line, type <p>This is a third paragraph.</p>.

7. Save the file, then open it in your browser.

   You’ll end up with what you see in FIGURE 4.1.

Headings are slightly different. HTML allows for six levels of headings, with Heading 1 (<h1>) being the most important and Heading 6 (<h6>) the least important (FIGURE 4.2).

The principal role of headings is to create a visual hierarchy on a page. Paragraphs should be organized into sections, with headings at the top of those sections.

Headings also add meaning to the text—meaning that’s important to search engines.

Semantically, there should only be one Heading 1 on a page. As we move down the page, we should make sure to keep our headings in the right hierarchical order.

The smaller the heading number, the bigger the idea it should represent. So <h2> tags should represent only the big ideas on a page.

Lists

After paragraphs and headings, the next most common element you’ll find in text is a list. If you look back at a Word or Google Doc you’ve done recently, you’ll likely find bulleted lists show up at least a few times.

There are two different types of lists you can create in HTML: ordered and unordered.

Ordered lists (by default) are prefixed by numbers. Unordered lists have bullets () prefixed.

Depending on the type of list you want to create, use an <ol> tag (for an ordered list) or a <ul> tag (for an unordered list). Between the opening and closing tags, each item on the list will be enclosed in <li> tags (for list item).

To create an unordered list:

1. In your HTML file, type <ul> to begin the list.

2. Type <li>Apples</li> to create the first of three items on the list.

3. Type <li>Bananas</li>.

4. Type <li>Cherries</li>.

5. Type </ul> to end the list.

   And in FIGURE 4.3, you see how it looks.

Quoting a Block of Text

Traditionally, in printed material, quotations of substantial amounts of text are set apart from the surrounding content by indentations or changing the type style. HTML includes the block-level element <blockquote> (which conveniently contains “block” in its name) to accomplish the same thing in the browser. By default, <blockquote> elements are indented compared to other block elements, but you can use CSS to change the indentation.

To provide a source for the quotation, include the cite attribute with the URL of the source as its value. You can also use the <cite> element to give the title of the source in text (CODE 4.1, FIGURE 4.4). It’s normally styled in italics by the browser, but you can change that with CSS. If you wish to provide a link to the source as well, combine the <cite> element with an <a> element.

To quote a paragraph with citation:

1. Type <blockquote>.

2. Type <p>.

3. Type the quote.

4. Type </p>.

5. Type <cite>.

6. Type the source of the quote.

7. Type </cite>.

8. Type </blockquote>.

Formatting Text Inline

The last of the basic elements we’ll cover are inline elements—that is, elements that are used inside other elements.

Paragraphs, headings, and lists are “block-level” elements. They are self-contained sections that start on a new line and take up the entire width of the container. But inline elements do not start on a new line and are only as wide as the content. An example is the <strong> tag.

In the following task you'll create a short paragraph (a block element) and change the formatting of some of the text in the middle of it (an inline element).

To bold text with the <strong> tag:

1. Type <p>We use the strong tag to.

2. Type <strong>draw attention</strong>.

3. Type to text by bolding it.</p>.

   You can see the result in FIGURE 4.5.

Notice that the <strong> tag is inside the <p> tag but still inline with the text. And by default, the browser bolds <strong> text. However, there’s another benefit to using the <strong> tag. It tells browsers and search engines that this text is slightly more important than the normally formatted text.

The catalog of tags for formatting inline text is extensive; here are the most common ones (FIGURE 4.6):

• <em> is used for emphasis. It shows as italicized text. Use the <i> tag if you want to set the text apart without semantically noting “emphasis.”

• <u> is used to underline text. It shows as text with a line drawn under it.

• <s> is used to cross something out because it is no longer correct. It shows as text with a line through it. You may also come across <strike> in older code, but it’s now been replaced by <s>.

• <del> looks similar to <s>, but lends a slightly different meaning to text. <del> marks something that has been deleted from the original document.

• <ins>, which is usually underlined by default, notes something that has been inserted into the document.

• <mark> is used to highlight text. It adds a yellow background to text, as if a highlighter pen has been drawn across it.

• <small>, which renders text smaller than the default size, is used for notes, side comments, and fine print.

• <sup> is superscript, and makes text appear smaller and raised slightly above the baseline. This is often used for exponents, or bibliographic citations.

• <sub> is used to display subscript text. Like <sup> reduces text size but is lowered below the baseline than normal text.

• <time> represents a specific time and is often combined with the datetime attribute to convert human readable time into a machine-readable format.

  You’ll find a list of valid datetime values here: developer.mozilla.org/en-US/docs/Web/HTML/Element/time.

• <abbr> represents an abbreviation and is usually rendered with a dotted underline. You can include the fully expanded version of the abbreviation in the title attribute, which is usually displayed in a tooltip on mouseover.

• <br> creates a line break. It’s useful for situations when you want to make lines a specific length, as in poetry or in a mailing address.

Marking Up Code

There are also two HTML tags specifically used for marking up code:

• <code> is displayed in a monospace font and is used to represent a short snippet of computer code.

• <pre> is also displayed in a monospace font and represents preformatted text. That means any text, including white spaces, appears exactly as it was typed.

If you need to display multiple lines of code, place the <code> element inside a <pre> element. The only time you should use <code> by itself is for an inline element (CODE 4.2, FIGURE 4.7).

Wrapping Up

With that, you have the basics down. You know how to format text and create a nice visual hierarchy in the browser. This will make your website much easier to read. Now let’s talk about what makes the web … well, the web: hyperlinks!

Link Markup

A link (or hyperlink) is a way to connect one webpage to another. Links also allow users to jump to a different section of a webpage, download documents, and more. To distinguish them visually from other webpage content, textual links are usually given a distinctive appearance, using color (typically blue for a link that has not yet been visited), special text formatting, or both.

Links are represented in HTML by the <a> (or anchor) tag. The <a> tag is one of those HTML tags that can include a number of attributes.

In this case, the link takes users to a page on a different website, so we need to include the attribute href, for hypertext reference. The value of the href attribute is the URL (Uniform Resource Locator) of the destination—the page you’re linking to. The enclosed content of the <a> element is typically some label text—usually the name of the page the link will take the user to. This label is the only part of the link that the user sees.

Let’s see how to set up the markup for a link to Google.

To create a hyperlink:

1. In your HTML file, type <a to start the anchor element.

2. Type href="https://google.com"> to define the destination of the link.

3. Type Visit Google to provide a label for the user to click.

4. Type </a> to finish the link (FIGURE 5.1).

   

5. Save the file and view it in your browser (FIGURE 5.2).

   

While the markup for a link may look straightforward, there are several nuances to creating links. Key to creating links is understanding how URLs are structured.

URL Structure

At this point, it’s worth taking a closer look at URLs. In FIGURE 5.3, you’ll see the components of a common URL.

URLs are made up of these sections:

• The protocol (either http or https).

• The subdomain (optional).

• The name of the website.

• The top-level domain (or TLD). This is also known as the extension.

To link to a specific file within a site, you need to provide these items as well:

• The path (folder hierarchy) containing the file.

• The file name.

In order to reach a website at all, you need to provide at least these three parts of the URL: the protocol, the name, and the TLD. Paths, subdomains, and file names need to be included only when you want to reach those specific areas of the website.

Ultimately, where a link sends your users is based on what kind of URL—or how much of the URL—you include.

First, let’s look at how linking to pages within your website compares with linking to pages outside your website.

Internal vs. External Linking

This concept is pretty clear. Internal links are links to pages within your own website (or on the same domain). External links are links to someone else’s webpage.

As far as markup goes, internal and external links use exactly the same structure, except (as you’ll learn later in this chapter) external links are always absolute. That is, they need to include the entire URL, including the protocol. If one of those items is missing or incomplete, the link will not work.

If you’re linking internally, there’s something else to consider: you don’t always need to include the entire URL, because it’s implied. This is the result of the difference between absolute and relative links.

Relative vs. Absolute Linking

Back in Chapter 2, you learned about file structures and how websites are organized (FIGURE 5.4). You also saw how URLs incorporate part of a file’s directory structure. When we talk about relative versus absolute linking, we’re talking about how much of the URL and directory structure we want to include.

With an absolute link, you include the entire URL in the anchor element markup. Always use an absolute link when linking to an external site, but you'll usually use relative links for files on your own site.

Say you want to link to a specific file called cart.html on the website mysite.com. You’ll need to know the location of the file in the site’s directory structure to link to it. If cart.html is in a top-level folder (i.e., a folder in the root directory) called /store/, then the absolute link for this file is https://mysite.com/store/cart.html.

Relative links, on the other hand, don’t include the complete URL of the location you’re linking to. The structure of the link markup is based only on where the linked file is relative to the current file. So relative links are commonly used to link within pages on a single website, whose files share one common directory.

There are several different types of relative links we can create, as shown in TABLE 5.1.

• Same folder: The linked file is in the same folder as the linking file. The relative link would just be the file name (e.g., file.html).

• Child folder: The linked file is one folder down from the linking file (in other words, in a folder contained in the linking file’s folder). The relative link starts with a forward slash (/), then includes the folder name, another forward slash, and the file name (/folder-name/file.html).

• Parent folder: The linked file is one folder up from the linking file. The relative link would be two periods and a forward slash (../) and then the file name (../file.html).

  These patterns can be repeated for any number of folders. So if a file is three folders up from the current file, the relative link would be ../../../file.html. And there can be great-, great-great-, great-great-great-grandchildren, and so on.

Looking at our example website again, to make a link from the home page (mysite.com/index.html in the root directory) to cart.html, you could use a relative link. Since cart.html is in the child folder /store/, we could link to it using a relative path: /store/cart.html.

To create a relative link:

1. In your website folder on your computer, create a new folder called images.

2. Go to unsplash.com and download any image you’d like. Save it into the images folder you just created and name the image file unsplash.jpg.

3. In the website folder, make a duplicate of the file boilerplate.html and rename the new file 5.html.

4. Open the file 5.html.

5. Right after the opening <body> tag, type <a href=".

6. Type /images/unsplash.jpg">.

7. Type Check out this image!.

8. Type </a>.

9. Save the file and open it in your browser.

10. Click the link to display the image in the webpage.

Other Types of Links

Aside from internal and external links, here are two other types of links you can add to a webpage. You can link to a specific section of a page, and you can link to other applications, like email.

<a href="mailto:joe@casabona.org">
→Email Joe</a>

Link Targets

Before we wrap up the chapter, there’s one more attribute you should know about, and that’s target.

You’ve likely browsed websites on which the links opened in new tabs or windows. A common reason is that the webpage author hopes the user will close the new tab when they’re done and return to their site.

That’s achieved by using the target attribute and the value blank. For example, to open casabona.org in a new tab, use this link:

Click here to view code image

<a href="https://casabona.org"
→target="_blank">Link that opens in a
→new tab</a>.

To create a link that opens in a new window:

1. In your HTML file, type <a href= "https://google.com".

2. Type target="_blank">.

3. Type Visit Google</a>.

4. Save the file.

5. Open the file in your browser and click the link to see it open the home page of google.com in a new window.

While it’s considered best practice to open links in the same window, there might be legitimate reasons to send the user to a new window. If you do decide to open links in new windows, you should at least let the user know what to expect. You can do so by adding simple text (like “new window”) to the link label or by adding an icon, as shown in FIGURE 5.5.

Wrapping Up

With your knowledge of formatting, organization, and now linking, you’re ready to move into the structure and layout side of HTML.

In the next chapter, you’ll learn about the building blocks that are used to lay out a webpage.

Webpage Layout

If you’ve been to any website, you’ll know that the items on a page are grouped into areas with specific functions, such as a header, a footer, a main area (which can contain several elements), and a sidebar. As an example, take a look at the home page of the New York Times with a box drawn around each item (FIGURE 6.1).

Each of these boxes is an area defined in HTML and styled with CSS. But the browser knows how to arrange the areas thanks to the HTML elements used to define them.

If you’d like to see how a page is structured in the Chrome browser, you can do so using the Web Developer extension. This extension adds a number of developer-friendly tools to Chrome, including options for drawing an outline around individual webpage elements.

You’ll start by downloading the extension from the Chrome Store and installing it.

To outline webpage elements in Chrome:

1. Open the Google Chrome web browser and go to the Extensions section of the Chrome Store: chrome.google.com/webstore/category/extensions (FIGURE 6.2).

   

2. Enter Web Developer into the Search field and press Return/Enter. The page displays the results of the search (FIGURE 6.3).

   

3. Find Web Developer by chrispederick.com in the results (it should be near the top) and click it to load its page into the browser (FIGURE 6.4).

   

4. Click the Add To Chrome button and follow the installation instructions.

   When the installation is complete, you’ll notice a new cog icon in the toolbar .

5. Click the cog icon. A tabbed set of controls appears.

6. Click the Outline tab. A menu lists sets of elements that can be outlined (FIGURE 6.5).

   

7. Click to select the elements you want to outline. Outline Block Level Elements is a good starting point, so select that item in the menu.

   An outline is drawn around each block-level element on the page (FIGURE 6.6).

Block vs. Inline Elements

Chapter 4 touched on this a bit, but there are essentially two kinds of HTML elements: block elements and inline elements. The best way to think about them is by how much page width they take up.

Block elements take up the full available width, thus creating their own block on a page. Style-wise, each element fits into the box model and has its own spacing. A paragraph is a block element (FIGURE 6.7).

Inline elements, on the other hand, take up only the width they need. Again, looking at this stylistically, by default there is no spacing applied directly to inline elements. <strong>, <em>, and <a> are all inline elements (FIGURE 6.8).

All the elements that we consider “layout elements” in the next section are block elements.

Page Sections

Before diving into the actual elements, it’s important to define (at least loosely) the areas that will be included in the page design. A good way to get an idea of a page’s design and layout is to sketch out a wireframe. A wireframe is a blueprint or a general framework of a webpage. Its focus is on content priority and lacks the niceties of visual design, like text styling or colors. In short, it should tell us where content and elements go. A typical webpage layout includes a few basic areas (FIGURE 6.9).

Now that you have a better understanding of how a page is laid out, here are the seven HTML elements that define these areas.

Lists for Navigation

Over the years, the use of unordered lists for navigation has been hotly debated. There are several arguments for and against.

The recommendation here comes from the HTML5 specification explicitly using lists in their nav examples (html.spec.whatwg.org/multipage/sections.html#the-nav-element) and from accessibility experts stating their importance in relation to screen readers.

Several years ago, CSS-Tricks published an article about it that garnered a lot of strong opinions. Their postmortem on the article is a great summary of the pros and cons of lists in nav: css-tricks.com/wrapup-of-navigation-in-lists/.

A simple site navigation element might have links to the home, about, and contact pages (FIGURES 6.10 and 6.11).

To create simple site navigation:

For this task, assume there are three pages: a home page (index.html), an about page (about.html), and a contact page (contact.html).

1. Type <nav to create the opening of the navigation element.

2. Type the attribute role="main" because this will be the page’s primary navigation element.

3. Type > to close the opening tag.

4. Type <ul> to begin the unordered list of links to other pages in the site.

5. Create a navigation item for the home page by typing

   <li><a href="index.html">Home </a></li>.

6. Do the same for the about page; type

   <li><a href="about.html">About </a></li>.

7. Add the last link, for the contact page. Type

   <li><a href="contact.html"> Contact</a></li>.

8. Type </ul>.

9. Type </nav>.

Building a Blog Article Layout

Now that you have all the building blocks (pun totally intended), you can put together a simple blog article page (CODE 6.1). Anything not relevant to this chapter is omitted and replaced with three dots (...).

To create a page header:

1. Type <header to open the header tag.

2. Type role="banner".

3. Type > to close the opening header tag.

4. On a new line, type <h1 id="site-title">Welcome to my Site!</h1>.

   We’ve added the ID site-title to tell browsers and search engines “this is the name of the site.”

5. Add the navigation created earlier in this chapter.

6. Type </header> to close the page header tag.

To create the main article section:

1. Open the wrapper for the content by typing <div class="wrapper">.

   You’re opening the wrapper div element here, but you’ll close it when we create the <aside> element.

2. Open the main section by typing <main>.

3. Type <article>.

4. Type <header> to open the article’s header.

5. Add a headline using the <h2> tag: type <h2>10 Reasons HTML is so great!</h2>.

   Use an h2 tag here because the site title should be the only h1 on the page.

6. Type </header>.

7. Type all of the content for the article. This should include text like paragraphs, lists, images, and hyperlinks.

8. Type <footer> to open the article’s footer.

9. The publish date will go here. Type <p>Published March 6 at 11:06pm</p>.

10. Type </footer>.

11. Type </article> and then </main> to close out the rest of the elements.

To create a sidebar:

1. Type <aside>.

2. Type the heading <h3>Related Articles </h3>.

3. Created an unordered list of articles. Type <ul>.

4. Add the first item: type <li><a href= "/articles/css.html">Wait until you see CSS</a></li>.

5. Add as many related articles as you’d like.

6. Type </ul>.

7. Type </aside> to close the aside element.

8. Type </div> to close the wrapper div.

To create a site footer:

1. Type <footer>.

2. Add one paragraph for the copyright line. Type <p>Copyright [YOUR NAME]</p>.

3. Type </footer>.

For the complete markup, see Code 6.1. To see the page rendered in a browser, see FIGURE 6.12.

Wrapping Up

You now have the basic HTML elements that are necessary to semantically lay out a page. You can find a complete list of semantic elements available in HTML5 at www.w3schools.com/html/html5_semantic_elements.asp.

Up until now we’ve focused a lot on text and how it’s laid out. Now let’s turn our attention to something more visually appealing: media.

How Does Media Work on the Web?

The nice thing about using media on a webpage is that all you have to do is store the media files on your web server and insert links to them into your HTML files. The browser will know how to open most common forms of media (FIGURE 7.1).

But if you use HTML tags to tell the browser the type of media you’re linking to, you can display that media directly on the page—without having to open separate windows or applications (FIGURE 7.2).

This is known as embedding the media file. The media can be viewed, watched, or listened to without the user leaving the page.

Thanks to features of HTML5, you can tell the browser how to handle images, video, and audio. You can embed them directly into the page, and even give some instruction on how to display or control them—play, pause, mute, rewind, and more.

Other forms of media, like Microsoft Word documents, PDFs, and presentation software slide shows, can be linked in the browser but not embedded. The browser will rely on another program on the device to handle opening the file.

Images

Chances are that of all the types of media, you’ll work with images the most, so that’s a fantastic starting point.

Types of images

There are lots of different types of image that can be stored in a variety of file formats; these formats serve different purposes. For example, the most common type of image used on webpages is photos. They are typically in JPEG format, which compresses them so that their file sizes are not gigantic. Simple animated images will be in GIF format. Lightweight graphics will often be in PNG format; they can use transparent backgrounds. And more complex graphics that need to be displayed at several different sizes are usually in scalable vector format (or SVG). You can resize SVGs without worrying that you will lose image quality.

The types of images supported in HTML are determined by the browser, and as a result, certain file types will work only in certain browsers.

The most common image types will work in all browsers: JPEG, GIF, PNG, and SVG. These images use the file name extensions .jpg, .gif, .png, and .svg, respectively (FIGURE 7.3).

Adding Images to a Page

Once you’ve got the images you want to use in the right format, it’s time to add code to your HTML to insert the images into the page’s flow. Next, you’ll learn about two elements you can use to place an image on a page: <img> and <figure>.

The <img> tag

For all supported image types except SVG (that’s coming later), you will use the image embed tag <img>. This tag is unique because in addition to requiring an attribute (src), it has no end tag. Here’s some sample markup:

Click here to view code image

<img src="space.jpg" alt="A view
→of the Andromeda Galaxy"
→title="A view of the Andromeda
→Galaxy" />.

All images should also include an alt attribute, whose value is text that describes the image. While this isn’t required for the tag to work, it is required to make your website accessible (for more on website accessibility, see Chapter 24).

The title attribute can also include this text. The main difference (besides semantic meaning) is that the title will appear in a tool tip when you hover over an image (FIGURE 7.4).

To add an image to a webpage:

1. Type <img to open the image embed tag.

2. Type src= followed by the path to the image. In this example, type "space.jpg".

3. Add the alt and title attributes. Type alt="A view of the Andromeda Galaxy" title="A view of the Andromeda Galaxy".

4. Close the img tag by typing />.

5. Save the file and open it in your browser to see the result (Figure 7.2).

The <figure> tag

If you want to make meaningful additions to the flow of your page, or group an image with a caption, you’ll use a figure with an optional caption element. Its tag is <figure>, and to associate a caption with it you insert the element <figcaption> inside it. The structure looks like this:

Click here to view code image

<figure>
    <img src="space.jpg" alt="A view
    →of the Andromeda Galaxy" />
    <figcaption>A view of the
    →Andromeda Galaxy</figcaption>
</figure>

Note these points about the use of the figure tag:

• You can put more than one image in a <figure> tag if they make sense together in context.

• Everything inside the opening and closing <figure> tags creates a single, self-contained unit.

• Since figures are self-contained, you should be able to move a figure up or down on a page without changing the meaning of the page.

That last point also means that not all images are figures.

To add a figure to the page:

1. Type <figure> to open the figure element.

2. Add the image from earlier, without the title attribute. Type <img src="space.jpg" alt="A view of the Andromeda Galaxy." />.

3. Type <figcaption>A view of the Andromeda Galaxy.</figcaption> to add a caption to the image.

4. Type </figure> to close the figure element.

5. Save the file and open it in your browser (FIGURE 7.5).

Responsive Images: Considering Different Devices and Connections

One of the biggest issues with adding images to webpages is that, depending on the file size of the images, they can unnecessarily bloat the site and make it very slow to download. Here’s an example: the full size of the space image is 6200×6200, coming in at 4.2MB (4200KB).

If we resize it to 1920×1920, 30 percent of the original size, the file size is 415KB. That’s 9 percent of the original file size!

That size difference will have a considerable effect on the time it takes to download the page, and it will have little to no effect on how most visitors see the image; 1920 pixels is still overkill if you consider that most mobile screen sizes are considerably smaller.

However, you might wonder what happens if someone is viewing the page on a big monitor or even a TV, where they would rather take advantage of the full size of the screen. That’s where the srcset attribute comes in.

This attribute tells the browser that it has a range of image files to choose from when rendering the <img> element.

Here’s an example:

Click here to view code image

<img srcset="
    space-original.jpg 4x,
    space-large.jpg 3x,
    space-medium.jpg 2x,
    space-small.jpg 1x"
src="space-medium.jpg" />

Note that src is included to provide a fallback for browsers that don’t support srcset yet.

Within the srcset attribute, include a comma-separated list of different images (or the same image at different sizes). For each image, provide its path as well as a relative size value (that is, 4 times, 3 times, etc.) notated as 4x, 3x, etc. (Note that 1x is implied and not required).

These numbers represent the pixel density of the user’s browser (the number of pixels available in a chosen area of the display), and they tell the browser how to choose which image to download and serve to the user depending on the device’s pixel density. If the device has a very high pixel density, it can choose to display the 4x image. If its display has a lower resolution, it might download and display only the 2x or 1x image. This will save on load time and bandwidth.

Alternatively, you can specify the image widths in pixels instead of expecting the browser to use pixel density to decide which file to use. So you would replace 4x with 6200w (6200 pixels is the original image’s width), 3x could be replaced with 4650w, and so on. This gives the browser more information about the image, so it can replace the images while taking into account both the characteristics of the device and the image width.

To add an image using srcset:

1. Create three sizes for your image: 1024, 800, and 600 pixels wide.

   See Video 7.5 to learn how, if you need to.

2. Save them in the same folder as your HTML file.

   For the purposes of this task, name the images following the pattern space-[size].jpg, which gives us space-original.jpg, space-1024.jpg, and so on.

3. In your HTML document, type <img srcset=".

4. On the next line, type space-original.jpg 6200w,.

5. Press Return or Enter, then type space-1024.jpg 1024w,.

6. Press Return or Enter, then type space-800.jpg 800w,.

7. Press Return or Enter, then type space-600.jpg 600w".

8. We also need a fallback for older browsers that don’t support srcset. Type src="space-1024.jpg".

9. Type /> to close the image tag.

The <picture> Element

If you want more fine-grained control of when images show up, you could use the <picture> element. It’s very similar to using srcset, but the markup is a bit different.

One thing it makes use of is media queries, which you’ll learn more about in Chapter 17. The quick explanation is that you can use CSS to get information about the browser, like screen width, and then adjust the display of your website based on that information.

To use the <picture> element to show different images:

1. Create three sizes for your image: 1024, 800, and 600 pixels wide.

   See Video 7.5 to learn how to create these versions of your image if you need to.

2. Save them in the same folder as your HTML file.

   For the purposes of this task, the images will be named following the pattern space-[size].jpg, which gives us space-original.jpg, space-1024.jpg, and so on.

3. In your HTML document, type <picture>.

4. On a new line, type <source.

5. Type media="(min-width: 1025px)".

   This is the media query. It says, “If the browser has a minimum width of 1025px, use this image.”

6. Type srcset="space-original.jpg">.

7. On a new line, type <source media="(min-width: 801px)" srcset="space-1024.jpg">.

8. On a new line, type <source media="(min-width: 601px)" srcset="space-800.jpg">.

9. On a new line, type <img src="space-600.jpg" />.

   This serves as a fallback in two cases: for browsers that don’t support the picture and source elements, and for when every media query returns false. In this case, it’s for when the browser window has a width of 600px or smaller.

10. Type </picture>.

Ultimately, there’s no major difference between srcset and picture, except that srcset does a bit more of the work for you; srcset is the method more commonly used today.

Using SVG

If you can use Scalable Vector Graphics (SVG), that would go a long way in saving you on file size. But SVGs may not be as straightforward to use, mostly because they have to be designed in a program like Adobe Illustrator.

SVGs are best used for illustrations or logos and can’t be used for photographs (FIGURE 7.6). These are computer-generated graphics that are more abstract than photographs, which accurately depict real life. Illustrations and logos can be described as rules more efficiently.

The reason for that is the same reason they scale so well: the image data is stored not as pixels, but by mathematical instructions for drawing the image. That means that if you resize the image, the display pixels are recalculated for the resolution of the screen. So the image is sharp and crisp at any size, without pixelation. See FIGURE 7.7 for an example of the source code for Figure 7.6.

Another nice thing about SVGs is that they can be treated like any other image, using the img tag. Here’s the HTML for including Figure 7.6 on a webpage:

Click here to view code image

<img src="rocket.svg" alt="my rocket
→ship" />

But when you add a size to it, the graphic scales appropriately (FIGURE 7.8):

Click here to view code image

<img src="rocket.svg" width="9001px"
→alt="my rocket ship" />

You can also add an SVG directly to a webpage using the <svg> tag. Here’s what that could look like:

Click here to view code image

<svg>
  <circle cx="100" cy="100" r="50"
  →fill="red" />
</svg>

The result is shown in FIGURE 7.9.

To use SVG to draw a square:

Here, you’ll make a blue square.

1. Type <svg id="square">.

   The id can be anything. I used square to clearly describe what is being drawn.

2. On the next line, type <rect.

3. Type x="0" y="0".

   This tells the browser the starting coordinates of the shape. In this case, you want the shape to be in the upper-left corner of the page, so you can start at 0, 0 (as in 0 pixels to the left, and 0 pixels down). I encourage you to experiment with these numbers to see what they do.

4. Type width="100" height="100".

   This sets the dimensions of the square.

5. Type fill="blue".

   This defines the color of the fill.

6. Close the rect element by typing />.

7. Close the SVG by typing </svg>.

See the resulting image in FIGURE 7.10.

Other Media

Aside from images, you can embed videos and audio directly into a webpage. In this section, you’ll learn not only how to do that, but also the kinds of video and audio files that can be displayed by common modern web browsers. You’ll also learn about factors to consider when storing large media on your server.

Embedding Video

You can embed a video on your webpage with the <video> element. There are a few attributes to know as well: width, height, and controls. The controls attribute has no value, but adding it tells the browser to include the play, pause, and volume buttons (FIGURE 7.11).

Between the opening and closing <video> tags, you need to include the video source.

Luckily, you can add multiple video sources (which can use different formats), and the browser will pick the best one.

You should always include an MP4, since that is supported by all browsers.

To embed a video on a webpage:

1. Type <video.

2. Type width="800px".

   You can skip the height attribute since the browser will intelligently resize the video to the appropriate height based on the width.

3. Type controls>.

4. Type <source src="moon.mp4".

5. Type type="video/mp4">.

   This is not completely necessary in modern browsers, but it’s still good to include, especially if you use multiple sources.

6. Type </video>.

The final result is what you see in Figure 7.11.

Embedding Audio

Adding audio to a webpage is very similar to adding video. The HTML is formatted exactly the same, except you’ll use the <audio> tag instead of the <video> tag:

Click here to view code image

<audio controls>
    <source src="small-step.wav"
    →type="audio/wav">
    <source src="small-step.mp3"
    →type="audio/mp3">
</audio>

To embed audio on a webpage:

1. Type <audio.

2. Type controls>.

3. Type <source src="small-step.wav" type="audio/wav">.

   As a reminder, this relative path means the WAV file is in the same directory as the HTML file.

4. Type <source src="small-step.mp3" type="audio/mp3">.

5. Type </audio>.

The result will display a simple audio player in the page (FIGURE 7.12).

Storing Multimedia Files

Small files like images, SVGs, and PDFs can be stored directly on your server, in the same folder as your website. That’s because these files don’t require the user to interact with them and therefore are not resource intensive. In other words, they don’t require a lot of computing power (as would playing a video game), so they won’t cause stress on your website.

Multimedia—audio and video—will use considerable resources and bandwidth that your web server is likely not specialized for. This can lead to your website crashing or quickly running out of storage and bandwidth.

Instead, you should use specialized services to host your media, and then embed links to those services into your website using the embed code provided by the service. You can also get plain links (directly to an .mp3 or .mp4 file) and embed them using the audio or video element.

For video, many great services are available. Both YouTube (FIGURE 7.13) and Vimeo are free. If you need more in terms of features or control, Vimeo also offers paid plans (FIGURE 7.14).

For hosting audio, things are a little tough. SoundCloud is a popular free option, but it comes with limitations. Podbean is a podcasting service that has a free tier, but you’re probably better off paying for a service.

Libsyn is a great audio hosting service that starts at $5 a month (FIGURE 7.15).

Any of these services will save you time and bandwidth (and probably a little strife too).

To embed a YouTube video on your site:

1. Go to YouTube.com and find a video you’d like to embed.

2. Click the Share button () to open the Share dialog (FIGURE 7.16).

3. Click Embed. The Embed Video dialog opens (FIGURE 7.17).

4. Copy the code in the top half of the dialog (it starts with <iframe and ends with </iframe).

5. Open your HTML file.

6. Paste the embed code you just copied into the HTML file after the opening <body> tag, and save the file (FIGURE 7.18).

7. Open the HTML file in a web browser.

   You should see your YouTube video appear on a webpage as shown in FIGURE 7.19.

Wrapping Up

Phew! That was a lot to take in—but now you know how to add all sorts of media to your website. This will make it more visually appealing and interactive, and it will add something beyond just text. After all, a picture’s worth a thousand words, right?

Tables

Tables have been used on webpages as long as there have been webpages. They are used to display “tabular” data, which is data that is presented in rows and columns (FIGURE 8.1).

Table markup

Several elements go into making a table:

• <table>: This is the parent element. All the data in the table will be wrapped in the opening and closing table tags.

• <caption>: Specifies a title or caption for the table. If included, this should be the first child element of the table.

• <thead>: This stands for “table header” and will contain the column headings.

• <tbody>: Stands for “table body” and contains the primary content (or data) of the table.

• <tr>: Short for “table row.” Each row of data goes in between opening and close tr tags.

• <td>: This is a cell of data (td stands for “table data”).

• <th>: If contained inside <thead>, th (table heading) can replace td as the table cell. Data tagged with <th> will usually appear in bold by default.

• <tfoot>: The “table footer,” this contains the table’s footer (example in FIGURE 8.2).

Sample table markup

CODE 8.1 shows the markup for a simple table that lists baseball players, the teams they were on when they retired, and their uniform numbers.

A quick note on this code: the border attribute is actually deprecated in HTML5. You should use CSS to define borders. It’s used here only so you can see the different cells in the table.

Let’s take it one section at a time, beginning with the header. Adding this header will make three columns with bold text, denoting column headings (FIGURE 8.4).

A table header and a table row will look very similar in markup, but both should be included. We’ll walk through both so you can see how a table is built. The main difference is that th cells will appear in bold.

To create the table header:

1. Type <table border="1">.

   The border attribute here would normally be excluded in favor of adding it via CSS, but it will make reading the table much easier for the purposes of this example. The 1 means “1 pixel” and it will create a border around the entire table and around each cell and header.

2. Type <thead> to begin the header.

3. Type <tr> to start the row within the header.

4. Type <th>Player</th> to enter the first of the three column heads.

5. Type <th>Team</th>.

6. Type <th>Number</th>.

7. Type </tr> to close off the row of column heads.

8. Type </thead> to mark the end of the header.

To create a table row:

1. Type <tbody>.

2. Type <tr>.

3. Type <td>Derek Jeter</td>.

4. Type <td>Yankees</td>.

5. Type <td>2</td>.

6. Type </tbody>.

7. Type </table>.

Extending rows and columns

You aren’t limited to strictly structured rows and columns. Thanks to the attributes colspan and rowspan, which accept a numeric value for the number of cells the column or row should span (or take up), you can tell the table “this cell should take up two columns” or “this cell should take up three rows”:

<th colspan="2">
<th rowspan="3">

These attributes come in handy when you want to build a more complicated table—one that mimics a baseball card, for example (FIGURE 8.5 and CODE 8.2).

Doing this takes a little bit of math to get right, but it can make your tables look better and help you align data just the way you want to.

Miscalculating the rowspan can make a trainwreck of your table (FIGURE 8.6). Since the table is expecting another cell to fill the 2019 row, the cells no longer line up and there’s a random blank space.

Similar problems arise when a column spans one too many cells (FIGURE 8.7). In this instance, the browser creates an entirely new column with a single cell to account for the overflow.

To add colspan to a table header:

1. Type <thead>.

2. Type <tr>.

3. Type <th but don’t add the closing >.

4. Type colspan="4">.

   Since the head has two columns but it’s a five-column table, this colspan should be 4—one for the cell and three for the cells that are skipped.

5. Type Aaron Judge.

6. Type <th>RF</th>.

7. Type </tr>.

8. Type </thead>.

The result is the heading you see in Figure 8.5.

Description Lists

A description list is a fantastic example of structured, defined data. It’s an element that contains a list of terms and descriptions (or definitions) for those terms. A glossary is a perfect example (FIGURE 8.8).

The markup for a description list includes three tags:

• <dl>: This is the container for the entire list. dl stands for “description list.”

• <dt>: The dt (description term) is the term being described.

• <dd>: This is the “description details.” It’s the text that describes the term.

CODE 8.3 shows you the code for the description list in Figure 8.8.

Description lists aren’t limited to definition/term lists. You can also use them for recipes, upcoming events, or dialogue (like in a script).

Semantically, a <dd> will be associated with the preceding <dt>. That means that you can have multiple <dd> elements following a single <dt>, and vice versa. If you have two <dt>s in a row, the very next <dd> will be associated with both of them.

To create an events list using a description list:

1. Type <dl> to start the list.

2. Type <dt>Opening Day</dt> to enter the first term to be described.

3. Type <dd>April 1, 2021</dd> to enter the description for the term you just added.

4. Type <dt>All-Star Game</dt> to add a new term to the list.

5. Type <dd>July 13, 2021</dd>.

6. Type <dd>Game held at Truist Park, home of the Atlanta Braves</dd> to add a second line of information about the term.

7. Type <dt>Postseason</dt>.

8. Type <dd>October 2021</dd>.

9. Type <dd>Rounds: Wild Card, Division Series, League Championship, World Series</dd>.

10. Type <dd> The winners in each league will play in the World Series. </dd>.

11. Type </dl> to close the description list.

The resulting list is shown in FIGURE 8.9.

This example shows that, by default, every <dd> is indented under the most recent <dt>, creating a nice visual hierarchy of terms and descriptions.

Why Is Structured Data Important?

You might be wondering why we need to use specific structures for different kinds of data. After all, we could easily use an unordered list for description lists.

But using the right tags to define data is important for browsers, users, and search engines. A great example of defining data in HTML is the <address> tag:

<address>
    Yankee Stadium<br/>
    1 E 161 St.<br/>
    The Bronx, NY 10451
</address>

… which renders as FIGURE 8.10.

Aside from it being italicized, there’s not much visually different about an address. You could easily use a <p> or <div>. But the <address> tag tells the browser and search engines, “This is the contact information for this page.” Even better, if the <address> tag is nested in an <article> tag, it indicates contact information specifically for that article.

What this ultimately leads to is better, more informative search results for users. Here’s what happens if you search online for “Yankee Stadium address” (FIGURE 8.11).

Without semantic meaning applied to the text (in this case, as an <address> tag), Google would have a much harder time knowing which data on the page contained the correct answer.

Using Schema.org vocabulary for custom structured data

This is a bit beyond the scope of “basic HTML and CSS,” but it’s important to know in the context of this conversation.

There are a number of different ways of annotating your structured content. By annotating your data, you help search engines better understand your page content and enable them to display your site with interesting search appearance elements. While there are several types of specifications, Schema.org is the commonly used type we’ll use in this book. These sets of markup are called schemas. Driven primarily by Schema.org, these schemas provide a vocabulary that search engines can potentially use to better understand what you’re presenting.

Common examples of schemas drive search engine results that you regularly see: information on movies and TV shows, recipes, and so on (FIGURES 8.12 and 8.13).

If you wanted to, you could create a more meaningful event list. The main driver is an attribute called itemscope, which states that the element is about a specific item. Then we’d use the attribute itemtype to get the right schema from Schema.org to go with it. We can add more information to an element with itemprop, which allows you to set item properties based on the type of data represented (e.g., events will have a date; recipes will not).

To create an event with Schema.org vocabulary:

This task uses the following markup for an event that, alas, never took place:

Click here to view code image

  <dt>Field of Dreams Game</dt>
  <dd>August 13, 2020</dd>
  <dd>Game held in Dyersville,
  →Iowa</dd>
  <dd>Yankees vs. White Sox</dd>

1. After <dt, type itemscope.

2. Type itemtype={"https://schema.org/SportsEvent">.

3. After the first <dd tag (the one containing the date), type itemprop="startDate" content="2020-08-13T19:00">.

   This is a machine-readable version of the date and time.

4. Replace Dyersville, Iowa with <span itemprop="location">Dyersville, Iowa</span>.

5. Replace Yankees with <span itemprop="awayTeam">Yankees</span>.

6. Replace White Sox with <span itemprop="homeTeam">White Sox </span>.

The resulting markup is shown in CODE 8.4.

While this doesn’t affect the display of your webpage, it gives search engines much more valuable information. You can imagine someone searching “Who is the home team for the Field of Dreams game?” Now search engines can find the answer in our tiny database.

Wrapping Up

You covered a lot of ground in this chapter, learning about important structures like tables and description lists. You also have a better understanding of structured data and its importance in creating a better, more user-friendly web.

Interacting with Webpages

Forms allow users to submit information to your website. You then have the option to store the data or otherwise do something with it. Some examples of popular web forms:

• Contact forms

• Comments

• Forums

• Login boxes

• Post boxes (on social media websites)

• Search boxes

• Checkout pages, Add To Cart buttons, and payment submissions for online stores

• Chatbots

• Popup opt-in boxes

You’ve no doubt seen lots of forms (FIGURES 9.1, 9.2, and 9.3).

How a Web Form Works

There are several steps to building and processing a web form (FIGURE 9.4):

1. Build the form using HTML.

2. Validate the form to make sure all data is submitted properly.

3. Submit and process the form.

   Processing can happen in several ways. You could simply email the contents of the form somewhere, you could store it in a database, you could use it to change your site in real time, and much more.

4. Display confirmation to the user.

Keep this in mind as you read this chapter, though: you’re learning how to build the form in HTML, and you’re using HTML elements to perform basic validation of the input data.

But with regard to submitting the data, you can’t do as much with just HTML. Submission often requires the use of another programming language, which goes beyond the scope of this book. That said, you will learn basic form processing to email the form contents. In Chapter 10, you’ll even learn a simple technique for storing the data.

Components of an HTML Form

Every form is wrapped in a <form> element, which consists of the opening <form> tag and the closing </form> tag.

The bulk of the form itself is made up of fields that can accept data from users. Most of these elements are created with <input> tags, though there are others you’ll also learn about.

The <form> Element

Every form needs an opening <form> tag and a closing </form> tag, which together define a form element. The form element requires an action attribute, and it should have method and name attributes as well:

Click here to view code image

<form name="search-form"
→ method="GET" action="process.php">

The name attribute is a simple way to uniquely identify the form (each form should have a unique name). Webpages can contain more than one form, and the name attribute allows you to easily reference the form in both CSS and JavaScript.

The method attribute determines how the form data should be sent, and can take one of two values.

GET is the default value. This method transmits data from one page to another in a URL as name-value pairs (FIGURE 9.5).

Attributes are a good example of name-value pairs. They have a name (like the role attribute) and a value (like “main”). In a URL, name-value pairs appear in this format: role=main.

When a user fills out your form and clicks Submit, the browser takes all the data from the form and then inserts it into the URL. In the above example, the URL would look something like this: process.php?name_of_field=value_the_user_input.

The other method value is POST. In this method, data is transmitted in the HTTP request and is not shown in the URL. The data is sent, in this instance, to process.php via the server.

The action attribute tells the browser where to send the form information. It’s what does the form processing, whether that’s emailing its contents or storing it in a database. If you do not include the action attribute, modern browsers will assume the current page will also process the form.

Form Fields

There are several form fields that you can define in HTML, and each allows the user to interact with the form in a different way.

Input fields

The most common tag you’ll find between the opening and closing <form> tags is <input>. This element creates a field into which users can insert data. It looks something like this:

Click here to view code image

<input type="text" name="search"
→ value="" />

Let’s take each attribute one by one.

The type attribute determines the kind of data a user can input. While text is the most common (and the default when the type attribute is not defined), there are lots of values the type attribute can have. You’ll see most of them throughout this chapter.

The name attribute assigns a name to the input field. Remember those name-value pairs from earlier? The name is derived from the name attribute. It should be unique to prevent overriding data.

The value part of the name-value pairs is derived from the value attribute. Notice that the value attribute in the above example is blank. You can add one, but whatever the user inputs will overwrite it (FIGURE 9.6).

With some form fields—namely, those that take on the appearance of a textbox (a single-line white field with gray border, which accepts a limited amount of text)—there is another attribute. Instead of setting the value attribute, you can use the placeholder attribute. This adds grayed-out text to the field, to suggest the type text that can go in the field.

If the user does not fill out the field, it will have no value (FIGURE 9.7).

Each form should also have a submit field, which has its own input type. When the browser sees this input type, it will generate a button for the user to click, in order to send the form’s data using the method and action you defined in the opening <form> tag.

Although you can set the value of a submit input type, it is immutable outside of markup, so the user cannot change it.

Putting it all together, you get this:

Click here to view code image

<form name="search-form" method="GET"
→ action="process.php">
    <input type="text"
    →name="search-term" />
    <input type="submit" name="submit"
    →value="Search" />
</form>

… which looks like FIGURE 9.8 in the browser.

If a user were to enter Atlantis into the search form, the URL would look like this:

Click here to view code image

yoursite.com/process.php?search-term=
→ Atlantis

Input types

Text and submit are not the only types of input available. You can submit data using a variety of formats (FIGURE 9.9, CODE 9.1):

• text: A single line of text.

• password: A field designed for users to add passwords or other sensitive text. This field obfuscates input, using dots to hide its contents.

• radio: A button (typically circular) usually created in groups. Only one of the buttons in a group can be selected at a time, which makes radio buttons the ideal way to offer your user a range of options from which they must choose one.

  Use the checked attribute to select a default value.

• checkbox: A set of square boxes that present the user with several options. One or more can be selected.

  Use the checked attribute to select a default value.

• email: This input type tells the browser to make sure the user has entered a properly formatted email address.

• file: A text field with a Choose File button. Clicking the button opens a file navigation dialog box the user can use to find and select a file on their computer for upload to a server.

• submit: A button that, when clicked, sends the form for processing.

• image: Works just like the submit button, but you can use an image you provide instead of the standard browser-rendered submit button.

  Due to advancements in CSS, you see this used a lot less than it once was.

• hidden: Creates a form field that cannot be seen or edited by users. This is often used to capture dynamically generated content, like a timestamp or ID. For example, on a blog post, a comment form would have a hidden field with the ID of the post so that the blog publisher knows which post the comment belongs to.

There are also a few fields that act like text fields but require specific kinds of text. They are email, date, search, tel, and url. You will learn more about them in the “Validating Forms” section of this chapter.

Labeling Fields

Although the placeholder attribute does a reasonable job of communicating the kind of information the user should enter into many form fields, there’s a better, more semantic way: use a <label> element with your <input> elements.

Click here to view code image

<div>
    <label for="first_name">First
    → Name:</label>
    <input type="text"
    → name="first_name"
    → id="first_name" placeholder=
    → "Milo" />
</div>

In the browser, this code is rendered as a text box labeled with the kind of data the user is expected to enter (FIGURE 9.10).

You’ll notice that the label has a for attribute. That attribute matches the id attribute on the input element. This tells the browser, “This label belongs to the <input> element whose ID matches the for attribute.”

Aside from improving user experience, labeling your input fields provides accessibility benefits:

• If a visitor to your site is using a screen reader, it can read the text of the label out loud when the input element has user focus (for example, when the user taps it or clicks it with a mouse).

• Because clicking the label activates the form field, the overall “hit area” for the form element is increased. This can make it easier for users with decreased mobility to activate the input fields.

Setting Up a Basic Form

Before moving on and creating examples of form inputs, you’ll write a simple form skeleton, to which you can add the example inputs you create in the rest of the tasks.

To create a form skeleton:

1. Type <form name="example-form".

2. Type method="GET">.

3. Leave a blank line between the previous line and the next line.

4. On the next line, type <input type="submit" name="submit" value="Submit" />.

5. On the next line, type </form>.

You should now have this:

Click here to view code image

<form name="example-form"
→ method="GET">

    <input type="submit" name="submit"
    →value="Submit" />
</form>

Creating Select Boxes

Select boxes are an intuitive way to allow your users to pick from a list of items. There are two ways a select box can work: as a simple dropdown menu, which allows only one option to be selected, or as a multiselect box, where several items can be selected. The following tasks will show you how to build both. Using the form skeleton you created in the previous task, insert the code you will build in the following task right after the opening <form> tag.

To create a select box:

1. First, create the label for the select box. Be sure to include the for attribute with the ID for the label. For this example, type <label for="next-movie">What movie do you want to see next?</label>.

2. Type the opening tag for the select box: <select.

3. Give the box a name and assign its ID by typing name="next-movie" id="next-movie">.

   Next, define the <option> elements that will be listed on the menu. This example uses movie titles.

4. Type <option value="Toy Story 4"> Toy Story 4</option>.

5. Type <option value="Onward">Onward </option>.

6. Type <option value="Fast 9">Fast 9 </option>.

7. Type </select>.

This creates a box that lists three options, from which the user can pick one (FIGURE 9.11).

To create a multiselect box:

1. Type <label for="seen-movies">What movies have you seen?</label>.

2. Type <select name="seen-movies" id="seen-movies".

3. Type multiple> and press Return/Enter.

   Each of the following option elements belongs on its own line.

4. Type <option value="Atlantis"> Atlantis</option>.

5. Type <option value="Snow White">Snow White</option>.

6. Type <option value="Aladdin"> Aladdin</option>.

7. Type </select>.

This creates a box that lists three options. The user can hold the Shift key while clicking to select more than one contiguous option, or they can hold Command (macOS)/Ctrl (Windows) to select multiple noncontiguous options (FIGURE 9.12).

Creating Radio Buttons

Radio buttons are another way to present a user with options and have them pick one (the select box is the first way). Once a radio button is selected, it cannot be deselected without selecting another radio button.

Using the form skeleton you created in a previous task, place the following code from the task right after the opening <form> tag.

To create radio buttons:

1. If you want to provide a title or other introductory text for your buttons, include it in a paragraph element. For this example, type <p>What is your favorite movie?</p>.

2. Type <input type="radio" name= "favorite-movie" id="atlantis" value="Atlantis" /> <label for="atlantis">Atlantis</label>.

3. Type <input type="radio" name= "favorite-movie" id="snow-white" value="Snow White" /> <label for="snow-white">Snow White </label>.

4. Type <input type="radio" name= "favorite-movie" id="aladdin" value="Aladdin" checked /> <label for="aladdin">Aladdin</label> (FIGURE 9.13).

Note the checked attribute on this input.

Notice the value of the name attribute of all three buttons is the same. That’s to tell the browser, “These buttons belong together.”

Creating Checkboxes

Checkboxes are a great way to present the user with multiple options and allow them to accept more than one. Unlike radio buttons, where the user can only choose one, there is generally no limit on the number of checkboxes a user can select.

Using the form skeleton you created in a previous task, place the following code from the task right after the opening <form> tag.

To create checkboxes:

1. Type the introductory text, if any; in this case, use <p>What movies do you want to see?</p>.

2. Type <input type="checkbox" name="want-to-see-1" id="atlantis" value="Atlantis" checked/> <label for="atlantis">Atlantis</label>.

   Note the checked attribute.

3. Type <input type="checkbox" name= "want-to-see-2" id="snow-white" value="Snow White" /> <label for="snow-white">Snow White </label>.

4. Type <input type="checkbox" name="want-to-see-3" id="aladdin" value="Aladdin" /> <label for="aladdin">Aladdin</label> (FIGURE 9.14).

Notice that the names of these checkboxes have a number appended. If they were named the same, they would all effectively represent one option because as we learned earlier, the name attribute of each form field on a page must be unique. This rule does not apply to radio buttons, of course.

Creating Email Forms

Email forms are super common online, as are inputs to capture email in general. That’s why the email input type exists. It will self-validate to make sure the user is entering an email address that’s in the proper format (but it won’t know whether the email address actually exists).

To create a simple email opt-in form:

1. Type the opening tag for the form element, making sure to include the name or id, method, and action attributes. For this example, use <form name="optin" method="GET" action="process.php">.

   Our example form includes two <input> elements, each with a label: a text input for the user’s first name, and the email input.

2. Create the label for the user’s name: <label for="first-name">First Name:</label>.

3. Type <input type="text" name="first_name" id="first-name" placeholder="First Name" />.

4. Type <label for="email-address"> Email Address:</label>.

5. Type <input type="email" name="email_address" id="email-address" placeholder="Email Address" />.

6. Type <input type="submit" name="submit" value="Join the List!" />.

7. Type </form> (FIGURE 9.15).

Special Field Types

There is a set of input types that add special controls and selectors. They offer a better way for users to insert properly formatted data. This reduces the need to take separate measures to validate and makes the input more reliable.

Date

The date input type (FIGURE 9.16) brings up a calendar for users to pick a date from (FIGURE 9.17). The browser display (what you see in the box) depends on the user’s locale (where they are located, based on what the browser knows). The date is always sent in the format YYYY-MM-DD.

<input type="date"
→ name="release-date" />

You can constrain a user’s selection to a specific range of dates by using the min and max attributes:

Click here to view code image

<input type="date" name="release"
→ min="1937-12-21" max="1992-11-11" />

Note that the min and max attributes affect the date picker, but a user will be able to manually set any date, even if it’s outside the range. This is a good use case for validation with JavaScript.

Finally, there are a few other date- and time- related inputs:

• datetime-local: This allows the user to select a date and time without including the time zone. That means that even if you’re in New York and your user is in London, you’ll both see the same date and time inputs.

• time: Allows the user to select a time with no time zone included.

• month: Allows the user to select a month and year.

• week: Allow the user to select a week number and year.

When capturing times in a form, since time zones are not supported, you’ll need to capture them a different way. You can use a hidden field for this if you don’t want the user to change the time zone (this works best for local events or appointments). If you want them to select their own time zone, you can use a select box.

Color

The color input type allows users to select a color through use of a color picker (FIGURE 9.18):

Click here to view code image

<input type="color" name="carpet-color"
→ value="#FF0000" />

The value is a seven-character code in hexadecimal format (which you’ll learn all about in Chapter 14). The default value of color is black unless you specify a different value.

Range

The range input type creates a slide controller that allows users to adjust the value of a parameter by sliding the controller along a scale. You can set min and max attributes to limit the possible range of values (FIGURE 9.19). The default values for min and max are 0 and 100, respectively.

Click here to view code image

<input type="range" name="rating"
→ min="0" max="10" />

You can also use the step attribute, which allows you to set a specific increment by which values can change. The default value is 1. The step attribute happens to be supported for date inputs as well, but it is best for imprecise values, as in a volume controller.

The <meter> Element

One pretty nifty element is <meter>, which graphically represents a value over a range. It accepts several attributes, but the ones to know about are value, min, and max. The attributes min and max are optional. If they are not specified, they default to 0 and 1, respectively, and value is a fraction. If min and max are defined, they determine the scale for value. You can see <meter> in action in FIGURE 9.21, which is generated by CODE 9.2.

Validating Forms

Validation is an incredibly important part of any form. There are three primary ways to validate forms:

• The built-in HTML5 validation for specific fields like email, URL, phone number, and more, as well as the validation attributes required and, if needed, pattern.

• You can use JavaScript to validate data when it is input by the user, especially if that data isn’t automatically validated by one of the input types. One example in the US is the zip code; they should follow a specific format, but there is no input type defined for them.

• A server-side script written in a language like PHP. Validating at this stage makes sure all data is in the right format, and that there are no malicious attempts at hacking before you process it. While you don’t need to know server-side validation for the examples in this book, once you start learning how to write server-side code, you will need to keep this in mind as you process forms.

For the purposes of this book, using the built-in HTML validation works well. As you begin to do more advanced form processing, knowing how to validate with both JavaScript and a server-side language is important.

Javascript and PHP are outside the scope of this book, but there are a couple of helpful files in the Github repo for this book.

Instead, here’s how to apply some great form validation with HTML5 only.

The most basic validation you can add is to ensure that required fields are filled out. That is as simple as adding the required attribute:

Click here to view code image

<div>
<label for=first_name">First Name*:
→ </label>
<input type="text" name="first_name"
→ id="first_name" placeholder="First
→ Name" required/>
</div>

If the required field is not filled out, modern browsers will display an error message (FIGURE 9.22).

Similarly, there is a set of input types that have automatic validation:

• email: Looks for a valid email address (FIGURE 9.23).

  

• url: Looks for a valid URL format.

• number: Looks for a valid numerical value. Using the min and max attributes will validate on a specific range:

  Click here to view code image

  <input type="number" name="age"
  → mix="13" max="150" />

• tel: Looks for a telephone number.

  This requires the pattern attribute.

The final piece of validation that can be applied in HTML is the pattern attribute. This requires knowledge of regular expressions (regex), but it allows you to supply the description of a pattern, which all input can be validated against. Here’s an example of a US telephone format:

Click here to view code image

<input type="tel" name="phone_number"
→ id="phone_number"
→ pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>

Wrapping Up

There’s a lot to know about forms, but thanks to HTML5 and advances in browser technology, you can do a lot more with plain HTML today than you could even just a few years ago.

I encourage you to experiment with all the different inputs and data types to learn exactly how they work. You’ll find that you can build some pretty impressive, and interactive, webpages.

It’s All About Browser Support

Hopefully it’s clear by now that how webpages render and work is highly dependent on the browser on which your end user views them. A page with one set of markup will render differently in two different browsers (FIGURE 10.1).

That’s a result of the fact that some browsers support new features before others, and the way a new feature is implemented in one browser might be totally different from its implementation in another.

The HTML specification (or spec) is the document that describes new features in HTML and how they should work. Then it’s up to browsers to implement that spec. Things have gotten a lot better in recent years, with browser developers working together to make sure there’s not a lot of disparity between them.

But you should still be mindful that some browsers might support new features sooner than others, and until a feature is marked as an official part of the HTML spec, its functionality could change from browser to browser.

Checking browser support with “Can I Use …”

The best place to check browser support is the website caniuse.com (FIGURE 10.2).

Caniuse.com allows you to look up an HTML or CSS tag or attribute, and it gives you a full report on how it’s used and what browsers support it. It will also give you helpful information like global usage statistics, whether some browsers provide partial support, and known issues.

Checking this site is a good idea if you want to implement something (especially for new and experimental features) and you’re not sure how widely supported it is.

<head>
    <script src="picturefill.js">
    →</script>
</head>

Advanced Elements

So what exactly qualifies as an advanced HTML element? For me, it’s any element that is supported by HTML5 but requires something extra (usually JavaScript) to work. Everything you should know about JavaScript would certainly fill more than one book, so there won’t be much JavaScript here.

The <canvas> element

The <canvas> element allows you to create drawings by writing JavaScript (FIGURE 10.3). In more advanced examples, you can even allow website visitors to use their mouse cursor to draw in real time.

This is an example of an element that requires heavy JavaScript to use. HTML5 basically gives you a way to execute JavaScript in real time to draw things, and then a set of functions to help you draw. This demonstrates how powerful HTML and the browser have become.

Adding support for offline storage

One great feature of HTML5 that has evolved as a result of its use on mobile devices is support for offline storage. This allows you to tap into the browser’s local storage and keep content there in case the user’s device goes offline (FIGURE 10.4).

Designing your website to allow offline storage also lets you store assets on the user’s device and helps the site to load faster.

While offline storage does use some JavaScript to store and retrieve data, the code is very readable. This task demonstrates the basic idea. It builds on the example you saw in the Chapter 9 section “Input fields” which gave you the code for building a search box.

To store data offline:

1. In between the opening and closing <head> tags, type <script>.

   This tag tells the browser that the following markup is JavaScript and should be processed as such.

2. Type localStorage.setItem ("lastSearch", "Atlantis");.

   In Chapter 9, you created a search box and entered the term “Atlantis.” You’re building on that same code example here.

   localStorage.setItem creates a key name-value pair. You’ll learn more about variables in a later chapter, but for the purposes of this task, know that we are storing something named “lastSearch” and it has a value of “Atlantis.”

3. Type </script>.

This produces no visible change on the webpage, but it tells the browser, “Store this, just in case you go offline.”

Retrieving information is just as straightforward.

To retrieve offline storage data:

1. After the opening <body> tag, type <div id="last-search">.

   You’re using the general-purpose div here because it’s not a specific section of the website. The id attribute provides context for what information it contains.

2. Type <script>.

3. Type document.write( localStorage. getItem("lastSearch") );.

   document.write tells JavaScript to display text in the browser for the user to see. Unlike with HTML, which will display anything that isn’t a tag, you need to explicitly tell JavaScript when something should be displayed.

   localStorage.getItem tells JavaScript to retrieve the item you stored in the last task.

4. </script>.

5. </div>.

6. Open your HTML file in the browser to view the results (FIGURE 10.5).

Experimental Features

The HTML5 spec is a living document that is constantly changing and being updated based on proposals from developers, companies, and individuals like you.

It’s often hard to nail down what new features are being worked on, what’s been accepted, and what’s going to become official.

Caniuse.com can be a good resource for this, especially the news page: caniuse.com/#info_news.

Many advanced features being developed for HTML today are application programming interfaces (APIs). These APIs, like Canvas and Local Storage, are aided by JavaScript. But there’s one fantastic feature that is as easy to implement as an attribute is.

Lazy loading

Lazy loading is a technique used to download and display only the parts of your webpage that a user sees in the browser window. This allows the browser to download only what it needs, making webpages load faster.

Traditionally this has been done with JavaScript or another scripting language. However, native support for the feature is now being added to browsers (FIGURE 10.6).

To add lazy loading to images:

1. Type <img src="space.jpg".

2. Type loading="lazy".

   This attribute is where the magic happens! You’re telling the browser that this image should be lazy-loaded. Since the browser has this information, it checks to see whether the image is showing in the user’s viewport (the browser window), and if it is, the image will be loaded.

3. Type alt="This is outer space."/>.

That’s it! Now the browser will download and display this image only if the user has scrolled to its vicinity.

Wrapping Up

With that look at some of the more advanced features of HTML, you’ve come to the end of the HTML section of this book. You can now mark up a page, display text and media, and build forms!

But that’s only half the battle. Now that you have the “function” aspect of a website down, it’s time to look at the “form” aspect: making websites look good with CSS.

What Are Styles?

What exactly do we mean when we talk about styles on websites? Back in Chapter 1 you learned how using HTML to structure a web document relates to structuring a document created in Microsoft Word.

If you’ve ever applied custom formatting to the text in a Word document, like changing the color of the text or picking a new font, you’ve applied styling to the text. Microsoft Word makes it easy to do this: just select some text and choose a menu command or click a button, and the text changes appearance! You can also style text on webpages, but there are no handy menu commands or buttons.

Word-processing applications also let you save sets of formatting characteristics that you might want to apply to more than one item; these sets are called styles. You might want all of your headings to use 20-point boldface font and be bright blue, for example. Rather than choosing those formatting options by hand for each heading, you can define the style you want for headings and apply it very easily.

Much as we write HTML code to give overall structure to a webpage, we write code of a different type to change the styling of text on a webpage. That’s where CSS (Cascading Style Sheets) comes in.

CSS uses code to define the styles that should be applied to each element in your webpage. A collection of these code statements is a style sheet, and style sheets can be stored in the HTML document they apply to or in separate text files.

CSS styles can be applied to both inline elements and block-level elements. To continue the analogy with word processors, a style applied to an inline element is akin to a character style (which applies only to specific letters or words), and a style applied to a block-level element is similar to a paragraph style (which affects an entire paragraph).

What Does Cascading Mean?

An important concept of CSS is the “cascading” part of the name. One can imagine that “style sheets” are files where the styles are defined. But what exactly does “cascading” mean?

The word might conjure the idea of a waterfall, since that’s what it’s most commonly associated with. Generally, a cascade is a waterfall that drops in successive steps.

When applied to style sheets or any information, it means that previous information is built upon or successively passed on.

In short, the “cascading” part of CSS means that styles are generally applied in the order in which they’re encountered by the browser, from the top of the style sheet to the bottom. If you define on line 1 that paragraphs should have red text, and on line 10 you say they should have green text, the paragraphs will have green text.

Why is this important?

Understanding how styles cascade is integral to styling websites as well as to troubleshooting. Not only do styles used later in a document take precedence over those used earlier, but styles can also be built upon. This is especially evident while setting font sizes.

In CSS, you can say something like “I want paragraph text to be two times bigger than the default font size.” Without understanding the cascade, you will get unexpected results in your styles (FIGURE 11.1).

With that out of the way, it’s time to learn how to write some CSS!

CSS Syntax

A CSS statement, also referred to as a ruleset, contains several parts. Here’s an example of a ruleset:

p {
    font-size: 20px;
    color: red;
}

Here you’ll find the selector followed by an opening curly brace, then the property, a colon, and the value. Taken together, the property and the value make up a declaration (FIGURE 11.2). Each declaration ends with a semicolon. A ruleset can have several declarations. It’s a good practice, for readability, to have one declaration per line.

After the declarations, you find a closing curly brace. Everything between the opening and closing curly braces is called a declaration block.

The selector is the HTML element you want to style with the CSS (this is also referred to as targeting an element). There are lots of ways to target elements. For this chapter, you should focus on using the element name (p, h1, and so on). However, as you’ll learn in Chapter 12, you can also target elements based on their attributes—most notably, their class name.

With CSS, you have a ton of flexibility to design pretty much anything you want on a website. And there’s no better demonstration of that than CSS Zen Garden (FIGURE 11.3).

The idea behind CSS Zen Garden is that several people submitted style sheets for the same HTML markup. The goal was to make the styles as different from each other as possible. If you click through the submissions, you’ll see they accomplished that goal! Bounce back to Chapter 1 to see CSS Zen Garden in action in Video 1.2.

Using CSS on Your Webpage

There are two principal ways of adding CSS to any webpage:

• As an internal style sheet in the HTML document

• As an external style sheet in a separate file

Internal style sheets

To use an internal style sheet (that is, one that’s embedded in the page that it applies to), you use the <style> tag. This is most commonly placed between the opening and closing <head> tags, but it can be referenced anywhere before the </html> tag. It will look something like this:

<style>
    p {
       font-size: 20px;
       color: red;
    }
</style>

You would use this format for one-off references—styles that apply only to the page you’re using it on.

To add CSS to your webpage using an internal style sheet:

You can use any HTML file you’ve created for this task. If you’d like a starting point you can use the file found at github.com/jcasabona/html-css-vqs/ch11/starter.html.

1. On the line before the closing </head> tag, type <style>.

2. Type the selector for the element you are styling—in this case, p.

3. Type a left curly bracket ({) to begin the declaration block.

   Next, you’ll add the properties for the size of the font and its color. Enter each one on its own line.

4. Type font-size: 20px;.

5. Type color: red;.

6. Type } to close the declaration block and the style rule.

7. Type </style>.

   The resulting markup will look something like FIGURE 11.4.

Depending on the contents of the file, the page will look something like FIGURE 11.5.

This is great if you are designing a single page or have page-specific styles. But what if you want to use styles across multiple pages? That’s what .css files are for!

External Style Sheets

You can take all of the CSS in between those <style> tags and place it in a separate file with the extension .css. You’ll then reference that file in the head of your HTML file by using the <link> tag.

If you name the file style.css, that might look something like this:

<link rel="stylesheet"
→ href="style.css" />

The <link> tag is using two attributes here:

• rel specifies the relationship between the current document and the linked document. In this case, the link is a style sheet.

• href is a relative or absolute URL.

In the actual style.css file, you will have only the CSS rulesets—no <style> tags required!

To move internal CSS to an external file:

1. In the HTML file, copy all the CSS that’s between the <style> and </style> tags.

   In the above example, it would be:

   p {
     font-size: 20px;
     color: red;
   }
   

2. Create a new file in your text editor called style.css. Save it in the same folder as your HTML file.

3. Paste the copied styles into style.css.

4. Back in your HTML file, delete everything from <style> to </style>.

5. Type <link rel="stylesheet" type="text/css" href="style.css" />.

That’s it! You’re now referencing your CSS from an external file. From here on out, that’s how all our CSS will be written, unless otherwise specified.

Commenting Your CSS Code

Just as with HTML, you can include nonfunctional text inside your CSS (whether it’s internal or external). This allows you to make notes and document your styles. Here’s a CSS comment:

/* This is a CSS Comment */

Each comment starts with a forward slash (/) and asterisk (*), followed by the comment text, and closes with another asterisk and forward slash. What you see above is a single line comment, but you can also add multiple-line comments:

/* This is
a comment that spans
multiple lines. */

You can use CSS comments to add descriptions of the styles, note the specific purpose of the css file, credit the file’s author, or create sections in your CSS file (this can be helpful if your style sheet is especially long).

Wrapping Up

CSS opens up a whole world of opportunity for you to take a website and make it your own through design.

In the next several chapters, you’ll see how to customize everything, create stunning layouts, and even learn a few shortcuts to save you some time.

But first, you need to learn how to target all the elements.

Targeting Elements by Tag

The clearest way to target any element in HTML is by its tag—namely, p, h1, ul, or any other HTML tag. The example you saw in Chapter 11 worked this way, and doing this will target every instance of that element. So if you target the <p> tag and have seven paragraphs, all of them will adopt the styles you have defined for the paragraph element.

To target an element by its tag:

1. In your style.css file, type the tag for the element you want to target, without the < and > characters. For this example, use p.

2. Type { to open the style declaration block.

   Every ruleset is contained between { and }.

3. Type color: (the property you wish to define).

4. Type green; (the value of the color property).

5. Type } to close the style declaration.

   This turns all paragraph text green (FIGURE 12.1).

Targeting multiple elements

You can also target multiple elements, as long as they’re separated by commas. So if you want all paragraphs, unordered lists, and ordered lists to have green text, the CSS code in Figure 12.1 would look like this:

p, ul, ol {
    color: green;
}

This would change the page to look like FIGURE 12.2.

Targeting Elements by Class

The best way to target some instances of an element without targeting all of them is to use a descriptor on all the elements you want to target. The class attribute is used for this:

<p class="standout">

I chose the value (or name) standout for the class attribute because I’m going to style any elements with this class to make them stand out more. Your class names can be anything, but web developers increasingly argue that they should be semantically descriptive, not stylistically descriptive. For example, don’t set class="green" merely because the text is green. If the text needs to be red sometime in the future, the class name will no longer make sense.

Then in your style sheet, you can target any class by preceding the value with a period (.), like this:

.standout {
    color: green;
}

This says, “For any element with the class standout, make the text color green.”

You can also get more specific by combining element and class to say, “Only paragraphs with the class standout should be targeted”:

p.standout {
    color: green;
}

To make the first paragraph of a page bigger:

1. In your HTML file, find the first paragraph and add to it a class attribute with a value of “intro” by typing <p class="intro">.

   Assigning the intro class to the first paragraph of each page allows you to style it differently from the other paragraph elements.

2. In your CSS file, on the next blank line, type p.intro {.

   This limits the style declaration to paragraphs of class intro.

3. Type font-size: 24px;.

   The default font-size for most browsers is 16px, so the text in any <p> element with the class intro will be larger than the default size for the page.

4. Type }.

5. Save the files and open the HTML file in the browser to see the result (FIGURE 12.3).

Classes are a powerful way to add extra specificity to your styles and to highlight certain text.

Targeting multiple classes

Just like with elements, you can target multiple classes with a single style by using a comma-separated list:

.intro, .outro {...}

And you can target elements if, and only if, they have multiple classes by “daisy-chaining” them, like this:

.class-one.class-two {...}

A good example of why you might want to do this is if you have a base style but want to alter a single instance of that style. Say we have a class called alert, with these properties (FIGURE 12.4):

.alert {
    background: red;
    color: white;
    font-weight: bold;
    padding: 5px;
}

Assume that you’ve defined this as the default style for alerts on the site. But perhaps there is a single instance where you want to use a background color of blue. To achieve that, start by creating a new class whose background color is styled blue:

.alert.blue-background {
    background: blue;
}

Then combine the two styles. In the HTML file it will look like this: <p class="alert blue-background"> (FIGURE 12.5).

This technique can also work without combining the styles in the CSS. So if you wanted more than just alerts to have blue backgrounds, you could target the rule like this:

.blue-background {
    background: blue;
}

In this case, you don’t have to change the HTML, and everything will still work as expected!

The Cascade, Inheritance, and Parent-Child Relationships

In Chapter 11, you were introduced to the idea of the cascade, the principle that the lower on a CSS style sheet a ruleset is, the more likely it is that it will be used to style the element it’s targeting. But that’s only part of the story.

Throughout this chapter, you get the other part of the story: styles are applied depending on how you target elements. You’ve learned how to target elements and classes, and soon you’ll see how to be really specific with your targeting. But before we get to that, you need to understand inheritance and the family tree of HTML elements (FIGURE 12.6).

Just about any set of HTML markup will include elements in parent-child relationships. In fact, all the HTML markup on a given page is a descendant of the <html> element, which is considered the root of the document—the topmost level, or the start of the family tree.

FIGURE 12.7 will help you visualize the family tree structure. In this example, <article> is the parent element of the elements between its opening and closing tags. It has three children: <h1>, <p>, and <p>. The first <p> contains one child element, which is <a>. The second <p> has two children: <span> and <b>. And <a>, <span>, and <b> are also grandchildren, or descendants, of <article>. CODE 12.1 shows how these relationships might appear in HTML.

Another way to think of children and descendants is that they exist within another element. Siblings exist next to each other. So in Figure 12.7, <h1>, <p>, and <p> are siblings. So are <span> and <b>.

Selecting Elements by their Relationships

You can select elements according to their relationships with other elements in the same family tree. For example, you can choose to target only the descendants of a particular parent element.

To target only the descendant of a particular element:

1. Type the selector of the ancestor element. For example, to target only links inside paragraphs, you would first type p.

2. Type a space (this is very important).

3. Type the name of the descendant element, which in our example is a.

4. Type the declaration block for the style.

Our complete example looks like this:

p a {
    background: lightgrey;
    color: darkblue;
}

This turns gray the backgrounds of all anchor tags inside paragraphs (FIGURE 12.8).

Targeting specific types of elements works well if you want to apply styles uniformly across those elements, and it’s often used to define what are referred to as “base” styles. Those can include:

• Site-wide text colors

• Font face/typography

• Font sizes

• Spacing between elements

• Heading sizes

… and anything else you want to define on a global level.

But what happens when you only want to target certain elements? There are a few ways to do that.

footer > a {...}

<h1>Here's the Scoop!</h1>
<p>...</p>
<p>...</p>

Specificity and Precedence in the Cascade

Throughout this chapter, the topics of specificity and precedence have been unavoidable. CSS relies heavily on both to apply the appropriate styles to elements. Precedence of a style is based on two criteria:

• The order of styles in the style sheet

• Specificity of the selector

If a ruleset comes later in the style sheet, it takes precedence over earlier styles that target the same element, unless the earlier style is more specific. Things can get a little confusing at this point, but in general, here are some reasons a ruleset is more specific:

• It has more selectors (p a is more specific than a).

• A class is applied (p.alert is more specific than p).

• Multiple classes are applied ( .alert.blue-background is more specific than .alert).

Whenever you’re troubleshooting CSS, always check to make sure another style isn’t taking precedence over the style you expect to be applied.

Note that elements will inherit any styles that aren’t explicitly changed with a more specific or more recent selector. For example, text (in most browsers) defaults to color: black; and font-size: 16px; until you change it in CSS.

<p id="intro">

#intro {
    font-size: 24px;
}

Targeting Elements with Specific Attributes

So far you’ve learned how to use type and class selectors to target elements, and how to get more specific by targeting descendants and multiple classes. But even more options are available.

Classes aren’t the only attributes you can target. In fact, you can target any attribute with this syntax: element[attr], where attr represents the name of an attribute. The name of the attribute is enclosed in square brackets. So to target all images with an alt attribute, use this:

img[alt] {
    background: blue;
}

You can even target attributes with specific values; the value is also inside the square brackets and follows the attribute. So to apply a specific color to links that go to a specific URL, you would use something like this example:

a[href="https://google.com"] {
    color: green;
}

Lastly, a few selectors let you search on attribute values by inserting a special character before the equals sign (=). For example, adding an asterisk (*) to the attribute tells CSS to find any attribute whose value contains the text after the equals sign. So to highlight all images with the word dog in the alt tag, you would use the following:

img[alt*="dog"] {
    background: red;
}

To highlight links that go to sites in the .org domain, use the dollar sign ($) attribute selector to search for URLs that end in .org:

a[href$=".org"] {
    background: yellow;
}

Advanced Targeting

In addition to targeting specific elements and classes, you can use a set of advanced selectors known as pseudo-selectors. Right now, we’ll focus on a specific subset of these selectors known as pseudo-classes. There are two types of pseudo-classes: those that focus on state and those that focus on order.

The pseudo-classes that are based on a particular state of an element allow us to target elements based on how a user is interacting, or has interacted, with the element. They are always preceded by a colon (:). Here’s an example:

a:link

User interaction states

Likely the most common pseudo-classes you’ll use are those for link states. They allow us to give the user a visual cue as to how they are interacting with an element. For example, these states tell the user if they have or have not clicked a link:

• :link for links that have not been clicked or visited

• :visited for links that have been clicked or visited

The following states, which allow us to tell a user if they are currently interacting with an element, are most often associated with links but can be applied to any element:

• :hover for when a visitor’s pointer is hovering over the target element.

• :active is used when an element is “activated” by a user. A good example of this is a button click.

• :focus is used when a user clicks, taps, or uses the keyboard to select an element. This is known as giving the element focus, and it’s often used with form elements.

To style link states:

1. Type a, a:link {.

2. Type color: green;.

3. Type font-weight: bold;.

4. Type }.

5. Type a:visited { .

6. Type color: grey;.

7. Type }.

8. Type a:focus, a:hover, a:active {.

9. Type color: red;.

10. Type }.

    This creates link states in which non-visited links are green, visited links are grayed out, and active/hovered-on links are red (FIGURE 12.9).

Order-based selectors

Another common set of pseudo-classes is based on the order of the elements. There can be a lot of combinations for these, but here are the ones you’ll see most:

• :first-child for the first child of a specific element within the parent.

• :last-child for the last child of a specific element within the parent.

• :nth-child(even) or :nth-child(odd) for the even or odd child of a specific element within a parent.

• :nth-child(x), where x is an integer, targets the number x child on a specific element within a parent.

• :first-of-type for the first type of a specific element within a parent.

To create a list with alternating background colors:

1. Type ul li:nth-child(even) {.

   This targets instances of <li> that are descendants of <ul>.

2. Type background: lightgrey;.

3. Type }.

4. Type ul li:nth-child(odd) {.

5. Type background: lightblue;.

6. Type }.

   Even-numbered list items now have a light gray background, and odd-numbered items have a light blue background (FIGURE 12.10).

This is a great way to style tables!

* { ... }

article * { ... }

Wrapping Up

You got a lot of information in this chapter, and it’s okay if some of it hasn’t sunk in yet! I suspect you’ll regularly refer to this chapter. I know I will!

But it provides important groundwork for the chapters to come. Now that you know what’s possible in terms of targeting, it will be easier to envision how the styles you’re about to learn can transform your websites.

Choosing Fonts

When you’re thinking about which font (or typeface) to use on your website, first consider which fonts are actually available to you.

Today, the world is your oyster when it comes to fonts. But there used to be only a small number of cross-platform fonts that you could be confident the user would see correctly. They are still called web-safe fonts. The following are fonts that have traditionally been considered web-safe:

• Arial

• Courier New

• Georgia

• Verdana

• Trebuchet MS

• Times New Roman

That’s why we have the syntax for font handling that we do today—you list the main font you want to use, and then provide one or two fallback choices. This is also called a font stack.

In CSS, the property used to specify the font used for an element is font-family. The value of font-family is a comma-separated list of fonts you want to use, from highest to lowest priority. The font you want to use is listed first, followed by the fallbacks in the order in which you want to use them.

Here’s an example:

Click here to view code image

p {
    font-family: Cambria, "Times New
    →Roman", serif;
}

This says, “Use the font Cambria. If that’s not available, use Times New Roman. If that’s not available, use the system’s default serif font.”

Types of fonts

Always try to group a font with fallbacks that look similar. That’s because in the event that a fallback is used, you want your site to look as close as possible to what you originally intended.

Fonts used with CSS are broken down into a few categories, based on their style (FIGURE 13.1):

• Serif, which is a font that has extra strokes on the ends of each letter.

• Sans serif, which lacks the extra strokes.

• Monospace, or fonts where every character has exactly the same width. These fonts are often reminiscent of classic typewriter text. They’re also commonly used to represent computer code.

• Cursive, which are fonts designed to look like handwriting.

• Fantasy, which are highly decorative fonts.

To set the default font for a whole website:

1. At the top of your style.css file, type body {.

   This targets the <body> tag. All the elements within this tag will inherit the font styles that we assign to it.

2. Type font-family:.

3. Type Futura, Helvetica, Arial, sans-serif;.

   Futura is a great sans serif font but is installed by default only on macOS, so this font stack provides fallbacks that are more widely available.

4. Type }, save the file, and open it in your browser.

   The text on the page is now displayed in a sans serif font (FIGURE 13.2).

Google Fonts

While the main source for fonts is the user’s device, there are also many ways to use fonts from other sources. It’s now possible to use basically any font you like.

A common source of fonts is Google Fonts, a library of free open source fonts that anyone can include on their website (FIGURE 13.3). There are tons of fonts to choose from, as well as recommended pairings and more!

To add Google Fonts to your website:

1. Visit fonts.google.com.

2. Find a font you like and click it.

   For this task, I’ll use Roboto (FIGURE 13.4).

   

3. Click Select This Style for each style you want to include ().

   I’ll select Regular 400, Regular 400 Italic, and Bold 700.

4. In the Selected Family box that appears, click Embed (FIGURE 13.5).

   

5. Click @import.

6. Copy the text between the <style> tags, without including the tags themselves.

7. Paste the copied text into your style.css file, at the top.

8. Below that, type body {.

9. Type font-family: Roboto, sans-serif;.

10. Type }, save the file, and open it in your browser.

    Your webpages now use Roboto as the default font for body text (FIGURE 13.6).

Including External Fonts with @font-face

If you don’t find a font you want in one of the online services, you can download and use an external font by linking to it using the @font-face at-rule.

An at-rule is a CSS statement that tells CSS how to perform or behave. All at-rules start with an at sign: @. You’ll see several at-rules throughout the rest of the book. The @font-face at-rule tells CSS to use the provided files as a font.

The statement begins with the at-rule, followed by an opening curly brace. That’s followed by the font-family property, which tells the browser how to reference the font by creating a new font family to use. Since it’s a declaration, it ends in a semicolon.

The font-family declaration is followed by another property, src. It behaves much like the <srcset> implementation of src. In this syntax, src is followed by a colon and two values: url, encapsulated by parentheses and single quotes, and format, also encapsulated by parentheses and single quotes. The URL can be relative or absolute. The format is the file format, which will most likely match the font file’s extension. More on font formats later in the chapter.

src can accept multiple sources separated by commas, and the last source ends in a semicolon. Here’s an example:

Click here to view code image

@font-face {
    font-family: 'Best Font';
    src: url('bestfont.woff')
format('woff'),
    url('bestfont.ttf')
format('ttf) ;
}

Reference the font like this in your CSS:

Click here to view code image

font-family: 'Best Font', sans-serif;

In this instance, you’ll likely pay for a font, and they can range from a few dollars to hundreds. However, you can download free fonts from websites like Font Squirrel (FIGURE 13.7).

There are two caveats to using this method. The first is that different browsers support different font file formats.

Luckily, it can pretty much be boiled down to two: WOFF (Web Open Font Format) and WOFF2. Most modern websites use WOFF2 because it offers 30 percent compression gain over WOFF, making it faster for browsers to download. Optionally, you can use TTF (True Type Font).

In either case, you might have to convert your font into one of the above formats. To do so, you can use a webfont generator called Transfonter (FIGURE 13.8).

The other caveat is that you’ll need to include each style of the font as a separate @font-face directive in your style.css file. So regular, bold, and italic (as well as other variations) all have their own files that need to be included (FIGURE 13.9). This can make your style file lengthy, but it might be worth it to get that perfect font.

To add a custom font to your CSS with @font-face:

1. At the top of the file style.css, type @font-face { to begin the @font-face rule.

   It’s assumed all fonts for this task are in the same folder as style.css.

2. Type font-family:.

3. Type the name of the font family you want to include—for example, 'JetBrains Mono';.

   Use any font you like, and name the font family whatever you like.

4. Type src: url('jetbrains-mono.woff2') format('woff2'),.

5. Type url('jetbrains-mono.woff') format('woff'),.

6. Type src: url('jetbrains-mono.woff') format('woff');.

7. Type }.

8. Type body {.

9. Type font-family: 'Jetbrains Mono', Courier, monospace;.

10. Type }.

Now you’re ready to use a custom font on your website (FIGURE 13.10)!

Now that you know how to choose the font, it’s time to look at what else you do to style your text.

Sizing Text

You resize text using the font-size property, like this:

p {
    font-size: 18px;
}

Several different units of measurement can be used for font-size:

• Pixels (px): This is a fixed measurement, which means 18px will always be 18px. Designers like this because it gives them the most control over the font size.

• Percentage (%): This is a percentage of the parent element’s font. In most browsers, the default size is 16px, so if we want headings to be 32px, we could specify a font size of 200%.

• Em (em): Traditionally in typography, this has meant “the size of a capital M.” Today, it’s a way of measuring font-size as a multiplier relative to the parent. So using the example above, if we want a 32px heading, we could specify 2em (or two times the parent’s font size).

• Root em (rem): This behaves just like em, except it is always based on the root (or default) size. In this case, it is based on the font-size applied to the body selector. This makes the relative font sizes much easier to keep track of, because you don’t have to worry about multipliers on children or grandchildren.

One way to use font-size is to establish a harmonious relationship between the sizes of heading and body text (FIGURE 13.11).

To set the size of headings relative to the size of body text:

1. In style.css, type h1 {.

2. Type font-size: 2em;.

3. Type }.

Size isn’t the only thing you can change. In fact, there’s a whole set of text formatting properties available to you.

Formatting Text

There are lots of properties for formatting text, but here are the most common ones.

font-weight

The font-weight property allows you to apply a different boldness to text. There are two primary values:

• normal, which is unbolded text

• bold, which creates bold, darker text

But as CSS has evolved, there are now some other values to consider:

• lighter makes text thinner than the normal weight.

• bolder makes text thicker than the bold weight.

• Numbered values: You can define a weight at 100, 200, 300, 400, 500, 600, 700, 800, or 900. 400 is akin to normal; 700 is akin to bold (FIGURE 13.12).

For example, to make all your links bold, you would define the style for the anchor element this way:

a {
        font-weight: bold;
}

font-style

Next up is the font-style property, which italicizes text (FIGURE 13.13). There are three values:

• normal, which is normal, straight text.

• italic, which uses the italic style to show italic text.

• oblique, which uses the oblique style if it exists. If there is no such style, the browser tilts normal text slightly to make it look oblique.

Here’s an example:

h3 {
        font-style: italic;
}

text-decoration

The text-decoration property allows you to add emphasis lines to your text. There are several values (FIGURE 13.14):

• none: There is no change to the text.

• underline adds a line under the text. Use this to force links to be underlined (most modern browsers display link underlines when the user hovers over them).

• overline adds a line over the text.

• line-through adds a line through the text (like a strike).

If you have an article or story with a byline, you can use text-decoration to make the byline stand out a little bit.

As an example, here’s one way to style a byline class:

.byline {
        text-decoration: underline;
}

You can make text-decoration accept multiple values by listing them separated by spaces. So if you want to have an overline and an underline, for example, you can do the following:

.byline {
    text-decoration: underline
    →overline;
}

Finally, text-decoration is actually shorthand for three other properties. Include them in this order, separated by spaces:

• text-decoration-line, which uses the values you’ve seen above.

• text-decoration-style, which changes what the line looks like. The default value is solid; the other options are double (two solid lines), dotted (a line made out of dots), dashed (a line made out of dashes), and wavy (a squiggly line) (FIGURE 13.15).

  

• text-decoration-color, which accepts any color.

This allows you to add more personality to the line (FIGURE 13.16):

.byline {
        text-decoration: underline
         →wavy blue;
}

You can take this example a little further and apply some of the other properties you’ve learned as well.

To format a byline class:

1. In style.css, type .byline to target the byline class.

2. Type { to begin the style declaration.

3. Type font-style: italic;.

4. Type font-weight: bold;.

5. Type text-decoration: underline;.

6. Type } to close the style declaration.

   Now, text assigned the byline class is styled bold, italic, and underlined (FIGURE 13.17).

Formatting for Readability

The styles in the previous section are mostly used to apply emphasis or draw attention to text. But there are also styles that improve text readability—things like line and text spacing, alignment, and more. Here are the common ones.

Alignment and justification

Using CSS, you can align text both horizontally and vertically.

With the text-align property, you can align the edge of the text to the left or right margin, center the text, or even justify it.

Justified text expands every line (except the last line) so that it takes up the full width of the container (FIGURE 13.18).

With vertical-align, you can move elements vertically as they line up next to each other. So when you have two elements next to each other and one is taller than the other (for example, an image next to text), you can use vertical-align to line up their top edges. It’s also useful for vertically aligning text in tables.

vertical-align values include the following:

• baseline aligns the element with the baseline of the parent (the baseline is the line on which most letters of a font sit).

• sub aligns the element with the subscript baseline of the parent (about 50 percent below the baseline).

• super aligns the element with the superscript baseline of the parent (about 50 percent above the baseline).

• text-top aligns the top of the element with the top of its parent’s font.

• text-bottom aligns the bottom of the element with the top of its parent’s font.

Along with the above, you can use the following values for table cells:

• top aligns the text in the cell with the top of the cell.

• middle aligns the text in the cell into the middle of the cell.

• bottom aligns the text in the cell with the bottom of the cell.

• You can see them in FIGURE 13.19.

Text spacing

Finally, there are several properties for spacing text, all using the same unit measurements as font-size (though em is popular for these properties):

• line-height: The amount of space a line takes up, including font size and leading (the whitespace between lines). For most fonts, this is around 1.2em (or 1.2 times the font size).

• letter-spacing: The amount of space between each letter (also known as kerning).

• word-spacing: The amount of space between each word.

• text-indent: Indents the first line by some amount. Most often, px is used here.

To set the internal spacing for paragraphs:

1. Type p {.

2. Type line-height: 1.5em;.

3. Type letter-spacing: 0.1em;.

4. Type word-spacing: 0.2em;.

5. Type }.

You can see in FIGURE 13.20 that this gives the text a completely different feel.

Wrapping Up

Using these properties, you can completely transform the look and feel of your site without doing much else. FIGURE 13.21 shows a great-looking page that is 99 percent powered by the techniques you learned in this chapter.

But still, typography is only a small part of the vast toolset you have in CSS. Another great way to customize your site is with color, the subject of the next chapter.

How Computer Monitors Work

Before jumping into choosing colors, you should know a little bit about how computers represent colors. The screens of computer monitors are made up of millions of tiny squares called pixels.

When you turn a screen on, light shines through those pixels to illuminate them, and each pixel colors the light with a combination of red, green, and blue. A Venn diagram (FIGURE 14.1) is a good way to show the three primary colors—red, green, and blue—and the colors they produce when combined.

You can see that as they overlap, they begin to form other, secondary colors:

• Combining red and green produces yellow.

• Combining green and blue produces cyan.

• Combining blue and red produces magenta.

• Combining all three colors produces white.

• A lack of color produces black.

Armed with that information, you can generate a numerical code for any color.

Representing Color in CSS

In CSS, there are four ways you can define colors:

• RGB: A comma-separated list of the amount of red, green, and blue in a color, from 0–255.

• Hexadecimal (or hex) values: A six-character code that defines the amount of red, green, and blue in a color preceded by a hashtag (#).

• Color names: There is a set of predefined names for colors, like blue, aquamarine, and rebeccapurple. You can see the full list of names, and their colors, at htmlcolorcodes.com/color-names/.

• HSL: This defines the color in terms of hue (as an angle on the color wheel), saturation (as a percentage), and lightness (as a percentage). This is an uncommon method.

Both RBG and HSL can also accept an alpha value, which defines the opacity of the color.

Hexadecimal colors

FIGURE 14.2 is a pretty basic table. In the top row, the letters R, G, and B (representing red, green, and blue) are at the heads of the columns. Underneath it, you have six Fs, two in each column. This second row shows how you represent colors in CSS.

The three pairs of Fs represent hexadecimal values, which are numbers in base 16. They include the standard digits from base 10 (0–9) and continue up the scale using the letters A–F to represent 10–15. A two-character hexadecimal number can range from 00–FF, or from 0–255 in decimal (base 10) notation.

Because these numbers cover a huge range of values (over 16 million), you can use them to create almost any color you’d like. The first two characters state how much red goes into a color, the middle two how much green, and the last two how much blue. A value of all Fs is white, and all 0s is black. You can think of all 0s as the complete lack of any color, and all Fs as the maximum amount of any color.

For example, “pure” red is #FF0000 (it has the most red there can be, no green at all, and no blue at all). Purple in this instance would be #FF00FF (maximum red, no green, maximum blue).

To set a color for a style:

1. In style.css, type the name of the selector you want the style rule to apply to—in this case, body.

2. Type { to begin the declaration block.

3. Type the name of the property you want to define and the value of that property. In this example, to turn the page black, type background: #000000;.

4. Type the next property you want to define and its value. Here, to make the body text white, type color: #FFFFFF;.

5. Type } to close the declaration block and the style rule.

FIGURE 14.3 shows the result.

Using RGB and RGBA to set color

Using RGB to set color is very much like using hex: you specify numerical values for red, blue, and green, but in decimal notation, not hexadecimal notation. For example, to specify pure red, type rgb(255, 0, 0). To specify purple (a mixture of red and blue), type rgb(255, 0, 255).

Both hex and RGB share one big problem: there’s no way to change the opacity of a color. Luckily, there’s a variant of RGB that does allow you to set the opacity level: RGBA.

The A in RGBA stands for alpha channel. It adds to the color specification a component that lets you set the opacity value from 0 (completely transparent) to 1 (completely opaque, the default value) (FIGURE 14.5).

For example, to define a semitransparent red background, you would type rgba(255, 0, 0, 0.5).

To define background color using RGBA:

1. Type body {.

2. Type background: rbga(0, 0, 0, 0.25);.

3. Type }.

That gives you a page that looks like FIGURE 14.6.

You can also use the opacity property to change the transparency of an element. This property accepts values between 0 and 1, but that applies to the entire element—including text, images, and anything else—and not just its background.

Using HSL and HSLA

HSL is a relatively new way to define colors based on the color wheel (FIGURE 14.7).

The value of hue, or H, is its position on the color wheel, which is measured in degrees from 0 to 360. This makes it a little easier to figure out the color as you increment or decrement the H value. Especially with hex, it might be hard to look at a value and figure out what color it will translate to. With HSL, thanks to the hue, beginners have a better understanding of what color they’ll see based on the value.

Saturation, or S, is the amount of gray in a color (or conversely, how pure the color is). This is represented as a percentage, where 0 percent is gray and 100 percent is full saturation of the hue.

Lightness, or L, is the amount of white or black in the color, again as a percentage: 0 percent is no light (black), and 100 percent is full light (white). This is true no matter what the hue or saturation. Using HSL, red would be hsl(0, 100%, 50%).

Like RGB, HSL can also accept an alpha value for opacity. So a semitransparent red would be hsla(0, 100%, 50%, 0.5).

With that, you’ve seen the most common properties for controlling color in CSS: background (which changes the background color) and color (which changes the text or foreground color). But there are a few other ways you can use color in CSS.

Gradients

Using CSS you can generate a gradient to smoothly transition between two or more colors, or color stops. There are two types of gradients: linear-gradient() (which transitions in a straight line) and radial-gradient() (which transitions outward from the center).

Gradients in CSS are actually functions that generate a background image. Because of that, there is a lot of information you can send to them.

In their most basic form, you just need the type of gradient you want to use and two colors. Each function has built-in defaults to take care of the rest:

Click here to view code image

background: linear-gradient(red, orange);
background: radial-gradient(red, orange);

The first line generates a red-to-orange linear gradient (FIGURE 14.8). If direction isn’t assigned, top to bottom is assumed.

The second line generates a red-to-orange radial gradient. By default, the first color listed is at the center (FIGURE 14.9).

You have lots of other options when designing gradients:

• More than one color

• Direction

• Color stops (as in, stop red at 10 percent and begin the transition to orange)

• Size

Let’s take a look at the functions and the information you can send to them.

Linear gradients

The linear-gradient() function accepts two types of values: those for direction and those for a color list.

Here’s how to define direction with linear-gradient:

• angle: The starting angle of the gradient. It defaults to 180 degrees.

  Angles can be defined using four units: deg, grad, rad, and turn. You can learn more about each unit at developer.mozilla.org/en-US/docs/Web/CSS/angle.

• side-or-corner: This is a set of keywords that correspond to specific angles. This value starts with the word to and then contains up to two keywords: one for the horizonal line (left or right) and one for the vertical (top or bottom).

  to bottom, to top, to right, and to left correspond to, respectively, 180deg, 0deg, 90deg, and 270deg.

To create a full two-color background using linear-gradient():

1. Type body {.

2. Type background:.

3. Type linear-gradient( to open the function.

4. Type to right.

   This specifies the direction the gradient should go. “From left” is implied.

5. Type rgba(0,0,0,0.25) 68%,.

   This defines the first color as black at 25 percent opacity. The color stops at 68 percent of the width of the container.

6. Type rgb(0,0,0) 69%.

   Stopping the second color 1 percent later gives a definitive border.

7. Type ); to close the function.

8. Type } to close the style declaration.

The result is a background that serves as a content area, with a black background for a sidebar (FIGURE 14.10).

And here’s the code:

Click here to view code image

body {
    background: linear-gradient
    →(to right, rgba(0,0,0,0.25)
    →68%, rgb(0,0,0) 69% );
}

Radial gradients

With radial gradients, you define the color stop list in the same way, but defining the gradient is a bit different. You can use these values to define radial-gradient():

• <position>: This is relative to the top left of the container, and can be top, bottom, left, right, or center. It can also be a numeric offset (two numbers, on the x and y axes).

• <shape>: This is how the gradient will be drawn. You can use ellipses (the default) or circle.

To create a radial gradient:

1. Type body {.

2. Type background:.

3. Type radial-gradient(.

4. Type circle at center,.

5. Type red, blue.

6. Type );.

7. Type }.

The result is a background that looks like a long circle in the middle, transitioning to blue around the edges (FIGURE 14.11).

Just as with colors, there are helpful tools with which you can generate the CSS code for gradients. One good tool is cssgradient.io/ (FIGURE 14.12).

The border Property

The other (much less complicated) CSS property that uses color is border, which is shorthand for three properties: border-width, border-style (from a set of options; see FIGURE 14.13), and border-color. The styles are as follows:

• solid

• dashed

• dotted

• double

• groove

• ridge

• inset

• outset

• hidden

• none

A definition looks like this:

border: 1px solid #000000;

To define a border around paragraph elements:

1. Type p {.

2. Type border:.

3. Type 1px.

4. Type solid.

5. Type red;.

6. Type }.

You end up with something like FIGURE 14.14.

You can also use each of these properties, and the same declarations, for each individual border, the top, bottom, left, and right. Use the following syntax:

border-[side]
border-[side]-[property]

So if you want to style just the top border:

p {
    border-top: 1px solid red;
}

or

p {
    border-top-style: solid;
}

There’s a lot more you can do regarding borders or box decorations in general.

Wrapping Up

Understanding color is a fundamental part of creating websites. Luckily, there are a lot of online resources dedicated to making it easier.

With your color schemes, you can design pages that come to life or even evoke an emotional response. With this fundamental concept down, it’s time for you to start manipulating the elements and laying them out just the way you like them.

The Box Model

In Chapter 6, you were briefly introduced to the box model. The simplest way to put it is that CSS treats every HTML element as if it’s in its own box. By default, when a browser renders a webpage, the boxes flow onto the page in sequence as it encounters them in the code. This is sometimes called normal flow.

FIGURE 15.1 shows an example from the New York Times.

For each element, you can control a number of parameters:

• The width and height of its box

• Border color and thickness around the box

• Whether or not the border is visible

• Whether the box itself is visible

• Where the box fits in the flow of elements on the page

• How much space is around the box (margins), and around the content within the box (padding)

You can also change the position of an element in the flow of a page by choosing whether to make it an inline element or a block element. This can have an effect on how much space is (or can be defined) around the box.

The CSS display property

Using the display property, you can change the flow of an element. These are the most common values:

• block makes an element start on a new line and take up the full width of the container (forming a block of content, if you will).

• inline leaves an element in its position in the flow of content. It will not start on a new line, and it will take up only the horizontal space it needs. Certain properties, like height and width, have no effect on inline elements.

• inline-block is a hybrid of inline and block. The element will display inline but take on the properties of a block, like height, width, and spacing.

• none completely hides the element and removes it from the flow. It will only be viewable in source code.

To set a link to display as a block-level element:

1. In your style sheet, type the selector you want to change. In this example, use a.

2. If you want the style to apply to a specific class, type a period followed immediately by the class name, then add a left curly brace. Here, use .button {.

3. Type the property you want to assign to the selector. In this case, use display: block;.

4. Type } to close the style declaration.

This moves any link (<a> tag) of the class button from inline to its own block (FIGURE 15.2).

Height and width

Unless you specifically define a height and width, they’ll default to a size big enough to hold the content (with the caveat that block-level elements are the full width of their parent container). To define a specific size, you can use the height and width properties. They accept the same units you would use to measure text size: px, em, rem, and %.

To set a specific height and width for an element:

1. In your style sheet, define the element to which you want to apply the rule, followed by a left brace. In this example, use aside {.

2. Type width: followed by the desired width. In this case, 400px;.

3. Type height: followed by the desired height. In this case, 200px;.

4. Type } to end the style declaration.

This gives you a 400x200 box for all aside elements (FIGURE 15.3).

Finally, you can set minimum and maximum values for both height and width.

The minimum properties are min-width and min-height. They say, “Do not drop the container’s size below this value.” If you set min-width: 300px; the container will always be at least 300px wide but can be wider, depending on the content.

And max-width and max-height say, “Do not let a container go beyond this size.” So max-height: 500px means the container can be shorter than, but will never be taller than, 500px.

Each of these can make sense depending on the context. But the main thing to remember is that the height and width properties are fixed. They will always be exactly the size you define, no matter the size of the browser window or parent container (FIGURE 15.4).

Padding and Margins

In Chapter 14, you learned how to adjust spacing for text to make it more readable and how to add whitespace when necessary. You can do the same thing with entire elements and everything they contain—text, images, and otherwise.

As stated earlier, there are two ways to add spacing to an element: around the outside of the whole box, which is margin, and around the content inside the box, which is padding. That, taken with height, width, and border, creates the complete amount of space a block-level element takes up (FIGURE 15.5).

You can define padding and margin values using the same units as those for height and width. Using a single value for either property applies the same value to all four sides of the element.

To add padding and margin to a paragraph:

1. In your style sheet, type the selector you wish to target, followed by a left curly brace. In this case, use p {.

2. Type padding: followed by the value; this example uses 20px;.

3. Type margin: and the value; here, use 20px;.

4. Type } to close the declaration.

This adds a little extra spacing to your paragraphs (FIGURE 15.6).

padding: [top] [right] [bottom] [left];
margin: [top] [right] [bottom] [left];

padding: [top/bottom] [left/right];
margin: [top/bottom] [left/right];

padding: [top left/right bottom];
margin: [top left/right bottom];

Using margin: auto

Sometimes when you set a width, you might want to center the container on the page. That’s very easy to do using the margin property. You can set margin to the value auto, and it will calculate the width of the parent container, subtract the width of your target element, and distribute the leftover value evenly on both sides.

Say you have a wrapper class that has a width of 800px:

.wrapper {
    width: 800px;
}

On most tablets and desktop devices, the width of the window (and therefore, the entire website) will be more than 800px, and your content will look like what you see in FIGURE 15.7, where there is a lot of space to the right of the container.

Using the keyword auto with margin allows you to automatically center that content in the middle of the window.

You can use the auto keyword in two ways: as the only value for margin (margin: auto) or in conjunction with a set top and bottom (margin: 30px auto). Both cases result in horizontal centering. The latter also includes a 30px margin before and after the container.

To center an element automatically with margin: auto:

1. In your style sheet, type the selector you wish to target, followed by a left curly brace. In this case, use .wrapper {.

2. On a new line, type width:, followed by the value. In this case, 800px;.

   Setting a width for the container isn’t strictly necessary, but without it you will not see the results of using the auto keyword.

3. On a new line, type margin:, then the values, including values for options like top or bottom margins. In this case, type 30px auto;.

4. On a new line, type }.

Your full ruleset looks like this:

.wrapper {
    width: 800px;
    margin: 30px auto;
}

That results in a div with the class wrapper being center aligned on a page (FIGURE 15.8).

Element Flow

By default, elements flow onto the page in the order they appear in the HTML, depending on whether they are a block or inline element. FIGURE 15.9 shows how the elements on a page naturally flow, with block-level elements outlined. You can see that block-level elements take up the entire width of the page and dictate most of the natural flow. Links and other text formatting fall in line with those blocks (like the links in the unordered list).

However, there are a few ways to change the flow of elements. You might want to do this to pull out certain content (like a quote or an aside), draw attention to an image, or even reorder elements when viewing the site on a smaller device.

The most common way to change the flow of HTML elements is to use the float property.

Using floats

The float property takes an element out of its normal flow and places it to the right or left inside the container:

aside {
        float: right;
}

This moves the aside element to the right and lets everything else flow around it (FIGURE 15.10). You can see the code in CODE 15.1.

Note that the floated element will be surrounded by any elements below it, so if you want it to appear in the top of a container, it will have to be the first element.

You can even use float to create a grid of elements. Floating all elements of a particular type takes them out of the normal flow and lines them up next to each other. Before the creation of the layout modules Flexbox and CSS Grid (which you’ll learn about in Chapter 16), this is how many web designers created column-based layouts.

To create a grid layout with floats:

1. In your style sheet, type the selector you wish to target, followed by a left curly brace. This example targets paragraphs, so use p {.

2. Type float:.

3. Type left; to force the element to float on the left side of its container.

   To force the element to float on the right side, you would use the value right.

4. Type margin: to set the spacing between the elements. For this example, use 15px;.

5. Type width: to set the width of each element. This example uses 300px;.

6. Type } to close the style declaration.

This makes the paragraphs flow onto the page in a grid (FIGURE 15.11).

.next-section {
     clear: left;
}

Using the position property

Another way to place elements and containers precisely is by using the position property. It accepts several values, which I’ll list in a moment.

This property is often accompanied by a set of properties that position elements in specific areas of the window or container: left, right, top, and bottom. These all accept the normal units (px, em, rem, %), and they all have slightly different meanings depending on the value of position. Here are the values for position, and positioning properties:

• static: This is the default value. There is no special positioning.

• relative: Places the container based on its normal position. The directional properties will move the container away from its normal position.

  So left: 50px moves the container to the right by 50 pixels, similar to margin.

• fixed: The container is in a fixed position on the page, so no matter what part of the page is being displayed to the user, the container will be in the same spot.

  The directional properties in this instance are exact coordinates; left: 0; top: 0; means the container will be at the left edge at the very top of the window.

• absolute: The container is positioned in a fixed position in its parent container.

  Directional properties work the same way as those for the fixed position.

• sticky: The container is positioned relatively (as in the normal flow) until the user reaches a specific scroll position. Then it sticks in place on the screen.

  For example, top: 0 positions the element relatively in the normal flow until the page is scrolled and there are zero pixels between the element’s top edge and the visible area of the webpage. Beyond that threshold, the element behaves as if it used fixed positioning and will be fixed to zero pixels from the top.

To get a better idea of how each of these work, check out Video 15.5.

To make a sticky sidebar:

The starting markup for this task is listed below. Since there’s no HTML5 element specifically for “wrapping” other elements (from a semantic meaning standpoint), it’s common practice to use the <div> element with a wrapper class:

<div class="wrapper">
    <aside>
        ...
    </aside>
    <main>
        ...
    </main>
</div>

1. In your style sheet, type .wrapper {.

2. Type width: 800px;.

3. Type margin: 30px auto;.

4. Type }.

5. Type main {.

6. Type width: 500px;.

7. Type }.

8. Type aside {.

9. Type width: 260px;.

10. Type padding: 15px;.

11. Type float: right;.

12. Type position: sticky;.

13. Type top: 0;.

14. Type }.

This code produces a two-column layout with a sticky sidebar. You can also add a background and border to aside to distinguish it a bit (FIGURE 15.12). You can see the code in CODE 15.2 and 15.3.

Creating Layers and Overlapping Elements

Although taking elements out of the natural flow can create interesting layouts for your content, you can run into situations where content overlaps and becomes unreadable. For example, if you had not set the width property on the main div in the previous task, your users would have run into a problem (FIGURE 15.13). Because we’ve fixed the position of the aside, the browser is essentially saying, “Keep the aside in this spot, no matter what the rest of the flow looks like.” That means when the user scrolls, the main text overlaps the aside.

CSS has a fix for that: the z-index property. You can think of z-index as a layer or stacking property, where the value is an integer. The closer the integer is to 0, the “lower” on the page the element is (FIGURE 15.14). You can also think of elements with a lower z-index as being “behind” elements with a higher z-index.

A ruleset that uses z-index looks something like this:

aside {
        position: fixed;
        top: 0;
        z-index: 10;
}

Creating an Overlay Using z-index

One practical example of using z-index is to create a piece of content that should be shown in front of the rest of the content. You see this with popups asking you to join mailing lists, for example.

In this task, you will learn the basics of how to do that. In the real world, you might make the overlay dismissible with a bit of JavaScript, but you will clearly see how z-index works.

To create an overlay using z-index:

The markup being styled will be the following:

Click here to view code image

<div class="overlay">
    <h3>This is an important alert!
    →</h3>
</div>
<header>
    <h1>A Case of Identity</h1>
</header>
<main>
    (content goes here)
</main>

1. In your stylesheet, first type the element you want to apply the styles to, followed by a left curly brace. In this case, .overlay {.

2. Now set the position of the element to absolute by typing, on a new line, position: absolute;.

3. Since the element is absolute, you can now use positional properties to move it. Move it down the page a little bit. On a new line, type top: 10%;.

4. Move the element in front of all other elements using z-index. Since the default z-index is 0, on a new line type z-index: 1000;.

   This will make sure the overlay is above the rest of the content—as long as nothing has a z-index over 1000.

5. Strictly so you can more easily see the result, apply a background color to the element. On a new line, type background: #cfcfcf;.

6. You can also center the text. On a new line type text-align: center;.

7. Finally, adding some padding so it stands out a bit more. On a new line, type padding: 40px;.

8. On a new line, type }.

This results in a block of text that is layered on top of the main page (FIGURE 15.15).

A Note About Creating Layouts

In recent years, great strides have been made in creating layouts with CSS. The practice of laying out elements on a webpage moved from tables, in HTML, to floating elements and clearing them using CSS. There are many frameworks designed to help you to create beautiful grid layouts. A framework is a set of structured files (HTML, CSS, and maybe JavaScript) that give you a head start on creating websites. See the sidebar “Using CSS Frameworks” to learn more.

But now, CSS Grid and Flexbox (two suites of layout properties you’ll see in Chapter 16) have much wider browser support, so they should be used instead of floating and clearing elements. They allow for code that is semantic, much cleaner, and easier to support. The techniques you saw in this chapter—floats, positioning, and changing the default flow—still have their place in web design, though.

At this point, you have enough tools in your toolbox to create nice-looking layouts. In Video 15.6, you put most of that to the test by creating a pricing table.

Wrapping Up

You know all about how to change the default flow of a page and the elements/containers on it. You’ve learned about common methods like floating (and clearing those floats), changing the position of elements, and z-index.

You can probably imagine that you’ll run into a lot of fringe cases when you try to make these properties work for complex layouts—which is why frameworks became popular in the first place. But CSS has solved that with two important new systems: CSS Grid and Flexbox.

Modern Solutions for an Important Problem

Part of the reason Flexbox and CSS Grid (or simply Grid) have emerged is because they are a modern solution to an important problem: creating flexible layouts that work properly on different screen sizes.

With the advent of responsive web design (RWD), floating elements to create column layouts revealed a critical bug that also affected SEO: you could not control the stacking order.

That means if you float the aside element, as in Chapter 15, that element needs to go above the main content. Search engines will prioritize the aside, and if you stack the content, the aside will always be first (Video 16.1).

CSS Grid vs. Flexbox: Which should you use?

This chapter shows you both CSS Grid and Flexbox, but it’s good to know what the difference is so that you can keep it in mind moving forward.

The most common answer to this question is that Flexbox organizes content in one dimension—by rows or columns. CSS Grid organizes content in two dimensions—rows and columns.

Both are well supported by browsers at this point, as these tables at caniuse.com demonstrate (FIGURES 16.1 and 16.2).

And both give you similar results quickly (FIGURES 16.3 and 16.4).

What you’ll quickly find is that CSS Grid is a bit more granular. Before we dig into that, let’s take a look at Flexbox.

Using Flexbox

We start by setting the display property to the value flex, which will lay out the element and its children according to the CSS Flexible Box Layout Module, known by its close friends as Flexbox.

It essentially enables you to use a set of properties that also use the word flex in the parent and child elements.

All of these properties have default values, so you will see results as soon as you use the display property to enable Flexbox. Let’s say you have a set of paragraphs inside a div container (FIGURE 16.5).

To enable Flexbox on an element:

1. Type the element or selector you want to target. In this case, it’s div {.

2. On the next line, type display: flex;.

3. On the next line, type } to close the style declaration.

This gives you FIGURE 16.6 (some styling has been added so that you can better see the effects).

You might notice that the paragraphs are not equal width and that they’re very cramped, with all six on the same line/row.

That’s because display: flex takes all the child elements and converts them into columns of content. In fact, they don’t even need to be the same type of element. Here’s another example, with more than just paragraph elements (FIGURE 16.7).

Luckily, this doesn’t extend to all descendants, just children. So without much fuss, you can get a pretty good two- or three-column layout working.

How width works in Flexbox

By default, display: flex takes all child elements and evenly distributes them into columns. But there are a few ways to define column widths, which Flexbox will take into account.

The first is simply by defining the width property. Flexbox will respect a defined width (meaning it will use the defined width instead of overriding it). Because Flexbox lends itself well to multiple screen sizes (meaning the overall width of your container will change), this book uses percentages. But you can use any unit you want.

Later in the chapter, you will learn about an even better way to define the width of child containers, called flex-basis, so keep an eye out for that!

In the next task, the goal is to take the provided markup and make a two-column layout where the <article> element is 70 percent of the width of the <main> container, with the <aside> occupying the other 30 percent.

To create a two-column layout with Flexbox:

Here is the starting markup:

<main>
    <article>
        ...
    </article>
    <aside>
        ...
    </aside>
</main>

1. In your style sheet, target the element you want to use Flexbox on. In this case, type main {.

2. On a new line, type display: flex;.

3. On a new line, type } to close the style declaration.

4. Target the children of the element you’re using Flexbox on. Type main article {.

5. On a new line, type width: 68%;.

   Since the width property doesn’t take into account padding, you need to account for it so you don’t break the main container with overflowing elements. Because of that, subtract 2 percent from the overall 70 percent width you want the <article> element to take up.

6. On a new line, type padding: 2%;.

7. On a new line, type }.

8. Now target the other child element. On a new line, type main aside {.

   Just as with <article>, to prevent the content from overflowing the container, subtract the padding from the width of the element.

9. On a new line, type width: 28%;.

10. On a new line, type padding: 2%;.

11. On a new line, type }.

This gives you a two-column layout that stacks properly (FIGURE 16.8).

Wrapping elements

If you want child elements (also known as flex items) to naturally move to a new row so they maintain their defined widths instead of being forced onto one line, use the flex-wrap property. It has three values:

• nowrap is the default value. It forces all flex items onto one line. If no widths for flex items are defined, each item will take up a width equal to that of its parent. If widths are defined, nowrap may cause overflow.

• wrap breaks the flex items up into multiple lines.

• wrap-reverse behaves like wrap but reverses the order of the flex items.

Here’s a simple example of the syntax:

main {
    display: flex;
    flex-wrap: wrap;
}

With this property, you will also need to apply a width (or max-width) to the child elements. That’s because if they are block elements, they’ll naturally take up the full width of the parent container.

To create a three-column layout with flex-wrap:

The markup is six <p> tags inside a <main> element:

<main>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</main>

1. In your style sheet, type main {.

2. On a new line, type display: flex;.

3. On a new line, type flex-wrap: wrap;.

4. On a new line, type }.

5. On a new line, type main p {.

6. On a new line, type width: 30%;.

7. On a new line, type padding: 1.5%;.

   This is so that the total left/right padding is 3 percent, giving the total column width 33 percent. This divides the <main> element neatly into three equal columns.

8. Type }.

This gives you even columns split across two rows (FIGURE 16.9).

You can also set a more dynamic width that will take other parameters (like margins and spacing) into account by using the flex-basis property, which allows you to set the basic size of the flex item. It accepts any unit that width accepts (px, em, %, etc.).

The flex-basis property also accepts a number of keywords, but most don’t have browser support. To see a list of them and how they work, view this page in Firefox: developer.mozilla.org/en-US/docs/Web/CSS/flex-basis.

Aligning elements

There are even more clever ways you can use Flexbox properties to align and space columns without the need to do mental math to figure out the amount of padding needed. One way is for horizontal alignment, and one is for vertical.

In the last example, you used the padding property to get evenly spaced columns. But there is a better way: the justify-content property. Before jumping into that, though, there’s another property you should know about: flex-direction.

The flex-direction property tells the browser how to align the items. It has four values:

• row (the default) displays items left to right.

• row-reverse displays items right to left.

• column displays items vertically, top to bottom.

• column-reverse displays items vertically, bottom to top.

To convert a row of items to a column:

1. In your style sheet, type main {.

2. Type display: flex;.

3. Type flex-direction: column;.

4. Type }.

This gives you a single, contained column of content (FIGURE 16.10). To better demonstrate how the property works, I applied a 45 percent width to the child elements.

With the justify-content property, you are able to distribute the content evenly or to one side. The property has several values, some of which are listed below, and you can see them demonstrated in Video 16.3. The values distribute the content according to the flow established by flex-direction:

• flex-start (the default): Items are placed at the beginning of the container (similar to left alignment).

• flex-end: Items are placed at the end of the container (similar to right alignment).

• center: Items are centered within the parent.

• space-between: Items are evenly distributed within the parent, with no space between the items and the edge of the parent container.

• space-around: Items are evenly distributed within the parent, with equal space between them (but not evenly spaced between the edges).

• space-evenly: Items are distributed within the parent, with equal space between them and the edges.

To create evenly spaced columns without padding:

1. In your style sheet, type main {.

2. Type display: flex;.

3. Type justify-content: space-evenly;.

4. Type flex-wrap: wrap;.

5. Type }.

6. Type main p {.

7. Type flex-basis: 30%;.

   We’re using flex-basis here instead of width because it’s a little smarter. It can control width or height, based on flex-direction.

8. Type }.

This gives you the same results seen in Figure 16.9, without the need for the additional padding declaration.

main {
    flex: 1 1 30%;
}

main {
    flex: 1 30%;
}

Vertical alignment

You can use Flexbox to align elements vertically. While you can use vertical-align in specific instances, which you saw in Chapter 13, you may not always get the results you expect. The align-items property improves upon vertical-align.

For flex items, use the align-items property, which can have the following values:

• stretch (the default) fills the full height of the container with the content.

• flex-start starts content at the top of the container.

• flex-end starts the content at the bottom of the container.

• center centers the content vertically in the container.

• baseline aligns items on the “baseline” of the content—where the text sits.

The align-items property accepts many more values, which are listed and described at http://developer.mozilla.org/en-US/docs/Web/CSS/align-items#Syntax.

You can see these values in action in Video 16.4.

To create a set of bottom-aligned columns:

1. In your style sheet, type main {.

2. Type display: flex;.

3. Type align-items: flex-end;.

4. }.

Your result will look like FIGURE 16.11. I applied additional styles to the children to highlight the changes.

These properties and examples will give you a great start to using Flexbox. Check out the sidebar “Resources Galore!” to learn more and go even deeper.

But now it’s time to look at a way to do layouts that’s even more flexible: CSS Grid.

Using CSS Grid Layout

CSS Grid Layout (or Grid, as it’s more commonly known) also requires the use of the display property, but you’ll need to use a second property: grid-template-columns. This tells the browser how many columns to create and how wide they should be. If you want three equal-width columns, the code looks like this:

Click here to view code image

main {
    display: grid;
    grid-template-columns: 30% 30% 30%;
}

That results in FIGURE 16.12.

You can also space them out a bit using grid-gap, which works similarly to padding, except the two values are for row and column spacing, respectively:

Click here to view code image

main {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-gap: 10px 20px;
}

If there’s one value (grid-gap: 15px), it’s applied to both rows and columns.

To create a two-column layout with Grid:

Here is the starting markup:

<main>
    <article>
        ...
    </article>
    <aside>
        ...
    </aside>
</main>

1. In your style sheet, type main {.

2. Type display: grid;.

3. Type grid-template-columns: 68% 28%;.

4. Type grid-gap: 15px;.

5. Type }.

This gives you a nice two-column layout (FIGURE 16.13).

Using the fr unit

You might have noticed in the last task that once again, some weird math was required to make sure everything fit properly in the container. But CSS Grid introduces a much, much better way to do it: the fr (fractional) unit. Here’s an example:

Click here to view code image

grid-template-columns: 1fr 2fr 1fr;

The fr unit is a single integer measurement that basically reads like a recipe: “This column should be 1 part of the leftover (or available) space, this column 2 parts, and the last column should be 1 part of the leftover space.”

The fantastic thing about the fr unit is that it takes into account all space already taken up, like padding and grid-gap. That means no mental math! Here’s the new ruleset for main, with a two-column layout:

Click here to view code image

main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 15px;
    padding: 15px;
}

This gives you a clean, evenly spaced set of columns (FIGURE 16.14).

Creating Grid templates

Another truly fantastic feature of Grid is the ability to define templates right in the CSS. You’ll get a quick explanation here, but for a more in-depth look, check out Video 16.5.

Here’s an example (in HTML markup and CSS statements) that you can work from. The HTML defines three principal elements in the class wrapper (CODE 16.1).

And now the CSS for these elements (CODE 16.2).

The first set of rules (for header, main, and aside) does something really important here: it tells the CSS how these elements will be referenced by name in the Grid template using a property called grid-area. This property allows you to reference the selector by a friendlier name in the property grid-template-areas.

In the rule for .wrapper, the differentiator from other code examples in this chapter is the use of grid-template-areas, which allows you to reference the names assigned by grid-area and define what columns and rows each grid-area should span. Note that grid-template-areas does not assume the grid-area names will match the HTML elements or selectors. Any non-numeric string can be used. For example, note that I assigned the name sidebar to the aside element.

Because this is a three-column grid (as we established with the grid-template-columns property), grid-template-areas shakes out like this:

• Each line is a row.

• Each string is a cell/column in the grid.

What this says is, “On the first row, the header grid area should take up all three columns. On the second row, main should take up the first two columns, with sidebar taking up the last.” The result is something like FIGURE 16.15.

As you can imagine—and as you’ll see in Video 16.5 and Chapter 17—this is a powerful way to define flexible layouts for the content.

Browser Support

The next important consideration when using CSS is browser support. In Chapter 10, you learned about caniuse.com and the fact that some browsers are faster to implement new features than others. That’s even more evident with CSS than with HTML. There is greater disparity among browsers as to which features are implemented and how they are implemented.

In FIGURE 16.16 you can see that with the most recently available version of each major browser (excluding Internet Explorer 11, as development has shifted to Microsoft Edge), there’s a mixed bag of support, from not supported and partial support to fully supported.

You might also notice the boxes with text in the upper-right corner of some cells. Those are called vendor prefixes.

a {
    background: #880000;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

Wrapping Up

There’s a lot to digest here, and you’ve only scratched the surface. However, this gives you a fantastic jump-off point for building incredible layouts in CSS.

The whole reason for this type of power is the topic covered in Chapter 17: responsive design. Being able to flexibly change how content is laid out without having to modify the markup allows you to create fantastic content no matter what screen your site is being viewed on.

Defining Media Queries

Unlike most of the CSS declarations you’ve seen so far, media queries aren’t just sets of properties and values. They are containers for other rulesets. Those rulesets are then implemented based on the results of the media query. All media queries are formatted like this:

Click here to view code image

@media [media type] and ([media features]) {
    [Rulesets go here]
}

As you’ll see later, there are lots of different types and features to check for. But for now, here’s a common media query:

Click here to view code image

@media screen and (min-width: 600px) {
    main {
        display: flex;
    }
}

This says, “If the user is viewing this site on a screen whose viewport is at least 600px wide, display all <main> elements as flex.”

Throughout the book you’ve seen references to screen size, window width, and browser size. While each term refers to how wide an area your website renders in, the most succinct term is viewport, which refers to the exact area of the screen that is rendering your website.

Other media types include all, print (for printing a webpage), and speech (for use with screen readers).

Responsive Layouts

So how do you make responsive layouts? Where do you start, and how do you structure your code? I recommend setting all the base styles above any media queries (as in, write them down in your style sheet first) and starting with the smallest layout. Media queries should modify your website as the viewport gets bigger. Here’s a simple example to start.

To change the background color at 600px:

1. In your style sheet, type body to establish the default values for the page.

2. Type { to begin the rule.

3. Type background: followed by the hex code for the starting background color. For this example use #FF0000;.

4. Type color: followed by the hex code for the text color. In this case, use #FFFFFF;.

5. Type } to close the rule.

6. Type @media to begin the media query.

7. Type the name of the media type you want to target. Because you want to implement a different style rule when the user’s browser window changes, use screen.

8. Type and.

9. Type the name and value (in parentheses) of the media feature that should trigger a change in the background color. This value is your breakpoint for the page, and you want the break to occur when the browser window is 600px or wider, so use (min-width: 600px) {.

10. Type the element you want this rule to affect. In this case, body {.

11. Type the attribute and value that you want to change at the breakpoint. In this example, use background: #0000FF;.

12. Type }.

13. Type } to close the media query.

Now resize the browser window. When it is below 600px wide, the background is red (FIGURE 17.1). When it’s 600px or wider, the background is blue (FIGURE 17.2).

Note that the font color was set outside the media query. The goal is to avoid repetition in your code that might bloat your style sheet. Any styles set inside media queries will apply only when the media query is true. So if you have multiple media queries but don’t want the color to remain the same, you’d have to set it in every media query.

This is another benefit of the mobile first approach. You will likely start at default displays for smaller screens and then introduce changes as the page is displayed in larger viewports, allowing you to set as many default styles as possible before you start making changes.

For example, here is a simple CSS Grid layout that shows the pitfalls encountered when defining the bigger screen first (CODE 17.1). It tells divs to display their children in columns as long as the viewport is wider than 599px. At 599px or smaller, it display divs as a block.

In the media query, you’re actually resetting the div back to its default display mode.

You can avoid the dangers of designing for the large screen first by treating the larger screen as the special case, and allowing the smaller screen to use the browser’s default settings.

And now, we’ll define media queries used in designing for small screens first (CODE 17.2). You don’t have to reset div to its original state because it maintains that state (display: block) until you change it for bigger viewports.

This is a seemingly trivial example, but in the mobile first layout, it wasn’t necessary to define any special styles, because the browser defaults were adequate. The desktop-first layout required some resetting of styles. You can imagine that using multiple breakpoints, or more varied styles and layouts, will compound the cases in which you find yourself redefining styles.

As you create your layouts, think about how to reduce the number of styles you override and how to make your style sheets easier to manage.

Making a Full-width Layout Responsive

So what goes into making a fully responsive layout? Here, you’ll build it in sections. CODE 17.3 shows the HTML markup you’ll work with. CODE 17.4 shows the initial CSS styles, in a style.css file. Both are available at github.com/jcasabona/html-css-vqs/Ch17/.

FIGURE 17.3 shows the smallest screen and FIGURE 17.4 the largest screen.

The mid-sized screen layout

One way you can take advantage of more screen space when your page is being viewed on bigger devices is to spread out the header text a bit. One way to do this is to set up a grid on the <header> element and use columns to space the child elements.

To create a two-column layout at a breakpoint:

1. Start by defining your media query, based on the breakpoint at which you’ve chosen to change your layout. Type @media screen and (min-width: 768px) {.

   Add this code to the end of your style sheet (assuming you’re using the code from Code 17.4).

2. Target the element you’d like to change at your determined breakpoint. Type header {.

3. Add the styles for this element at the specific breakpoint, one per line. Type display: grid;.

4. Type grid-template-columns: 2fr 1fr;.

5. Type grid-gap: 15px;.

6. Type justify-items: center;.

7. Close the ruleset for your element by typing }.

8. Close the media query by typing }.

Once you extend your browser window to a width of at least 768px, your header will move the byline out from under the heading and to its right (FIGURE 17.5).

This is a good first step, but the real fun starts at the next breakpoint: 1000px.

Not Just for Screen Widths

The only media type you’ve seen in action so far is screen, and the only feature you’ve seen is related to width. While these are the most common implementations for media queries, they aren’t the only ones. For starters, there’s another common media type to look at: print.

Creating a print style sheet

Because computers print websites more or less exactly as they appear in the browser window, such printouts often aren’t very helpful to those who want readable text (FIGURE 17.6).

Luckily, you can add a media query to apply print styles to the page. Here’s how to do it, starting with the markup from the previous section.

To add printer styles to a website:

1. At the bottom of your style sheet, type @media print { to target printers.

2. Type the elements you want to include in the printout. For this example, you want the whole page, so include body, header, aside, footer {.

3. On a new line, type background: #FFFFFF;.

   This step and the next set the background color and text to white and black, respectively, so the text is more easily readable when printed.

4. On a new line, type color: #000000;.

5. On a new line, type }.

6. On a new line, type .wrapper {.

   This is the crux of the print styles.

7. On a new line, type display: block;.

   Simply setting the display to block makes the browser ignore all grid-related properties (like grid-template-columns) and moves the content into one column.

8. On a new line, type width: 75%;.

   This is a stylistic decision on my part, but it gives the reader plenty of margin on either side of the content.

9. On a new line, type margin: 0 auto;.

10. On a new line, type } to close the .wrapper ruleset.

11. On a new line, type } to close the media query.

This creates a single column of black text that looks great when printed (FIGURE 17.7).

Aside from media types (all, print, screen, speech), you can also target specific media features.

Targeting specific media features

You might want to target a specific feature on touch devices, check if a device is in portrait or landscape, or much more. This is what the extended media features are for. A great example is checking to see whether a user has enabled dark mode.

To apply dark mode styles:

1. At the bottom of your style sheet, type @media screen.

2. To specify one or more media features, type and followed by the name of the media feature in parentheses. To check for dark mode, type (prefers-color-scheme: dark) {.

3. Type the selectors you want the style to apply to; in this case, body, header, aside, footer {.

4. To make sure the text harmonizes with the overall inky environment, reverse the usual black-on-white colors. Type background: #272727; to make the page a dark gray.

5. Type color: #FFFFFF; to make the text white.

6. Because it’s light text on a dark background, a bit more spacing will make the text easier to read. Type line-height: 2em;.

7. Type }.

8. Type one more }.

Now, when you visit the site on a device using dark mode, it will look like FIGURE 17.8.

Experiment with more of these media features, as you can do checks for the following:

• Pointer (cursor) support (with any-pointer)

• Hover support (with any-hover)

• Retina displays (with resolution, min-resolution)

• Inverted colors (with prefers-color-scheme)

And much more. The possibilities for customizing a website’s experience are growing quickly!

Wrapping Up

Media queries are essential to creating great user experiences no matter what device your site is being used on. From adjusting layout based on width to swapping out colors in dark mode, your styles are completely customizable based on the user’s preferences and their browser’s capabilities.

And now that you’re familiar with everything from the basics to layouts in CSS, it’s time to get a little more advanced and look at CSS animations.

CSS Transitions

CSS transitions are some of the simplest but most delightful effects you can apply to your elements. Normally, when you change the value of a CSS property, the change happens instantaneously. A CSS transition allows you to change those values over time, which adds nuance and visual cues to your user interface. They generally occur due to some user interaction, like a hover.

The main property here is transition, and it’s a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. In transition, they are replaced by these four values:

• property: The CSS property that you want to animate. It can be any CSS property that supports transitions—which is most but not all of them. See a full list at developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.

• duration: The amount of time, in seconds, the transition should take.

• timing-function: The mathematical description of the rate at which the property changes, which can itself change over time. Common examples are ease (the default), linear, ease-in, ease-out, and ease-in-out. You can even make your own timing function with cubic-bezier.

• delay: The amount of time, in seconds, before the transition starts.

When you write the transition property, it accepts the four values in this order:

Click here to view code image

transition: [property] [duration] [timing-function] [delay]

Further, each option can have a value of 0 or 1, except property, which should have a value of none, all, or a specific CSS property. Listing just a property will assume default values for duration (0s), timing-function (ease), and delay (0s). And if you supply two numbers (in seconds), the timing-function defaults to ease.

One common application of transitions is to change background colors. CODE 18.1 shows a button defined in CSS (FIGURE 18.1).

In this example, when the user hovers their pointer over the button, only one thing changes: the background property changes from dark red to dark green. But it’s a sudden, simple change. Adding a transition can make that change smoother.

To add a background transition to an element with CSS:

1. Using the sample CSS as a starting point, after text-decoration in the a.button ruleset, type transition:.

2. Next to transition:, type background 1s ease-in;.

   This says, “Add a 1-second ease-in transition to the background property.”

That’s it! Mouse over your button to watch a much smoother transition from dark red to dark green. As an added bonus, the browser reverses the timing function when you un-hover, so you get a nice transition both on hover and when you move off the element.

As mentioned earlier, you can also use a delay value to introduce a pause before the transition. You do this by adding a fourth value to the transition property—a number in seconds. Here’s an image with a transition effect on hover (FIGURE 18.2):

Click here to view code image

img {
    padding: 20px;
    width: 250px;
    transition: width 2s ease 0.5s
}
img:hover {
    width: 350px;
}

The last point we’ll make about transitions in this chapter is that you can use the keyword all to target all the properties in the style declaration.

To enlarge an input field on focus:

1. In your style sheet, type input {.

2. Type font-size: 1.5rem;.

3. Type padding: 5px;.

4. Type transition: all 1s ease-out;.

   This transition applies the timing function ease-out (start fast and get slower) to all properties with different values upon state change, over the course of 1 second.

5. }.

6. Type input:focus {.

7. Type font-size: 2rem;.

8. Type padding: 10px;.

9. Type }.

Your input field will now enlarge when the user clicks it, taps it, or activates it by pressing the Tab key.

CSS Transformations

Another way to add simple effects to your webpages is with CSS transformations. While commonly triggered by actions by the user—like hovering, clicking, or focusing on a form element—that’s not necessarily the case, as you’ll see later in this chapter.

The transform property lets you transform an HTML element by rotating it, scaling it, skewing it, or repositioning it in the horizontal and/or vertical directions. It’s even possible to combine several transformations to achieve interesting visual effects:

• scale(x,y) changes the size of the element. It affects font-size, height, width, and padding. Use scaleX() and scaleY() to scale only a single axis. Units are a multiplier (0.5 to shrink by half, 2 to double the size, etc.).

• skew(x,y) tilts an entire container based on the values. Use skewX() and skewY() to skew only a single axis. Units are degrees.

• translate() moves a container from side to side, up and down, or both. Generally combined with the animate property. Units are standard measurement units you’ve seen throughout the book (px, em, etc.), as well as other advanced units that can represent numbers to the browser.

• rotate() rotates the element clockwise from its current position. Units are degrees.

Writing transformations

The syntax for writing a transformation is a little simpler than for transitions, but transformations can be used for more advanced animations, as you’ll see later. Here’s a basic declaration that incorporates a transformation:

Click here to view code image

div.diamond {
    background: #FF0000;
    width: 200px;
    height: 200px;
    margin: 50px;
    transform: rotate(45deg);
}

The above code results in a rotated 200 by 200 square, which looks like a diamond (FIGURE 18.3). Note that this is a static transformation, which can serve as a design element. Other transformations, like scale(), are better served when combined with a user event or an animation.

To skew a div slightly on hover:

1. In your style sheet, type div {.

2. Type background: #FF0000;.

3. Type width: 200px;.

4. Type height: 200px;.

5. Type transition: transform 1s linear;.

   This is so the element skews smoothly with a well-timed animation, instead of making the element jump to the skewed state.

6. Type }.

7. Type div:hover {.

8. Type transform: skewX(-20deg);.

   When you use degrees as the unit, you can also use negative values.

9. Type }.

Now when the user’s mouse hovers over the square, it skews to the right (FIGURE 18.4).

CSS Animations

The final and most robust way to add flair to your webpages is CSS animations. These are done using two properties: animation and @keyframes.

@keyframes is a way for you to timestamp the steps of your animations. This essentially puts your animations on a timeline that you can change. So you can say, “At start (0% of the timeline), the container should do this. At 50%, it should change to this, and at end (100%) it should be this.” You reference the timeline (or keyframes) by assigning a name to them. See CODE 18.2 for a simple example (FIGURE 18.5).

This code applies an animation that switches the background color from red to blue on a loop. animation is a shorthand property that lets you set the value of multiple properties. Here’s what’s used in Code 18.2:

• animation-name: This matches the @keyframes name.

• animation-duration: How long the animation should take in seconds.

• animation-iteration-count: How many times the animation should run. The keyword infinite is a placeholder for no limit.

There are other animation properties that can be represented in the animation shorthand property. Here’s the full list in the order they’re expected:

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

• animation-direction

• animation-fill-mode

• animation-play-state

Since this is an introduction to animations, this book doesn’t cover everything. If you’d like to learn more, check out this MDN article: developer.mozilla.org/en-US/docs/Web/CSS/animation.

Combining animations

You can add more than one animation at once. To demonstrate, you’ll convert the switch square to a circle. border-radius is used for this task because the value you provide for the property lets you set how much you want to “round off” the corners, as a percentage. Setting it to 50 percent rounds them so much that the square looks like a circle.

To convert a square to a circle:

1. In the 0% keyframe, below background: red;, type border-radius: 0%;.

2. In the 50% keyframe, below background: blue;, type border-radius: 50%;.

3. In the 100% keyframe, below background: red;, type border-radius: 0%;.

This creates a red square that transforms into a blue circle (FIGURE 18.6).

Animations using the transform property

Using transform in animations is a great way to save performance and do neat things like actually moving objects. This is where the translate() function from earlier comes into play. Using the CSS code below as a starting point, you’ll make the ball that is generated by the following style declaration bounce up and down (FIGURE 18.7). In your HTML, add the following:

<p class="ball"></p>

And in your CSS, add the following:

p.ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #000000;
}

To bounce the ball:

1. In p.ball, after background: #000000;, type animation: bounce 1s infinite alternate;.

   bounce is the name we’re giving to the animation we’re about to define.

   The infinite value means “Loop this animation and never stop it.”

   The alternate value means “Execute the animation, and then play the animation in reverse.”

2. Type animation-timing-function: linear;.

   This timing function, linear, says that the item should animate at an even, consistent speed the whole time.

3. Type } to close the p.ball declaration.

4. Type @keyframes bounce {.

   This is where we define our animation. Notice that the name, bounce, is also referenced in the animation property in step 1.

5. Type 0% {.

6. Type transform: translate(0px, 0px);.

   We define no translation at 0 percent (or the first step of the animation) so that the ball returns to its starting state.

7. Type }.

8. Type 100% {.

   This sets a keyframe at the very end of the animation (at 100 percent of the timeline).

9. Type transform: translate(0px, 400px);.

   Since the translate property moves the element along the x and y axes, this says, “Move the ball 400px along the y axis.” Since the starting point is 0px, the ball will move down 400px.

10. Type }.

11. Type }.

For a complete listing of the final CSS see CODE 18.3. To see the results (and expand upon them), check out Video 18.6 (FIGURE 18.8).

Wrapping Up

What a chapter! Now you know how to add effects and animations to your elements. This will help you create more dynamic pages, and it allows for smoother, less jarring state changes to let the user know what’s happening on your page.

Of course, you’ve only scratched the surface. There’s a ton to know about CSS animations, and lots of fantastic examples out there. To go deep with CSS animations, check out this article on CSS-Tricks: css-tricks.com/almanac/properties/a/animation/.

And if you want to see what you can do, the “picked pens” on CodePen never disappoint: codepen.io/.

You may have noticed a lot of repetition of CSS properties (like font, color, and background) in this chapter and elsewhere. The next chapter shows you how to remove some of that repetition with CSS variables.

What Are Variables?

So far, as you’ve written CSS you’ve needed to manually type styles each time you want to use them. For example, let’s say you have an accent color on your website of #EB1DFE (). You can apply that to buttons, borders, links, and so on. But for each instance, you’ll need to type #EB1DFE.

But what if you decide to change it to a different accent color? You’ll need to find all the references and manually change them. More so, if you want to change only some of them, a file-wide Find/Replace won’t work. But there’s a better way. You can use custom properties, which are often referred to as variables.

Variables act like placeholders; they are a way to store information in order to reference it later, and they are a part of every programming language. With variables, there are two components: the name and the value. When you define (or set) a variable, you assign it a value. Then you can use the variable name instead of the value.

In CSS, to reference a variable, you use the function var() and place the variable between parentheses. A function in this instance is a way to execute a piece of code that tells the browser, “Grab the value of the variable and use that.”

The beauty of variables is you only need to change the accent color value in one place, and it will update everywhere.

To make a CSS variable assignment:

1. In your style sheet, at the top, type :root {.

   This defines the scope of the variable (more on that later).

2. Now it’s time to make the assignment. Type --accentColor: #EB1DFE;.

   Every variable needs to start with a double hyphen (--). The name should describe what it’s representing.

   The value can be any valid CSS value. In this case, it’s a hex representation of a color.

3. Type }.

4. On the next line, type a { to assign the style to links.

5. Type color: var(--accentColor);.

6. Type }.

This makes all your links a nice pink (FIGURE 19.1).

To see the full syntax, check out CODE 19.1.

It may seem trivial here, but imagine you’ve used the color dozens of times through multiple style sheets. It can be a daunting task to remember where the instances are and then update all of them, especially if a simple find and replace won’t work—what if you want to keep some of the values but not all of them?

Since variables are native CSS, they work just like any other property or ruleset:

• They cascade, which means they can easily be overwritten.

• They can be manipulated by JavaScript (which is outside the scope of the book).

• They don’t require any additional tools to work.

Variable scope

When you talk about variables, you can’t ignore a discussion about scope. The scope of a variable determines the context in which it’s “visible,” or can be referenced. In the accent color task, you used the keyword :root, which means, “The scope of this variable is the entire document.” But you could have just as easily used div or p, making the scope only those elements. You can also change the scope by defining the same variable in a different ruleset (FIGURE 19.2).

To change the scope of a CSS variable:

Here is your HTML:

Click here to view code image

<main>
<a href="https://google.com"> Visit Google</a>
</main>
<aside>
    <a href="https://casabona.org">
    →Learn More</a>
</aside>

1. In your style sheet, type :root {.

2. Type --accentColor: #EB1DFE;.

3. Type }.

4. On a new line, type the name of the element whose property you want to change. In this case, use aside {.

5. Type the name of the variable for the property you want to change. For this example, use --accentColor: #008800;.

6. Type }.

7. On a new line, type a {.

8. Type color: var(--accentColor);.

   This single declaration is all that is needed. If the <a> tag is the descendant of an <aside> element, its --accentColor value will be #008800. Otherwise, it will be #EB1DFE.

9. Type }.

You can think of variables as phone numbers, where the area code is the scope. Two people in the US can have the same phone number if they aren’t in the same area code (just ask anyone whose number is 867-5309, from the Tommy Tutone song “Jenny”).

If you don’t dial the area code, your local area code is assumed. If you dial the area code, you’re changing the scope of the phone number. Variables are the same way.

Simplifying Styles with Variables

The ability to change the scope of CSS variables means you can write more succinct CSS. In the scope task, you saw that there were two variable definitions but only one ruleset for the <a> tag. This doesn’t just apply to element rulesets. You can change variables through media queries too.

This gives you the chance to define nearly all of your styles early in your CSS, without the need to create large sections of code dedicated to media queries. If you change only the variable values, and not entire styles, your media queries will be much shorter, and there’s less work for the browser to do, making your website more efficient.

To create a grid using variables and media queries:

Here’s the HTML code you’re working with:

Click here to view code image

<div>
    <p>This is grid item 1</p>
    <p>This is grid item 2</p>
    <p>This is grid item 3</p>
</div>

1. At the top of your style sheet, type :root {.

   This line will define the default values for our CSS variables. We start mobile first, so the grid template will be a single column.

2. On a new line, type --gridTemplate: 1fr;.

   Remember here that we are only defining the variable, and not the style. That comes later.

3. On a new line, type --gridGap: 0;.

4. On a new line, type }.

5. On a new line, type @media screen and (min-width: 600px) {.

   This is the only reference to a media query, and its sole purpose is to change the values of the variables, not to assign actual styles. At the 600px breakpoint, the variables will change.

6. On a new line, type :root {.

   Since the scope of the variables in step 1 is :root, we need to reference that same scope in the media query.

7. On a new line, type --gridTemplate: 1fr 1fr 1fr;.

   At 600px, we want the grid layout to change from one column to three columns, so we’re changing the value of the variable.

8. On a new line, type --gridGap: 10px;.

   The same goes for the gap between columns. Changing the variable here will change the styles at the 600px breakpoint.

9. On a new line, type } to close the :root variable declarations.

10. On a new line, type } to close the media query.

11. On a new line, type div {.

    This is the only div ruleset we’ll need, thanks to CSS variables.

12. On a new line, type display: grid;.

13. On a new line, type grid-gap: var(--gridGap);.

    The variable --gridGap will change based on the media query declaration above, making this div responsive without explicitly putting it into its own media query ruleset.

14. On a new line, type grid-template-columns: →var(--gridTemplate);.

    Same goes for --gridTemplate. This value will change based on the breakpoint.

15. On a new line, type } to close the div.

The resulting code stacks paragraph elements inside the div in a single column when the viewport is narrow (FIGURE 19.3). If the viewport is widened beyond 600px, the paragraphs are distributed into three columns (FIGURE 19.4). See CODE 19.2 for the complete code listing.

For comparison’s sake, CODE 19.3 shows the code you’d have to write if you didn’t use CSS variables.

Calculations with Variables

Aside from the var() function, CSS also provides the calc() function, which allows you to perform basic arithmetic operations in CSS. You can do the following:

• Addition with the plus sign (+)

• Subtraction with the minus sign (-)

• Multiplication with the asterisk (*)

• Division with the forward slash (/)

This allows you to include calculations either in new variables or on the fly—that is, in the property definition. One big benefit is that you can mathematically define padding and properly scale font sizes, making your styles more consistent.

In other words, we can size various properties proportionally derived from a couple of base values.

To proportionally change a variable with calc():

This HTML is straightforward:

Click here to view code image

<h1>This is a heading</h1>
<p>This is body text!</p>

1. At the top of your style sheet, type :root {.

2. On a new line, type --fontSize: 1.25rem;.

3. On a new line, type --fontSizeHeading: calc(.

   This opens up the calc() function for us.

4. Type var(--fontSize) * 3.

   This is the operation. Remember that we need to use the var() function to get the value of --fontSize. Then we multiply it by 3. We’ll use this calculated value for h1, and we want it to be three times as large as the body’s font size.

5. Close the function with );.

6. On a new line, type }.

7. On a new line, type body {.

8. On a new line, type font-size: var(--fontSize);.

9. On a new line, type }.

10. On a new line, type h1 {.

11. Type font-size: var(--fontSizeHeading);.

    You could also use font-size: calc(var(--fontSize) * 3); and forgo defining a second variable.

12. On a new line, type }.

You can see the full CSS in CODE 19.4. The result is that the body copy is slightly bigger than the browser default, and the <h1> tag is three times as big as the body copy (FIGURE 19.5).

Wrapping Up

CSS variables can change the way you write CSS, especially as it becomes more complex. Between overriding it easily and making calculations, you can do some pretty powerful stuff.

And there’s something else that can take your CSS to the next level: preprocessors.

How CSS Preprocessors Work

A CSS preprocessor is essentially a programming language that produces valid CSS. You write in the unique syntax of the preprocessor (which you’ll learn about in this chapter), and the preprocessor takes what you write and converts it into CSS.

Doing this allows the preprocessors to add new features to CSS without changing how the browser works. Think of it this way: if you want more storage space in your laptop, you’re probably not going to crack it open to replace the hard drive—you’ll buy an external hard drive. It sits on the outside of your computer, but it still offers more space for you.

CSS preprocessors act similarly. They add more features you can use to write CSS without cracking open the browser to add the support. And the beauty of most preprocessors is that they look enough like CSS that if you already know CSS you can quickly get started using one.

Why use a preprocessor over native CSS?

With CSS variables, CSS Grid, Flexbox, and the continued evolution of CSS, the gap between native CSS and preprocessors is closing (FIGURE 20.1).

Still, preprocessors offer a number of benefits over native CSS:

• Easier nesting and cascading. Instead of writing out the entire selector (like div.wrapper main section p.alert), you can nest a selector inside another one to create a visual hierarchy similar to HTML. You’ll learn more about this later.

• Repeatable/reusable rulesets. You saw this a bit with variables, but preprocessors allow you to programmatically generate CSS rulesets. For example, instead of manually writing the calculations for scaled headings, as you did in Chapter 19, you can write a few lines of code saying, “Starting with h1, decrease the size of each heading by 20 percent.”

• Built-in functions. Easily generate color schemes, perform advanced math operations, and more with built-in functions.

• Organization. Create multiple preprocessor files and compile them into a single CSS file.

• Auto-prefixing. Automatically prefix your CSS properties without having to add them manually every time.

Your mileage will vary based on the preprocessor you choose. On that note, while there are a few different preprocessors to choose from, this book uses Sass/SCSS.

Getting Started with Sass

When deciding whether it’s worthwhile to use Sass or any other CSS preprocessor, keep in mind that you will need to add a compiler to your workflow. Throughout this book, you’ve been able to write HTML and CSS in your text editor, save it, and immediately open the file in your browser. With Sass there’s an extra step involved: the Sass file needs to be compiled.

Before you get started, you should know there are technically two versions of Sass you can write: Sass and SCSS. The main difference is the syntax. Sass looks more like a programming language, and SCSS looks more like CSS. This book uses SCSS. All files written with SCSS use the file name extension .scss.

For the purposes of this book, there are two ways you can get started with Sass:

• You can use CodePen. This does not require installing anything additional on your computer. You can practice writing it, see the results, and then determine later if you’d like to continue with it. As an added bonus, you can copy the compiled CSS and paste it right into your own .css files.

• You can install an app that compiles Sass. This allows you to write Sass files and create CSS files, which you can then use on your websites.

Here’s how to do both.

To write Sass using CodePen:

1. Go to codepen.io.

2. Do one of the following to create a Pen (a scratchpad for code snippets):

   If you already have an account and are logged in to it, click Pen in the left sidebar under the Create heading (FIGURE 20.2).

   

   If you do not have an account or you are logged out, click the Start Coding button.

3. In the new Pen, find the CSS box, and click the Open CSS Settings button; it has a cog icon ().

4. In the dialog box that opens, click the CSS Preprocessor menu (FIGURE 20.3).

   

5. Choose SCSS from the CSS Preprocessor menu.

6. Click Close. Now the CSS box should be labeled CSS (SCSS).

   You’re able to type Sass syntax into it now.

7. Let’s start small. You’ll learn about variables later in the chapter, but for now, know that the syntax is a dollar sign ($) and the variable name. Create a variable for background color by typing $bgColor: #EB1DFE;.

   This creates a variable assignment where $bgColor has the value #EB1DFE.

8. On a new line, type body {.

9. On a new line, type background: $bgColor;.

   The background of the pen should immediately turn a dark pink.

10. On a new line, type }.

11. To view the compiled CSS, click the arrow button on the right ().

12. Choose View Compiled CSS (FIGURE 20.4).

    

    Your SCSS code is replaced with compiled CSS, and “Compiled” appears in the title bar of the CSS box.

To write Sass using an app on your computer:

1. Go to scout-app.io.

2. Under Sass for Web Designers, download the version of Sass for your computer’s operating system (FIGURE 20.5).

   

   For macOS, click the OSX button; for a PC, click Windows.

3. Install the application.

   When the installation is complete, you’ll add a project to Scout.

4. On your desktop, create a new website folder. I’ve called mine website. Then create two new subfolders named scss and css.

5. Launch Scout-App, and click the folder icon under Import Projects (FIGURE 20.6).

   

   A file navigation folder opens.

6. Select the website folder you created in step 4.

7. On the Add Project screen (FIGURE 20.7), click in the Input Folder field and navigate to the scss folder you just created.

   

   Scout-App is now watching the input folder for any changes.

8. Click in the Output Folder field, and select the css folder you just created.

   Scout-App will automatically save any changes from the input folder into this output folder.

9. Test this out. In a text editing program, create a new file (it doesn’t need any content) and save it as style.scss in the scss folder.

10. Check the css folder. You should now have a new file named style.css.

    If you don’t, you may need to press the play button next to the project name.

Writing Sass

At the beginning of this chapter I mentioned that there are full books and courses created just for Sass. But there are a few features worth highlighting:

• Nesting selectors

• Variables that don’t rely on browser support

• Math operators

• Extending rulesets

Nesting CSS selectors in Sass

One of the cooler features of Sass is its ability to reformat selectors in nested form, which saves you from having to write out increasingly long selectors for specificity. The benefit, besides a better visual representation of the family tree than in normal CSS, is that you can include declarations alongside the dependents you want. For example, this Sass code:

Click here to view code image

.wrapper {
    background: #000000;
    color: #FFFFFF;
    main {
        aside {
            border: 1px solid #FFFFFF;
        }
    }
}

… compiles to this in CSS:

.wrapper {
    background: #000000;
    color: #FFFFFF;
}
.wrapper main aside {
    border: 1px solid #FFFFFF;
}

Notice that the CSS targets aside elements that are children of main and grandchildren of .wrapper. By writing the ruleset as nested selectors, it reads, “aside is inside main, and both of them are inside .wrapper.” This ensures specificity and makes your CSS easier to read. And as your CSS grows, you won’t have to worry about specificity as much—as long as you have the proper nesting.

An important character for nesting is the ampersand (&). It serves as a placeholder for the parent selector. So .wrapper main would become & main. This is helpful, as it allows you to use the parent (or outer) selector in more advanced ways, like for pseudo-selectors. Here’s how to use the parent selector.

To target :first-child while nesting in Sass:

1. In your style.scss file, type p {.

2. Type color: #880000;.

3. On a new line, indent and type &:first-child {.

4. Type color: #008800;.

5. Type font-size: 1.5rem;.

6. Type }.

7. Type }.

The resulting Sass will look like this:

p {
    color: #880000;

    &:first-child {
        color: #008800;
        font-size: 1.5rem;
    }
}

It will be compiled to this CSS:

p {
    color: #880000;
}
p:first-child {
    color: #008800;
    font-size: 1.5rem;
}

If you’re using Scout-App, your output might look a little different. Make sure that in your project settings, Production is selected and Expanded is chosen from the Output Style menu (FIGURE 20.8).

$bgColor: #EB1DFE;

body {
    background: $bgColor;
}