Controlling Typography with Cascading Style Sheets (CSS)
Cascading Style Sheets offers much greater control over type characteristics than the <font> element. You can use standard type conventions, such as point or pixel sizes, leading (the vertical space taken up by a line of type), indents, and alignment. You gain more control but use much less code than was previously necessary. Using the <font> element, you need the following shaded code for every instance of the <h1> element:
<h1 align=”center”><font color=”green”>the header</font>
</h1>
With Cascading Style Sheets you can express this style information once as a rule in a style sheet:
h1 {color: green; text-align: center;}
CSS Basics
CSS is based on rules that select an HTML element and declare style characteristics for it. You can state sets of rules, known as style sheets, in the head section of an HTML document or in a separate document known as an external style sheet.
Understanding Style Rules
Style sheet rules are easy to interpret. The following style sheet shows a simple style rule for the <p> element. Note that the style rules are contained in the <style> element in the document’s <head> section as the code on page 173 of the textbook illustrates.
Style rules are composed of two parts: a selector and a declaration. The selector determines the element to which the rule is applied. The declaration details the exact property values. You must include all CSS rules within a <style> element or define them using a style attribute. The <style> element always is contained in the <head> section.
Linking to an External Style Sheet
Placing style sheets in an external document lets you specify rules for different HTML documents. This is an easy and powerful way to use style sheets. An external style sheet is a text document with a .css extension that contains the style rules. There is an example of a simple external style sheet named style sheet named style1.css as the code on page 174 of the textbook illustrates.
Solving Problems with Style Sheets
The current browsers, including Netscape 6.0, Opera 5.0, and Internet Explorer 6.0, offer very good CSS support, albeit with some inconsistencies. The main problem with style sheets is older browser support. Finally, older browsers will not be able to interpret your CSS rules at all.
CSS Selection Techniques
Your goal is to apply your style rules to the elements in your document. You can choose from a variety of selection methods, including:
¨ Selecting multiple elements
¨ Selecting by context
¨ Selecting with the class attribute
More complex selection involves the creation of artificial divisions, using two elements designed expressly for CSS:
¨ <div> - Block Division
¨ <span> - Inline Division
Selecting Multiple Elements
Using multiple selectors lets you use less code to accomplish the same results. For example, to make both <h1> and <h2> headings green.
Selecting by Context
A context-based selector lets you specify the exact context in which a style is applied. To specify that <i> elements appear blue only within <p> elements.
