Introduction

These days, everyone is a Web designer. Whether you are adding a comment to a Facebook page, creating your own blog, or building a Fortune 50 Web site, you are involved in Web design.

As the Web expands, everyone from PTA presidents to presidents of multinational corporations is using this medium to get messages out to the world because the Web is the most effective way to communicate your message to the people around you and around the world.

Knowing how to design for the Web isn’t always about designing complete Web sites. Many people are creating simple Web pages for auction sites, their own photo albums, or their blogs. So, whether you are planning to redesign your corporate Web site or place your kid’s graduation pictures online, learning Cascading Style Sheets (CSS) is your next step into the larger world of Web design.

What Is This Book About?

HTML is how Web pages are structured. CSS is how Web pages are designed. This book deals primarily with how to use CSS to add a visual layer to the HTML structure of your Web pages.

CSS is a style sheet language; that is, it is not a programming language. Instead, it’s code that tells a device (usually a Web browser) how the content in a file should be displayed. CSS is meant to be easily understood by anyone, not just “computer people.” Its syntax is straightforward, basically consisting of rules that tell an element on the screen how it should appear.

This book also includes the most recent additions to the CSS language, commonly referred to as CSS3 (or CSS Level 3). CSS3 builds on and extends the previous version of CSS. For the time being, it’s important to understand what is new in CSS3 because some browsers (most notably Internet Explorer) have incomplete support or no support for these new features.

CSS3 Visual QuickStart Guide has three parts:

• CSS Introduction and Syntax (Chapters 1–4)—This section lays the foundation you require to understand how to assemble basic style sheets and apply them to a Web page. It also gives you a crash course in HTML5.

• CSS Properties (Chapters 5–12)—This section contains all the styles and values that can be applied to the elements that make up your Web pages.

• Working with CSS (Chapters 13–15)—This section gives advice and explains best practices for creating Web pages and Web sites using CSS.

Who is this book for?

To understand this book, you need to be familiar with HTML (Hypertext Markup Language). You don’t have to be an expert, but you should know the difference between a <p> element and a <br> tag. That said, the more knowledge of HTML you bring to this book, the more you’ll get out of it.

Chapter 2 deals briefly with HTML5, bringing you up to date on the latest changes. If you are already familiar with HTML, this chapter has everything you will need to get going.

What tools do you need for this book?

The great thing about CSS is that, like HTML, it doesn’t require any special or expensive software. Its code is just text, and you can edit it with programs as simple as TextEdit (Mac OS) or Notepad (Windows).

Values and Units Used in This Book

Throughout this book, you’ll need to enter various values to define properties. These values take various forms, depending on the needs of the property. Some values are straightforward—a number is a number—but others have special units associated with them.

Values in angle brackets (< >) represent one type of value (Table i.1) that you will need to choose, such as <length> (a length value like 12px) or <color> (a color value). Words that appear in code font are literal values and should be typed exactly as shown, such as normal, italic, or bold.

Table i.1. Value Types

Length values

Length values come in two varieties:

• Relative values, which vary depending on the computer being used (Table i.2).

Table i.2. Relative Length Values

• Absolute values, which remain constant regardless of the hardware and software being used (Table i.3).

Table i.3. Absolute Length Values

I generally recommend using ems to describe font sizes for the greatest stability between operating systems and browsers.

Color values

You can describe color on the screen in a variety of ways, but most of these descriptions are just different ways of telling the computer how much red, green, and blue are in a particular color.

Chapter 7 provides an extensive explanation of color values.

Percentages

Many of the properties in this book have a percentage as their values. The behavior of each percentage value depends on the property in use.

URLs

A Uniform Resource Locator (URL) is the unique address of something on the Web. This resource could be an HTML document, a graphic, a CSS file, a JavaScript file, a sound or video file, a CGI script, or any of a variety of other file types. URLs can be local—describing the location of the resource relative to the current document—or global—describing the absolute location of the resource on the Web and beginning with http://.

Reading This Book

For the most part, the text, tables, figures, code, and examples should be self-explanatory. But you need to know a few things in advance to understand this book.

CSS value tables

Each section that explains a CSS property includes a quick-reference table of the values that the property can use, as well as the browsers compatible with those values . Table i.4 lists the browser icons and abbreviations used in this book.

Table i.4. Browser Abbreviations

The property tables show you the values available with a property, the earliest browser version in which the value is available, and with which version of CSS the value was introduced.

The Code

For clarity and precision, this book uses several layout techniques to help you see the difference between the text of the book and the code.

Code looks like this:

<style type="text/css">
p { font-size: 12pt; }
</style>

All code in this book is presented in lowercase. In addition, quotes in the code always appear as straight quotes (“ or ’), not curly quotes (“ or ’). There is a good reason for this distinction. Curly quotes (also called smart quotes) will cause the code to fail.

When you type a line of code, the computer can run the line as long as needed; but in this book, lines of code have to be broken to make them fit on the page. When that happens, you’ll see a gray arrow , indicating that the line of code is continued from above, like this:

.title { font: bold 28pt/26pt times, serif; color: #FFF; background color: #000; background-image: url(bg_title.gif); }

A numbered step often includes a line of code in red from the main code block:

p { color: red; }

This is a reference to help you pinpoint where that step applies in the larger code block that accompanies the task. This code will be highlighted in red in the code listing to help you more easily identify it.

Web Site for This Book

I hope you’ll be using a lot of the code from this book in your Web pages, and you are free to use any code in this book without asking my permission (although a mention of the book is always appreciated). However, be careful—retyping information can lead to errors. Some books include a CD-ROM containing all the code from the book, and you can copy it from that disc. But guess who pays for that CD? You do. And CDs aren’t cheap.

But if you bought this book, you already have access to the largest resource of knowledge that ever existed: the Web. And that’s exactly where you can find the code from this book.

My support site for this Visual QuickStart Guide is at www.jasonspeaking.com/css3vqs.

This site includes all the code you see in the book, as well as quick-reference charts. You can download the code and any important updates and corrections from this site.