INTRODUCTION

WELCOME TO BEGINNING CSS: Cascading Style Sheets for Web Design, Third Edition

Cascading Style Sheets (CSS) are the tool that web designers and developers use alongside markup languages such as HTML and XHTML to build websites. CSS provides web browsers with the information they need to control the visual aspect of a web page, such as the position of HTML elements, text styles, backgrounds, colors and images, and much more.

Advanced CSS techniques give website authors the ability to tailor layouts and designs for mobile web browsers, as well as the skills they need to create websites for regular desktop browsers. I will introduce you to the basics of writing CSS for mobile devices.

WHAT'S NEW IN THE THIRD EDITION?

The second edition of this book, written entirely by Richard York, provides very thorough and complete coverage of CSS at the time of its writing. Possibly no other CSS book for beginners goes into so much detail and depth.

For the third edition, I have taken Richard's work and streamlined it to focus on the techniques that professional authors of CSS use every day to create the wide range of sites on the Web today. My intention is to provide an introduction to CSS that is easy to dive into and enables you, the reader, to get up, running, and productive with CSS as quickly as possible.

Many of the words you will read are Richard's, but I have attempted to mould them around my own experience as a long-time author of CSS used on websites big and small, complex and simple.

While some attention is paid to the older browsers still in use today, I have chosen to spend more time on the newer crop of browsers and those likely to be significant in the future, providing you with up-to-date knowledge and skills.

The code in all of the examples is syntax highlighted for easy readability, and the exercises that you will encounter are inspired by real-world uses of CSS and HTML, helping you to write CSS in the right way from the start.

I encourage you to have fun with each exercise, learning not only by following my instructions, but also by experimenting with the properties and values that I introduce you to.

WHO IS THIS BOOK FOR?

This book is for anyone looking to learn how to use Cascading Style Sheets to style websites. Designers, in particular, will benefit from a good grounding in CSS, as it is the key to producing websites from their designs.

To get the most from this book, experience with HTML is useful. While all of the HTML you need to follow the examples is provided, you will gain a greater understanding of the best methods for using CSS to create websites if you already know how to write markup.

WHAT DOES THIS BOOK COVER

This book covers portions of the CSS Level 1, 2, 2.1, and 3 specifications. These specifications are created by an independent, not-for-profit Internet standards organization called the World Wide Web Consortium (W3C) that plans and defines how Internet documents work. The majority of the book is written using what is defined in the CSS Level 2.1 specification, with a sprinkling of CSS 3 to make things interesting.

This book leads you through how to write CSS so that it is compatible with all of the most popular web browsers. I have focused on all of the following popular browsers:

• Microsoft Internet Explorer 8 and 9 for Windows
• Mozilla Firefox 3.6 for Mac OS X, Windows, and Linux
• Google Chrome 10 for Mac OS X and Windows
• Safari 5 for Mac OS X and Windows
• Opera 11 for Mac OS X, Windows, and Linux

The preceding browsers make up over 99 percent of the web browser market share at the time of this writing. For your convenience, this book also includes an integrated CSS feature reference throughout the book, as well as notes on browser compatibility. A CSS reference is also included in Appendix C.

HOW THIS BOOK IS STRUCTURED

This book is divided into three parts. The following explains each of these three parts in detail, and what each chapter covers.

Part I: The Basics

Throughout Chapters 1 through 4, you learn the founding principles of CSS-based web design.

• Chapter 1, “Introducing Cascading Style Sheets”: In this chapter I talk about what CSS is and the advantages it has over outdated ways of styling content, give a brief overview of the history of CSS, and then show you how to make a web page with HTML and CSS. The chapter finishes with an overview of the major web browsers available today.
• Chapter 2, “The Bits That Make Up a Style Sheet”: In Chapter 2, I look at the component pieces of CSS and how they fit together. I introduce rules, selectors, declarations, properties, and values, and show you the range of value types that can be used in CSS. Next are the various methods of including CSS in HTML documents and finally a discussion of why good HTML is important.
• Chapter 3, “Selectors”: In Chapter 2, I introduce you to the simplest form of selectors. In Chapter 3, I talk about the other basic selectors that you will use throughout this book.
• Chapter 4, “The Cascade and Inheritance”: In Chapter 4, I look at the cascade, a fundamental principle of CSS, and how inheritance and precedence works. You will learn how to calculate which styles take effect when rules conflict, and how to use the cascade to your advantage.

