When a jazz musician creates an improvisation, no matter how intricate, she plays by using combinations of seven musical notes (A through G). When an artist creates a picture, no matter how detailed, he paints by using combinations of three primary colors (red, yellow, and blue). When poets create verse, no matter how inventive, they write by using words that are combinations of the 26 letters of the alphabet. These examples show that creativity and play don’t require elaborate resources or complex raw materials. Imagination and curiosity combined with a few building blocks are all you need to express yourself in almost any art, including the art of web page design. HTML and CSS provide those building blocks. And although there are more of those blocks than there are musical notes, primary colors, or even letters of the alphabet, there aren’t too many, but more than enough to let you express yourself on an exciting modern canvas: the web.

What Is HTML?

The hardest thing about HTML by far is its name. HTML stands for Hypertext Markup Language, which sounds about as inviting as a tax audit. But it becomes a lot less intimidating when you break down its terms.

I’ll begin with hypertext. A link, as I’m sure you know, is a special word or phrase (or even an image) in a web page that “points” to another web page. When you click one of these links, your browser transports you to the other page immediately. The folks who invented the web used the geeky term hypertext link for this special text. (The prefix hyper means beyond.) Because these hypertext links are the distinguishing features of the web, pages are often known as hypertext documents. So, HTML has hypertext in it because you use it to create these hypertext documents. (It would be just as accurate to call this language WPML, or Web Page Markup Language.)

My dictionary defines markup as (among other things) “detailed stylistic instructions written on a manuscript that is to be typeset.” For the purposes of this chapter, I can rephrase this definition as follows: “detailed stylistic instructions typed in a text document that is to be published on the World Wide Web.” That’s HTML in a nutshell. It has a few simple alphabetic codes—called tags—for detailing things such as herding text into paragraphs, creating bulleted lists, inserting images, and (of course) defining links. You type these tags in the appropriate places in an ordinary text document, and the web browser handles the dirty work of translating — or rendering — the tags into paragraphs, lists, links, and so on. What happens when you use a web browser to load your text document? Instead of showing the tags, the browser automatically renders the tags so that your page is laid out according to what the tags suggest.

The word language may be the most intimidating because it seems to imply that HTML is a programming language. Fortunately, you can rest assured that HTML has nothing to do with computer programming. Rather, HTML is a “language” in the sense that it has a small collection of “words” that you use to specify how you want your text to appear—as a heading or as a numbered list, for example.

In short, playing with HTML means inserting a few codes strategically between stretches of regular text in such a way that you end up with an honest-to-goodness web page. As far-fetched as this may sound to you now, by the end of this book you’ll have created several impressive HTML projects.

What Can You Do with HTML?

When you add HTML to a document, you’re essentially giving the web browser a series of instructions that specify how you want the page to be structured within the browser window. You use HTML to specify, in its succinct way, the overall structure of the page and to let the browser know what you want each part of the page to be.

You use HTML to supply instructions like the following:

• Use this line of text as the main heading of the page.
• Treat these lines of text as subheadings.
• Make this chunk of text a separate paragraph.
• Turn these five consecutive items into a bulleted list.
• Convert these six consecutive steps to a numbered list.
• Make this phrase a link.

These instructions likely seem a bit abstract to you now, but they will be thoroughly explored throughout the book.

What Is CSS?

When you build a house, one of the early jobs is framing, which involves putting up the basic structure for the floors, walls, and roof. That foundational framing is what you’re doing when you add HTML to your page: you specify what you want to appear on the page, what you want the page’s various items to be (such as a heading, paragraph, or list), and the order in which you want these items to appear.

But as a house isn’t a home without finishing touches such as molding, paint, and flooring, your document isn’t a modern example of a web page until you’ve used CSS to add some finishing work. CSS stands for Cascading Style Sheets, and as is the case with HTML, its name is more complicated than what it does. I’ll break down the words, although in this case, I’ll address them slightly out of order for simplicity’s sake.

