Datasheet

Manuals Brands Wiley Manuals Software 978-0-470-09697-0

Introducing

Cascading Style Sheets

Cascading style sheets is a language intended to simplify website design and development. Put

simply, CSS handles the look and feel of a web page. With CSS, you can control the color of text, the

style of fonts, the spacing between paragraphs, how columns are sized and laid out, what back-

ground images or colors are used, as well as a variety of other visual effects.

CSS was created in language that is easy to learn and understand, but it provides powerful

control over the presentation of a document. Most commonly, CSS is combined with the markup

languages HTML or XHTML. These markup languages contain the actual text you see in a web

page — the hyperlinks, paragraphs, headings, lists, and tables — and are the glue of a web docu-

ment. They contain the web page’s data, as well as the CSS document that contains information

about what the web page should look like, and JavaScript, which is another language that pro-

vides dynamic and interactive functionality.

HTML and XHTML are very similar languages. In fact, for the majority of documents today, they

are pretty much identical, although XHTML has some strict requirements about the type of syntax

used. I discuss the differences between these two languages in detail in Chapter 2, and I also pro-

vide a few simple examples of what each language looks like and how CSS comes together with

the language to create a web page. In this chapter, however, I discuss the following:

❑ The W3C, an organization that plans and makes recommendations for how the web

should function and evolve

❑ How Internet documents work, where they come from, and how the browser displays

them

❑ An abridged history of the Internet

❑ Why CSS was a desperately needed solution

❑ The advantages of using CSS

05_096970 ch01.qxp 4/20/07 11:27 PM Page 3

COPYRIGHTED MATERIAL

Summary of content (22 pages)

PAGE 1

MA TE RI AL Introducing Cascading Style Sheets D Cascading style sheets is a language intended to simplify website design and development. Put simply, CSS handles the look and feel of a web page. With CSS, you can control the color of text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other visual effects.
PAGE 2

Part I: The Basics The next section takes a look at the independent organization that makes recommendations about how CSS, as well as a variety of other web-specific languages, should be used and implemented. Who Creates and Maintains CSS? Creating the underlying theory and planning how cascading style sheets should function and work in a browser are tasks of an independent organization called the World Wide Web Consortium, or W3C.
PAGE 3

Chapter 1: Introducing Cascading Style Sheets standards body, I may discuss these features anyway if at least one browser maker has implemented the feature in question. I preface any such discussion with the warning that these features are still under development and could be subject to change. This book discusses the portions of CSS available in browsers at the time of this writing — that includes most of CSS 2 and CSS 2.1, and a little of CSS 3. Some portions of CSS 2.
PAGE 4

Part I: The Basics 1. You type a www address into the browser. 2. Browser contacts the HTTP server at that address. 3. HTTP server receives the request from the browser. 4. HTTP server looks up the web document. Client-side Server-side 5. HTTP server sends the web document. 6. Your browser receives the document. 7. Your browser processes the source code. 8. The browser displays the web page. Figure 1-1 This is where CSS enters the picture.
PAGE 5

Chapter 1: Introducing Cascading Style Sheets At the time, style sheets were not a new invention. In fact, style sheets were part of the plan from the beginning of HTML in 1990. Unfortunately, however, no standardized method of implementing style sheets was ever outlined, leaving this function up to the various browsers. In 1994, Tim Berners-Lee founded the World Wide Web Consortium, and a few days later, Håkon Wium Lie published his first draft of Cascading HTML Style Sheets.
PAGE 6

Part I: The Basics In the next section, I talk about the different types of browsers that you’ll need to work through the examples for this book. Browsers Because CSS is a standard web language, many browsers support it. Therefore, it stands to reason that the aspiring web designer would want to harness that standardization to reach the largest audience possible, regardless of operating system or platform.
PAGE 7

Chapter 1: Introducing Cascading Style Sheets IE 7 is available for the following operating systems: ❑ Windows XP Service Pack 2 ❑ Windows XP Pro 64-bit Edition ❑ Windows Server 2003 ❑ Windows Vista You can obtain IE 7 from Microsoft’s website at http://www.microsoft.com/ie.
PAGE 8

Part I: The Basics Figure 1-2 Installing Windows Using PC Virtualization/Emulation Software Today many companies make PC virtualization or emulation software, which allows you to run an entire operating system from a window on your desktop in the manner illustrated in Figure 1-2. More or less, it’s like having multiple computers all consolidated into one. You can boot up a virtual computer, with all default settings so you can test your web pages. Here are some of the titles available.
PAGE 9