Part II: Properties

Throughout Chapters 5 through 13, you learn about properties that are used to manipulate the presentation of a document.

• Chapter 5, “Applying Font Faces”: Part II starts with one of the first things you are likely to want to do with CSS — style text. Chapter 5 shows you how to set a font and size for text to be displayed in, and how to make text italic, bold, or small caps.
• Chapter 6, “Manipulating the Display of Text”: In Chapter 5, I showed you the basics of styling text. Now I move on to further properties for styling text, such as adjusting the height of lines of text; controlling the spacing between letters and words; text alignment; and other variations like underlined, overlined, or strikethrough text. I also show how to control the case of text by making text all lowercase, uppercase, or capitalized.
• Chapter 7, “Background Colors and Images”: In Chapter 7, I move on to the CSS properties that control the setting of background colors and images, as well as properties that allow you to adjust the position of background images, the way they tile, and how to fix them in place so that they remain static even when you scroll the browser window.
• Chapter 8, “The Box Model: Controlling Margins, Borders, Padding, Width, and Height”: In Chapter 8, I cover an important part of CSS, and the key to creating layouts: The Box Model. You will learn how to set margins and padding to elements, as well as borders, width, and heights.
• Chapter 9, “Floating and Vertical Alignment”: In Chapter 8, I introduce you to some of the properties that will allow you to create layouts with CSS. In Chapter 9, I will show you how to take this a step further, by creating columns of content with float and clear. I also discuss the vertical-align property, which is used to create effects like subscript or superscript text, as well as to control vertical alignment in table cells.
• Chapter 10, “Styling Lists”: Lists are a common element for marking up content, including creating site navigation. In this chapter, I look at the properties CSS provides to control presentation of ordered and unordered lists: how to use predefined list markers and custom list markers and how to control the position of list markers.
• Chapter 11, “Positioning Content within a Document”: In Chapter 11, I cover the final method for creating layouts, positioning content relative to other page elements or the viewport itself, as well as show you how to create layers of overlapping content.
• Chapter 12, “Styling Tables”: In Chapter 12, I present the different properties that CSS provides for styling HTML tables. The properties presented in this chapter let you control the spacing between the cells of a table, the placement of the table caption, and whether empty cells are rendered.
• Chapter 13, “Create a Complete Layout”: In the final chapter of this Part, I give you an opportunity to put the CSS that you have learned so far into practice as we create a complete layout, from HTML to CSS. I also introduce you to some more advanced CSS: using custom fonts and setting gradient backgrounds.

Part III: Advanced CSS and Alternative Media

In Part II, I cover the basics; in Part III, we move on to advanced techniques, which give you more fine control when styling content, and show you how to style for different media types such as print and mobile, as well as introduce a few more properties.

• Chapter 14, “Advanced Selectors”: Chapter 3 introduces you to the basic selectors that you will use to write CSS. In Chapter 14, I show you more advanced selectors that don't have good support in older browsers, such as Internet Explorer 6, but can be a powerful addition to your toolkit. I cover selectors that allow you to style elements based on their position in a document and based on the value of HTML attributes.
• Chapter 15, “Styling for Print”: In this chapter, I discuss what steps to take to use CSS to provide alternative style sheets to create a printer-friendly version of a web document.
• Chapter 16, “Customizing the Mouse Cursor”: In this chapter, I show you how you can change the user's mouse cursor using CSS, how you can customize the mouse cursor, and what browsers support which cursor features.
• Chapter 17, “Controlling Opacity And Visibility”: In Chapter 17, I show you how to make HTML elements transparent or even invisible, while still affecting the elements around them
• Chapter 18, “Styling Content for Mobile Devices”: Chapter 18 shows you how to target web pages displayed in mobile phone browsers, giving mobile users a more tailored experience.
• Chapter 19, “Closing Comments”: I finish Part III with an overview of what you will have learned by the end of this book, as well as some of my thoughts on the future of CSS.

Appendixes

The final part of the book is the Appendixes:

