- Begin with Structure
- Integrating Structure and Presentation
- Application Hierarchy and Conflict Resolution
- Tying It All Together
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Integrating Structure and Presentation
After creating documents that are lean, mean, and clean of presentational elements and attributes, it's easier to see how CSS hooks into the document and enables you to manage its presentation.
Types of Style Sheets
There are currently six types of style sheets that influence a document. You're probably already familiar with most if not all of these style sheets, but it's good to review them so you can better understand the premise of this discussion.
Browser. A browser style sheet is a default style sheet within a Web browser. This style sheet has very little influence over a document, it's simply what creates the defaults when nothing else is styled, such as displaying your document with a white background or a Times font.
Inline. Inline style is added to an individual element using the style attribute:
<p style="border: 1px dashed black;">This paragraph will have a 1 pixel black, dashed border around it.</p>
Inline style is powerful in that it overrides other styles. It can be very useful for quick fixes or in those cases where you want to style something only once. However, relying on inline style results in the cluttering up of your documents. And, you can't tap into the document management aspects of CSS if you rely too heavily on inline style. So it's best to reserve inline style for occasional, specific use.
Embedded. An embedded style sheet is a style sheet that appears in the document head within the style element:
<style type="text/css">
p {
border: 1px dashed black;
}
</style>
Embedded sheets govern that document only. They are more powerful than other style types with the exception of inline and user styles. Although they are extremely useful and clutter a document less than inline styles do, they still should be used sparingly.
Linked. A linked style sheet is external to documents. It contains the style rules with no HTML markup (just the rules) and is saved with an extension of .css. Linked style is then linked to as many documents as you want by using the link element within the head portion of the HTML or XHTML page:
<link rel="stylesheet" href="border.css" type="text/css" media="all" />
Linked style sheets are very powerful because of their capability to control so many documents at once, making the management of documents far less time-consuming and frustrating.
Imported. An imported style sheet is an external sheet that uses the @import property within an embedded style sheet to import the styles instead of being linked directly to a page:
<style type="text/css"> @import border.css </style>
Imported style sheets are somewhat limited in their use because they're not supported by certain browsers. As a result, they are in use today mostly in workarounds such as the common technique of placing positioning information in an imported style sheet and other styles in a linked style sheet. This way, browsers that support some styles but do not support the @import property will ignore the layout but apply some style (providing a readable, somewhat styled document to those browsers), but not leaving out the positioning and other style information that those browsers read improperly.
User. A user style sheet is one that is authored by you, the user, and implemented via the browser. User styles are not in widespread use, but can be very handy for those individuals who want to control aspects of any page they're viewing. User styles override all other style sheet types, so if you create a user style sheet with larger fonts, higher contrast colors, or specific colors for specific elements to address color blindness concerns, all the documents you view within that browser will apply your user styles over any other styles—allowing you to adjust to personal needs.
The relationship of one style sheet type to another is part of the "cascade" aspect of CSS, which we'll delve more deeply into in just a bit.
Selectors
CSS integrates with your structure HTML or XHTML documents via selectors. A selector literally selects an element within your HTML or XHTML and applies the style properties ascribed to that selector to the selected element.
There are 14 selector types, and many of them are quite complex. To discuss all of them in detail would take a separate article, so I'll cover the top four types in use here:
Element selectors. An element selector is the most basic of selectors. It creates a one-to-one match with an HTML or XHTML element. So, if I want to style an h1 element in my document using an element selector, I'd simply write a rule using h1 in the CSS:
h1 {
border: 1px dashed black;
}
ID selectors. ID selectors are custom selectors that use an octothorpe (#) along with the custom style name. ID selectors can be used only once per document because they're meant to be unique identifiers of some element in that document. They're often used in positioning to identify divisions on a page that are specific, such as #content, #leftnav, or #footer:
<div id="footer">This area will be styled with the rules for the #footerselector.</div>
Class selectors. A class selector is also a custom selector, but it can be applied as many times per document as you like. It uses a dot (.) and the custom style name, and is integrated into the document using the class attribute. A good example of a class selector would be .small, where the style rules would make the text smaller than other text styles for the document. The style can then be used wherever you want to have smaller text:
<p class="small">This text will appear smaller as per the style rules
Pseudo class selectors. A pseudo class selector is a specific set of selectors that are used mainly for styling links. Pseudo class selectors include
a:link a:visited a:hover a:active
These selectors should always appear in sequence as shown (LVHA) in order to work properly.
The most critical thing to remember about selectors is that they relate directly to the elements within your document. Therefore, the better document structure you have, the easier it is to create and apply styles while avoiding potential conflicts or authoring style sheets that are too complex.
NOTE
CSS is case-sensitive, so if you write class or ID selectors in a given case, you must use that case in the HTML or XHTML document, too. So, a class of .topNav must be added to the document as class="topNav" in order to be valid. Because XHTML is case-specific (lowercase) in terms of elements and attribute names, any element selectors for XHTML documents must be in lowercase.