| Stylesheets work alongside HTML to define what a web page looks like. The HTML marks up the document structurally indicating what bits of content are headlines, body text, lists, etc., while the stylesheets describe how the headlines and other elements should look in the web browser. If you've worked with a page-layout program (like PageMaker or QuarkXpress), you're probably familiar with stylesheets. They allow you to specify how particular types of words headlines, for example should appear throughout a document. So every time you write a headline, you simply mark the words as a headline (or "apply the headline stylesheet") and they take on the appearance of other headlines in your document. It's easier and more efficient to use a stylesheet than it would be to customize the text every time you wrote a headline. Stylesheets work similarly on the web. With stylesheets, you can create a document using simple, traditional HTML tags <p> for a new paragraph, <h1> for the largest headline but redefine how those elements should look. Want your headlines to appear in gray, 72-point Helvetica Bold?  Before there were stylesheets, designers had to individually customize every chunk of text in a document by listing its point size, type face, color, and so on. But stylesheets eliminate all that fuss. With stylesheets, you describe what a headline looks like once, then every headline in the document takes on that appearance. Let's take a moment to appreciate how cool that is. Before stylesheets, you had to decide between structure and appearance: You could either use the <h1> tag which properly labels page elements and get a generic-looking page created by the default browser styles. Or you could use the font tags which let you customize appearance but your document would have no structural integrity. With stylesheets, you can have it all. what you need to know about stylesheets what they are Stylesheets or Cascading Stylesheets work alongside HTML to define how a web page looks. The HTML defines the structure of the page (This is a headline. This is a list) while stylesheets describe how each element looks. how they're used Stylesheets are primarily used to specify how text looks. Increasingly, they're also used for page layout. why they're loved Stylesheets help you build a site in compliance with web standards. Also: They separate content from presentation, letting you create a site that's both structurally sound and visually attractive. Pages designed with stylesheets load faster than those designed with font tags and tables. Pages designed with stylesheets are more accessible to the blind. Stylesheets make it faster and easier to make changes.
why they're hated Although stylesheets sound great on paper, they present some practical problems: They aren't supported by older browsers. They're supported differently by different browsers and require a lot of troubleshooting. They require designers trained with tables and font tags to learn a new way of designing.
|
Learn to use stylesheets Webmonkey stylesheet tutorials http://www.webmonkey.com/authoring/stylesheets/ A List Apart stylesheet tutorials http://www.alistapart.com/stories/indexCSS.html CSS Central on DevEdge http://devedge.netscope.com/central/css/
The benefits of stylesheets: Control. Stylesheets let you boss around text in ways that were impossible before, giving you greater control over appearance. Efficiency. Rather than define and redefine the font tags for every chunk of words on your web site, stylesheets let you define them once for an entire document or even an entire site. (Headlines look like this. Paragraphs look like this.) This is particularly useful when you have to make changes. Speed. Web sites designed with stylesheets load faster than those designed with tables. Separation of content and presentation. Stylesheets define how your page appears visually, leaving the structure to the HTML tags. This allows your content to be viewed on other devices, beyond the browser. (See building your site to last, p. 184.) Standards. Stylesheets help your site comply with web standards. (See why you should follow web standards, p. 186.)
The drawbacks of stylesheets: Lack of support in early browsers. Stylesheets weren't supported in early browsers, still in use by roughly 5% of web users. Inconsistent support in browsers. Stylesheet features are supported differently in different browsers. So designs that work in one browser might fail in another. But there are workarounds, says designer Jeffrey Zeldman. "Once the workarounds are known, problems of browser difference largely vanish." Re-training required. To work effectively with stylesheets, designers have to rethink a many of their assumptions about building for the web. And this takes time.
learning to use stylesheets Whether included in HTML or delivered on their own, stylesheets have a particular structure they follow, which looks something like this: h1 { color: white; font-family: verdana; font-size: 16 pt } The stylesheet above redefines the <h1> headline tags so that all <h1> headlines on the page will appear in 16-point Verdana, colored white. Once this definition is included, the designer can simply label headlines <h1>, rather than reiterating each time that the text should be 16-point white verdana. There are four different types of stylesheets. 4 kinds of stylesheets: Global stylesheets are incorporated in the top of an HTML document and apply to all the content within that particular page. They're also called embedded stylesheets. Local stylesheets are integrated within the body of the HTML document to control the appearance of a specific word, sentence, or area of the page. They're also known as inline stylesheets. Linked stylesheets are small, independent text documents separate from the HTML file. Also known as external stylesheets, they control the appearance of multiple pages. So instead of embedding stylesheets into each page, you create one stylesheet document and link it to all your pages. Imported stylesheets are similar to linked stylesheets, but they allow you to combine stylesheet methods.
More reasons to use stylesheets designing for speed, p. 92 building your site to last, p. 184 why you should follow web standards, p. 186
|