Chapter 1: Introducing Cascading Style Sheets ❑ VMWare, Player: Available for free from http://www.vmware.com/products/player/ for Windows and Linux. ❑ Virtual PC: Made by Microsoft, available for $129 from http://www.microsoft.com/windows/ virtualpc (the price does not include a license for running Windows in the Virtual PC). Requires Windows or a PowerPC-based Mac. ❑ Q (pictured in Figure 1-2): Available for free from http://www.kberg.ch/q.
PAGE 10

Part I: The Basics The Gecko Browsers: Mozilla Firefox, Netscape, Camino Gecko was created in January 1998. At that time, Netscape announced that it was making its browser free to its users and that its browser would be open source, meaning that its source code would be freely available for modification and distribution. This led to the creation of Mozilla; at the time Mozilla was the organization charged with developing and managing the Netscape code base.
PAGE 11

Chapter 1: Introducing Cascading Style Sheets You can see that Firefox 0.9 and Mozilla Suite 1.7 can be expected to behave identically where CSS and design layout is concerned. Because gecko browsers share the same brain (and because of Firefox’s popularity), for the remainder of this book, I cite only Firefox when referring to a Gecko browser.
PAGE 12

Part I: The Basics Writing CSS To write CSS, just as is the case when writing HTML source, you will need a text editor. WYSIWYG (What You See Is What You Get) editors such as Microsoft Word aren’t ideally suited for CSS because the environment is not ideal for the composition of source code. WYSIWYG programs often have features like AutoCorrection and line wrapping; a plain text editor is more appealing precisely because it does not have these automatic features.
PAGE 13

Chapter 1: Introducing Cascading Style Sheets Figure 1-3 On Mac OS X, open Finder, and go to Finder ➪ Preferences. Select the Advanced tab, and check the box for Show All File Extensions, which is depicted in Figure 1-4. Figure 1-4 Armed with a browser and a text editor, in the next section I present an example of what CSS can do. Your First CSS-Enabled Document The following example is designed to introduce you to what CSS is capable of.
PAGE 14

Part I: The Basics You can find the images and source code for the following example at www.wrox.com. While you can obtain the source code from www.wrox.com, I recommend that you type out the example so that you can get used to writing the syntax, and take in the different bits that come together in the example. Try It Out Creating a CSS-Enabled Document Example 1-1. To write your first CSS-enabled document, follow these steps. 1.
PAGE 15

Chapter 1: Introducing Cascading Style Sheets }
PAGE 16

Part I: The Basics alt=’Mythological Symbol for Saturn’ onload=’fixpng(this);’ />

Uranus

Distance from the Sun: 2,870,972,200 km
Equatorial Radius: 25,559 km
Volume: 69,142,000,000,000 km³
Mass: 86,849,000,000,000,000,000,000,000 kg

PAGE 17

Chapter 1: Introducing Cascading Style Sheets 2. 3. Save the preceding file in a new folder of its own as index.html. Create a new, blank document in your text editor, and enter the following CSS: body { margin: 0; padding: 0; background: #000 url(‘images/backgrounds/star.
PAGE 18

Part I: The Basics } div.planet-copy { color: white; padding: 10px; margin-left: 520px; background: #000 url(‘images/backgrounds/star_darker_still.png’) no-repeat fixed; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid #000; border-right: 1px solid #000; } div.planet-copy h1 { border-bottom: 1px solid #000; margin: 0 -10px; padding: 0 10px; } div.planet-copy ul { list-style: none; } 4. 5. Save the preceding CSS in the same folder where you saved index.html, as solar_system.css.
PAGE 19

Chapter 1: Introducing Cascading Style Sheets Figure 1-5 You might also note that Example 1-1 took some additional handy work to make it come out the same in Internet Explorer, as it did in Safari, Firefox, and Opera. Throughout this book, you also learn the hacks and workarounds that you need to make CSS-enabled web pages compatible with IE 6.
PAGE 20

Part I: The Basics ❑ The presentation of an entire website can be centralized to one or a handful of documents, enabling the look and feel of a website to be updated at a moment’s notice. In legacy HTML documents, the presentation is contained entirely in the body of each document. CSS brings a much needed feature to HTML: the separation of a document’s structure from its presentation. CSS can be written independently of HTML.
PAGE 21

Chapter 1: Introducing Cascading Style Sheets ❑ CSS has many advantages. These include being accessible, applicable to more than one language; applicable to more than one type of device, and allowing a website to be planned, produced, and maintained in much less time. CSS also enables a website to take up significantly less hard disk space and bandwidth than formerly possible.
PAGE 22