Introduction
Why Cascading Style Sheets?
HTML has opened up the world of publishing on the World Wide Web to anyone who cares to learn its tags and attributes, but it provides limited facility for the kind of layout control that some users (desktop publishers, for instance) are used to having. That's because the initial design philosophy behind HTML largely focuses on designating the structural elements of a document, while leaving the individual layout decisions up to the Web browser to figure out. As HTML and Web browser technology have progressed over time however, a certain amount of control over the appearance of a Web page has been added into HTML, primarily in an ad hoc fashion in the form of extensions to HTML developed by Netscape and Microsoft. These extensions to HTML, however, run contrary to the original philosophy behind HTML (which is to specify the structure, and not the appearance, of a document), while still falling far short of the kind of precise control desktop publishers are used to having.
Part of the reason for this focus on structure versus appearance goes back to the bandwidth-starved early days of Web publishing, when most people were still connecting at 14 kbps or less and the Internet backbone had considerably less capacity than it has today. The thinking was that allowing Web publishers to individually design their own Web pages, rather than rely on browsers to largely do it for them, would lead to over-consumption of a scarce resource, bandwidth, that we all have to share. This is not a concern that desktop publishers have, in that their DTP documents only need to consume resources available on their local machines.
Although bandwidth is much more plentiful than it was in the early days, bandwidth-availability is still a concern on the Web and the Internet. Even broadband connections using DSL and cable modems are often slowed to a crawl due to traffic jams on the information superhighway. The solution to the problem of providing more formatting control while continuing to conserve bandwidth is one that desktop publishers are already very familiar with: style sheets. The initial standard for using style sheets on the Web, Cascading Style Sheets, level 1 (CSS1), was recommended as early as December of 1996, although it is only now being fully supported by current Web browsers. A second level, Cascading Style Sheets, level 2 (CSS2), was recommended in May of 1998, but it is only partially supported by current Web browsers.
Another reason behind separating appearance from content is accessibility. If HTML is handling both the structure and the appearance of a document, a non-graphical or non-visual browser, such as a text browser, speech browser, or Braille browser, might have difficulty separating structure from appearance, making access to the document for visually impaired individuals more difficult. However, if HTML is used only to control the structural elements of a page, while style sheets are used to control its appearance, then a non-visual browser, for instance, can easily ignore the document's appearance and focus in on its structural content. Style sheets can also be used to add in presentation features that are specifically aimed at non-visual browsers, for instance, such as specifying pauses prior to, or pitch or tonal changes for, major headings within a document.
Cascading Style Sheets (CSS) also helps to enable the creation of fluid Web page designs that can be scaled in relation to a user's default settings. For instance, a user may reset his browser's default settings to display a larger default font size, due to a visual impairment that makes reading the usual default font size difficult or impossible. Using CSS, Web authors and designers can create Web page designs and layouts that use relative font sizes and other measurements that will be based on a user's default preferences. CSS also allows users to specify their own style sheet, thus participating in the determination of how Web pages will be displayed on their local computer.
Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated 
out of five!
Return to Menu.
What's the By Example Advantage
There are two distinct advantages in learning CSS when it's done By Example. First, by completing the examples as you read through the chapters, the concepts are reinforced for you immediately; much more so than just reading about a technique.
Second, with the CSS and HTML examples available for download from this book's Web site, Cascading Style Sheets (CSS) by Example, you can focus right in on learning how to use CSS, without having to spend a lot of extra time typing in HTML codes examples. Because all of the HTML code you use in this book's examples is provided for you, you don't even have to know HTML to do this book's examples (although in order to practically apply CSS, you will need some familiarity with HTML). The CSS and HTML examples provided in this book can also be used to give you a leg up on developing your own individualized CSS-styled Web pages or sites in the future.
Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated out of five!
Return to Menu.
Who Should Use This Book?
Although some experience using HTML is helpful in using this book, it isn't required. Anybody can learn how to use CSS. You don't need to be a programmer, developer, or "techie" to learn how to design Web pages using CSS.
This book provides abundant examples, starting with the basics and progressing to more advanced topics, illustrated with screen grabs that show real-world results as they appear in the latest CSS-supporting browsers.
The examples in this book primarily utilize screen grabs made on a Windows system, but users of other platforms, such as the Macintosh or Linux, can also use this book. All of the example files used in this book are available for download from this book's Web site at http://www.callihan.com/cssbook/ in Windows, Macintosh, and Unix/Linux formats.
Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated out of five!
Return to Menu.
Why Learn to Use CSS?
CSS is the key to being able to create visually richer, more accessible, and more efficient Web pages, as well as more easily accessible Web pages that don't penalize individuals with handicaps that make viewing the usual graphical presentation of a Web page either more difficult or impossible. CSS opens the way to producing more advanced and interactive Web page designs, including DTP-like control over font sizes, margins, and positioning, for instance, that is just impossible to achieve in straight HTML, while at the same time helping to insure that no-one need be excluded from viewing and understanding your Web page's content due to a visual impairment.
You can create Web pages without using CSS, but CSS opens up new possibilities that are simply impossible to achieve using straight HTML. For instance, you can specify any size font you like, instead of being stuck with the seven stock font sizes provided by HTML. You can also specify custom margins and indents, the exact space you want above and below elements, easy drop-caps, absolute or relative positioning of elements, and much more. You can also save your style sheet as a separate file and then link to it to apply it to any Web page in your site, thus making maintaining the layout of a complex Web site a much easier and less onerous task.
In the past Web designers have resorted to all sorts of HTML tricks to present more versatile and complex Web page designs, including using HTML elements such as block quotes and tables, for instance, to create layout effects, rather than for their purported purposes (formatting block quotes and presenting data in a tabular format using rows and columns). Web designers have also utilized extensions to HTML to control font sizes, colors, and typefaces. The result is that many current Web pages are a mass of multiple nested tables, block quote elements, and font tags, or what is often termed as spaghetti code. While many of these pages may be visually appealing (or at least as visually appealing as straight HTML will allow), they can be a nightmare visually handicapped surfers to peruse, as well as wasteful consumers of bandwidth. Using CSS, Web designers can create visually rich Web page designs that are also accessible and efficient.
While many Web designers still continue to utilize the old "tricks of the trade," with all current major Web browsers now supporting CSS, increasingly, now and into the future, all serious Web designers will want to know how to use CSS. All professional Web designers will need to know CSS. CSS, however, is not just for professional Web designers or developers; like HTML, CSS can be used by anyone who wants to have greater control over the appearance and display of his or her Web page or site. CSS also works well with the latest XHTML/XML standards, so you don't need to worry that CSS will become obsolete in the future. The latest XHTML standard even mandates the use of style sheets.
Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated out of five!
Return to Menu.
What Tools Do You Need?
No special software tools are required to create your own CSS style sheets. Whether embedded in an HTML file or saved separately, style sheets are saved as straight text files. All operating systems include text editors--such as Notepad in Windows, SimpleText on the Macintosh, or vi for Linux--that can be used to create and save your own style sheets.
To preview and dynamically debug your work, you also need to have one of the latest Web browsers installed. If you're a Windows user, I recommend that you have Microsoft Internet Explorer 5.5 or 6 installed, but you can also use Netscape 6 or Opera 5/6. If you're a Macintosh user, you can use Internet Explorer 5, Netscape 6, or Opera 6. If you're a Linux user, you can use Netscape 6 or Opera 5/6. In Chapter 1, "Getting Oriented," I tell you where you can download the latest Web browsers.
While not absolutely necessary, a connection to the Internet will make learning CSS much easier. Although you don't need to log on to the Internet to create and preview your local HTML files and style sheets, you may need a connection to download one of the latest CSS-supporting Web browsers, if you don't already have one installed on your computer. (In Chapter 1, however, I show you how you can order a copy of Netscape 6 on CD-ROM.) You also need a connection to the Internet to download the example files that are used in this book. You will also need an Internet connection to access any of the Web sites referenced in this book, many of which provide additional information and in-depth details about particular CSS features and capabilities.
Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated out of five!
Return to Menu.
Downloading the Example Files
This book doesn't come with a CD-ROM, but I've created a Web site from which you can download all of the example files used in this book. You can find the Web site for this book located at http://www.callihan.com/cssbook/.
At the site are step-by-step instructions on how to download and extract the example files. Separate example files are available for download for Windows, Macintosh, and Linux/Unix users. You'll also find additional downloads available, including Web art images (balls, buttons, bars, backgrounds, and so on), public domain fonts, Web page templates, and additional style sheet templates.
You can also find many other resources at this book's site, including an FAQ, Web site promotion tips and tricks, links to HTML tutorials (if you need to learn HTML) and Web publishing software tools, and a page detailing how to find a home for your Web site and upload your site's files using FTP.
Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated out of five!
Return to Menu.
What This Book Covers
This book is organized to provide a graduated, but fast-track, introduction to using Cascading Style Sheets to create visually rich, accessible, and efficient web pages. The topics and examples start with the basics and then progress to more advanced subject matter. The book covers most of what comprises the initial level of CSS, or CSS1 (Cascading Style Sheets, level 1), along with several key features of CSS2 (Cascading Style Sheets, level 2) supported by current browsers. Additional information is also included on using CSS with XHTML/XML, JavaScript, and Dynamic HTML.
Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated out of five!
Return to Menu.