• Appendix A, “Answers to Exercises”: Here I give you the answers to all of the questions asked at the end of each chapter.
• Appendix B, “Additional CSS Resources”: Appendix B provides you will all of the links contained within each chapter, as well as links to other resources that I think are worth reading to expand your knowledge of CSS.
• Appendix C, “CSS Reference”: The CSS reference is where you can look up which browsers support what properties.
• Appendix D, “CSS Colors”: Appendix D provides a reference to all of the named colors you can use within CSS.

What You Need to Use This Book

To make use of the examples in this book, you need the following:

• Several Internet browsers to test your web pages
• Text-editing software

Designing content for websites requires being able to reach more than one type of audience. Some of your audience may be using different operating systems or different browsers other than those you have installed on your computer. This book focuses on the most popular browsers available at the time of this writing.

I discuss how to obtain and install each of these browsers in Chapter 1. The examples in this book also require that web page source code be composed using text-editing software. Chapter 1 also discusses a few different options for the text-editing software available on Windows or Macintosh operating systems.

CONVENTIONS

To help you get the most from the text and keep track of what's happening, I've used a number of conventions throughout the book:

Examples that you can download and try out for yourself generally appear in a box like this:

As for styles in the text:

• I italicize important words when I introduce them.
• I show URLs and code within the text in a special monofont typeface, like this: persistence.properties.

We present code in two different ways:

We use a monofont type with no highlighting for most code examples.

We use bold to emphasize code that is particularly important in the present
context or to show changes from a previous code snippet.

Also, code editors like Notepad++ provide a rich color scheme to indicate various parts of code syntax. That's a great tool to help you learn language features in the editor and to help prevent mistakes as you code. The code listings in this book are colorized using colors similar to what you would see on screen in Notepad++ working with the book's code. In order to optimize print clarity, some colors have a slightly different hue in print than what you see on screen. But all of the colors for the code in this book should be close enough to the default Notepad++ colors to give you an accurate representation of the colors.

SOURCE CODE

As you work through the examples in this book, you may choose either to type the code yourself or use the source code files that accompany the book. All the source code used in this book is available for download at www.wrox.com. When at the site, simply locate the book's title (use the Search box or one of the title lists) and click the Download Code link on the book's detail page to obtain all the source code for the book. All the Try It Out example code is included in the download files for the book at Wrox.com. In addition, any other code snippets that are included with the download files are highlighted by the following icon:

Code snippets include the filename as it appears in the download files in a code note such as this:

code snippet /path/filename

After you download the code, just decompress it with your favorite compression tool. Alternatively, you can go to the main Wrox code download page at www.wrox.com/dynamic/books/download.aspx to see the code available for this book and all other Wrox books.

ERRATA

We make every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in one of our books, like a spelling mistake or faulty piece of code, we would be very grateful for your feedback. By sending in errata, you may save another reader hours of frustration, and at the same time, you will be helping us provide even higher quality information.

To find the errata page for this book, go to www.wrox.com and locate the title using the Search box or one of the title lists. Then, on the book details page, click the Book Errata link. On this page, you can view all errata that has been submitted for this book and posted by Wrox editors.

If you don't spot “your” error on the Book Errata page, go to www.wrox.com/contact/techsupport.shtml and complete the form there to send us the error you have found. We'll check the information and, if appropriate, post a message to the book's errata page and fix the problem in subsequent editions of the book.

P2P.WROX.COM

For author and peer discussion, join the P2P forums at p2p.wrox.com. forums are a web-based system for you to post messages relating to Wrox books and related technologies and interact with other readers and technology users. The forums offer a subscription feature to e-mail you topics of interest of your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts, and your fellow readers are present on these forums.

At http://p2p.wrox.com, you will find a number of different forums that will help you, not only as you read this book, but also as you develop your own applications. To join the forums, just follow these steps:

1. Go to p2p.wrox.com and click the Register link.
2. Read the terms of use and click Agree.
3. Complete the required information to join, as well as any optional information you wish to provide, and click Submit.
4. You will receive an e-mail with information describing how to verify your account and complete the joining process.

Once you join, you can post new messages and respond to messages other users post. You can read messages at any time on the Web. If you would like to have new messages from a particular forum e-mailed to you, click the Subscribe to this Forum icon by the forum name in the forum listing.

For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to questions about how the forum software works, as well as many common questions specific to P2P and Wrox books. To read the FAQs, click the FAQ link on any P2P page.