CSS
Cascading Style Sheets, or CSS, are how the presentation of content on the Web is controlled. Since since 1999, the major browsers conformed, at least for the most part, with CSS Level 1 specifications. This was a major step forward, as prior to this time, conformance was haphazard, and using CSS was a bit dicey. Remember “works best in…”? This was to let you know the hazards. CSS allows far greater control and flexibility over using markup for presentation. Like using paragraph styles in a layout application, CSS also makes maintenace much easier.
Currently, the major browsers –Internet Explorer, Firefox, Safari – confrom pretty well. They generally handle all of CSS1, and a lot of CSS2. Some get parts of CSS3, which is still in progress as a specification. This is all good, but using CSS stilll requires a knowledge of browser quirks. It also requires the foreknowledge that pages will not look precisely the same in every browser on every platform, and the willingness to work with that actuality. Also, this section is just a brief overview. To get down to it, there are several really good sources; probably the one to start with is Eric Meyer’s Cascading Styles Sheets: The Definitive Guide 3e.
How CSS Works
Browsers have default presentation for HTML elements. An h1 tag is rendered larger than an h2. Paragraphs are in block form, with a line space between. This is fine, if boring, except for the fact that browsers do not render the same tags the same way. This is where CSS comes into play.
In the most general sense, CSS is a series of sets of presentational specifications. These are best written in an external (.css) file, which is a text document with the .css extension. An HTML document links to the CSS document, or style sheet, in the head of the HTML. The styles are thus parsed before the page is rendered by the browser, and the styles are applied to the HTML document’s elements as they, in turn, are parsed by the browser.
CSS uses selectors to determine what rules are applied. If there is no CSS for a given element, the browser uses its default presentation. By using structural markup, you can assure that a page will render – the content will be available – in a usable form, even if the CSS does not work. As an example, you can see this page rendered without CSS. Most often, if a browserdoesn’t understand a rule that is being applied, it will simply ignore it.
Details:
- Introduction
Syntax and general ideas.
- Selectors
CSS selectors, or hooks.
- CSS Properties
A look at what you can manipulate with CSS.
- The Cascade
How rules are applied when.
- The Box Model
The structure of block-level elements.
- Using DIVs and floats
Basic building blocks.
- Positioning
- Absolute Positioning
Pixel-perfect positioning(?)
- Relative Positioning
- CSS3 Examples
Some examples of CSS# in action. Use at own risk...
