In part two, you learned about creating well-formed, semantic documents using XHTML - the content. Now, it's time to add some presentation instructions (via CSS rules) to the document to breathe some life into it.
For more general background info on XHTML, see the first presentation in this series, Web Standards Primer.h1 { color: #000; }h1: selector; relates the rule to the (X)HTMLcolor: property; characteristic of the selector#000: value; definition of the propertyIn this example, the selector, h1, is instructs the browser (or other user agent) to apply the rule to all h1 elements in the HTML document. The property, color, instructs the browser to change the color of h1 elements to the value specified.
This example changes the color of all h1 elements to #000, or black.
h1, h2, h3, h4, h5, h6 { color: #000; }h1 {color: #000; font-size: 130%; }color and font-size without needing to define separate rules for eachGrouping rules together as shown above eases the burden of creating similar rules for multiple selectors.
style attribute to apply a style to a specific element<h1 style="color: #000;"></h1><style> tag to apply a stylesheet to an entire document<style>h1 { color: #000; }</style>@import notation to import an external stylesheet<style> @import "stylesheet.css"; </style><link> tag to link an external stylesheet to the document<link rel="stylesheet" href="stylesheet.css" type="text/css" />There are several ways to apply stylesheet rules to a document, but some ways are better than others. For example, if you are using inline styles by assigning each element its own style attribute, debugging and making changes can become very difficult. Conversely, using an external stylesheet gives you immediate acccess to all rules allowing easier modification.
The @import notation was very popular in the early half of this decade, as older browsers did not understand it. This allowed designers to give older browsers a basic stylesheet via the <link> tag and give advanced rules to browsers that understood @import. However, as we move into the second half of the decade, supporting older browsers is becoming less important, and there is a trend growing where only the link tag is used, providing all CSS rules to all browsers. This can sometime lead to undesirable results in older browsers, if supporting older browsers is somehow a MUST.
font-family: sets the typeface to use (eg "Verdana")font-size: the size of the text (size units will be discussed in a future presentation)letter-spacing: adjust the trackingtext-decoration: add an underline, overline or strikethroughThere are many more properties that affect typography. Some (font-size) are more common than others (font-variant), but nearly every site you create will use CSS for typographic customization to some degree.
Examples of advanced CSS uses can be seen in the various designs in the CSS Zen Garden.
Part four in this series covers CSS Positioning and the Box Model in greater detail.
CSS is powerful. Very powerful. And future presentations will outline the roots of this power. For now, though, peruse the CSS Zen Garden, and soak in the vast differences accomplished through the power of CSS.
Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on related topics, or give you a first hand look at these topics in action. You may browse each site further if you'd like.
You should bookmark any sites throughout the presentation that are labeled as such, and start to create a collection of 'Web Standards' bookmarks. You will need these resources handy soon, and you'll be using them a lot.