Styles—Basic Concepts Styles—Basic Concepts There are lots of places, both online and in books, where you can learn about the theory and philosophy of (Cascading) Style Sheets. (I actually prefer just saying "styles"—it's a lot simpler; plus, it's also more accurate, since the style rules don't need to be part of a "sheet" to work.) So I will limit my discussion to more practical matters (although of necessity some theory will find its way into the mix). On this page I'll talk about the advantages of styles and give you links to some websites where you can go for more information on styles and their use. On the following pages you'll find the basics of styles, specifically the following topics:
|
One other note: this guide is also limited to discussing the use of styles to achieve what I call "decoration" effects, primarily in text. Styles can also be used to govern the positioning of objects on a web page, but this technique is much more complicated and I don't understand it well enough to explain it yet. Several of my references cover this topic if you are interested.
Styles have many advantages over the old ways of marking up text for browser display. One of the major ones is that they are the right thing to do; you know that by using them you are in compliance with the latest W3 recommendations. In addition, when persons with certain disabilities use the Web, they have the option of substituting their own personal style sheet to govern how a page is displayed on their computer. For example, if someone has a vision problem that requires a very large font, or a particular color scheme for text to be readable, they use a style sheet dictating this sort of display, which overrides the style sheet attached to the page. Of course, this means that they will not see the presentation effects as the web author intended, but they will see the text, which they would not be able to do without this capability. If a page does not use style sheets for its formatting, but rather the old-fashioned <font> (and other) tags, the visually disabled person is out of luck (and so is the web author, who has lost a potential reader). There are other, less altruistic reasons for using styles as well. They make wholesale changes to the appearance of web pages possible. By tweaking a style sheet, you can update the look of a page, or even of an entire site, very easily. (That is, if you have set up your styles and their application correctly.)
|
In addition, HTML code is generally cleaner using styles than it is with a proliferation of <font> tags. Besides being more esthetically pleasing to those in the HTML know, cleaner code means faster downloads for viewers and easier troubleshooting for webmasters. Also, by retaining the use of special tags like headings, instead of using <font> tags to specify heading effects, you make it easier for search engines and other indexing programs, as well as devices like screen readers, to get at your content and express it clearly. The increasing number of specialized devices used for accessing web pages—cell phones, PDAs, in-vehicle displays, etc.—make it even more important to mark up your content in a standardized, coherent manner. The individual device's software can best decide how to display your content—styles let this happen. For old dogs like this author, these advantages notwithstanding, learning to use styles in web pages entails a serious shift in thinking about how to achieve presentational effects affecting text and page backgrounds. Instead of simply sticking <font> tags wherever I wanted different font effects, or adding bgcolor attributes to every <body> tag, I now have to think ahead a bit more and plan for the different effects I want to achieve. This extra work at the beginning of constructing a page, however, is more than offset by the time saved when I decide to change colors or try a different look. |
One of the most important things to remember about styles, since they give you the opportunity to do so much, is not to go overboard with them. Don't sacrifice your good design instincts to use a lot of different effects, just because you can. Rather, use the style effects you need to create the look you want.
Keeping that in mind, there are a lot of places to go for style ideas and for help in remembering how to construct and apply them. Several of these sites can also explain how to use styles for cool positioning effects on your pages. Although somewhat complex to understand and implement, CSS-P, as this set of style rules is called, allows more control and flexibility over the positioning of images, forms, blocks of text, etc., than was ever possible just using tables and the other work-arounds you may be used to.
Advanced CSS Layouts: Step-by-Step. Some positioning techniques.
Cascading Style Sheets. Extensive set of tutorials in the Web Developers Virtual Library.
CSShark Answers FAQ. Basic and advanced references, tutorials and links to more info.
Getting Started with Cascading Style Sheets. Basic tutorial with examples.
NowCSS. Series of tutorial articles dealing with specific CSS topics.
Quackit CSS Tutorial. Simple explanations of CSS techniques; they also have a large CSS Properties List.
Style Sheet Syntax. Very straightforward, lots of examples.
Tizag.com CSS Reference. Listing of CSS properties and allowable values.
W3C Cascading Style Sheets. The official word, with links to lots of resources as well. They also have a validator.
WebMonkey Stylesheets Guide. Lots of good reference tables.
Web Design Group's Guide to Cascading Style Sheets.Tips and tutorials.
Zen Garden. Sophisticated design uses of CSS.Credits:
Back to Intermediate HTML main page