First, a style is an instruction to the browser to modify how it displays something on the page. (That something could be a word, a paragraph, or every instance of a particular HTML element.) These modifications usually are formatting-related, such as changing the typeface or the text color, but you can also use styles to control page layout and even to create animated effects. If you’ve ever used styles in a word processing program, you already have a good idea of what web page styles can do.

Okay, so what’s a sheet? In the early days of publishing, firms maintained manuals that defined their preferred formatting for typefaces, headings, pulled quotes, and so on. This formatting was known as house styles, and the manual was called a style sheet. In web design, a style sheet performs essentially the same duties. It’s a collection of styles that get applied to a particular web page.

To understand the cascading part of CSS, you need to know that, in the same way that water running down a hill can take different routes to the bottom, styles can take different routes before they get applied to an element. Some styles come from the web browser; some styles come from the user (if the user configures her browser to use a different default type size, for example); and some styles come from your style sheets. When these styles overlap, the web browser uses a complex algorithm to decide which style gets applied, and that algorithm is called the cascade.

You use CSS, in other words, to define how your page looks. It may seem that you use CSS only to add “eye candy” to a page, and it’s certainly true that CSS offers you the tools to make only trivial or frivolous modifications. How your page looks, however, is every bit as important as what your page contains, because few people will bother to read text that’s formatted poorly or incoherently.

What Can You Do with CSS?

When you add CSS to a document, you’re telling the web browser how you want specific elements to look. Each style is a kind of formatting instruction to the browser.

You can use these instructions in a wide variety of ways that are similar to the following examples:

• Display all the links in red text.
• Use a specific font for all the headings.
• Create a bit of extra space around this paragraph.
• Add a shadow to this photo.
• Use lowercase Roman numerals for all numbered lists.
• Always display this section of text on the far-right side of the window.
• Rotate this drawing by 45 degrees.

As with HTML, this may seem arcane to you right now, but we will delve into each point in depth in the book.

A Note about the Separation of Structure and Presentation

While you’re trying to wrap your head around the differences between HTML and CSS, let me offer a key distinction. Although I’m generalizing somewhat, here’s the basic difference between the two:

• HTML defines the overall structure of the web page.
• CSS defines the visual presentation of the web page.

Some overlap exists here (HTML can affect the presentation of the page, for example, and CSS can affect the layout), but for the most part, HTML and CSS enable you to separate structure and presentation, respectively. This distinction is important because when you keep these two aspects of a web page separate, your page will be easier to build, easier to maintain, and easier to customize.

Why learn HTML and CSS

With a knowledge of HTML and CSS, a user can build their own web pages using no tool other than a simple text editor. On a personal level, building web pages enables the user to express their creativity and show it to the world. At work, building web pages enables the user to showcase a current project or process. It’s a very useful skillset to have!

Introducing the Web Design Playground

Right now, though, you’re probably itching to start playing around with HTML and CSS and seeing what these fascinating technologies can do. I don’t blame you. One of this book’s core ideas is that the best way to learn HTML and CSS is to have fun playing with your new knowledge, trying out different tags and properties, and experimenting with different values. To help you do all that with the least amount of fuss, I’ve built an online tool called the Web Design Playground, shown in Figure 1, which you can access at https://webdesignplayground.io/.

Figure 1 The Web Design Playground lets you play with HTML and CSS online.

You can use this site to try out HTML tags and CSS properties, load the book’s example files, run through lessons that help you learn a topic, access various “construction kits” for experimenting with features, save your work, and even download the resulting HTML and CSS files to your computer.

Who is this book for?

This book takes you step by step from writing your first line of HTML to creating interesting, attractive web pages. If you’re interested in learning how to build web pages starting from the first principles, then this book is for you. If you can use a web browser, you’re ready to start!

What will you learn in this book?

• How to use HTML to structure a web page.
• How to use CSS to style a web page.
• Modern page layout techniques such as Flexbox and Grid.
• How to use colors in web design.
• How to use typography to make web page text look awesome.

If you want to learn more, check out the book here.