CSS-00025 | Introduction to Cascading Style Sheets (CSS)
A style sheet is a set of declarations describing the layout and appearance of a HTML document. While HTML specifies a document’s content and structure it does not do such a good job with the page’s appearance. To design a HTML document, you have to work in a different language. Several stylesheet languages exist, but the most commonly used on the Web by far is the Cascading Style Sheets language, also known as CSS.
Try playing with some CSS by clicking here!
Like HTML and XHTML, the specifications for CSS are maintained by the World Wide Web Consortium (W3C); and like those languages, several versions of CSS exist with varying levels of browser support. The first version of CSS, called CSS1, was introduced in 1996, but it was not fully implemented by any browser for another three years. CSS1 introduced styles for the following document features:
- Fonts: Setting font size, type, and other properties
- Text: Controlling text alignment and applying decorative elements such as underlining, italics, and capitalization
- Color: Specifying background and foreground colors of various page elements
- Backgrounds: Setting the background image for an element
- Block-level elements: Setting the margins, internal space, and borders of block-level elements
The second version of CSS, CSS2, was introduced in 1998. It expanded the language to support styles for:
- Positioning: Placing elements at specific locations on the page
- Visual formatting: Clipping and hiding element content
- Media types: Creating styles for various output devices, including printed media and aural devices
- Interfaces: Controlling the appearance and behavior of browser features such as scroll bars and mouse cursors
An update to CSS2, CSS 2.1, was introduced by the W3C in April 2002. Although the update did not add any new features to the language, it cleaned up minor errors that were introduced in the original specification. Even as browsers are implementing all of the features of CSS2, the W3C has pressed forward to the next version, CSS3. Still in development as of this writing, CSS3 will add styles for:
- User interfaces: Adding dynamic and interactive features
- Accessibility: Supporting users with disabilities and other special needs
- Columnar layout: Giving Web authors more page layout options
- International features: Providing support for a wide variety of languages and typefaces
- Mobile devices: Supporting the device requirements of PDAs and cell phones
- Scalable vector graphics: Making it easier for Web authors to add graphic elements to their Web pages.
CSS3 will break up all of the style sheet specifications into individual modules. This approach should make it easier for developers of Web browsers to create products that support only those parts of CSS that are relevant to their products. For example, an aural browser might not need to support the CSS styles associated with printed media, so the browser’s developers would need to concentrate only on the CSS3 modules that deal with aural properties. This CSS revision promises to make browser development easier; and the resulting browser products will therefore be more efficient and compact.
As with HTML, the usefulness of style sheets depends on the support of the browser community. Currently, CSS 2.1 enjoys good browser support—though there are some important differences between the major browsers that you’ll explore later in this tutorial. As always, a Web page designer needs to be aware of compatibility issues that arise not just among different versions of CSS, but also among different versions of the same browser.
Action Items to be completed:
- Complete all available resources found in lesson resources.
- Read all content on this page.
- Follow any links and review all contents.
- There are no assignments associated with this section of the lesson that must be submitted.