The Benefits and Uses of CSS
HTML began as a fairly simple set of mark-up tags designed to facilitate the sharing of text documents over the World Wide Web. In its initial conception, HTML was never designed or intended to be a “design” medium, but, over time web browser vendors began extending its capabilities by adding Inline Images, Colors, Backgrounds, Font Face types, different Font Sizes, and Tables for page layout structure, among others, which slowly enabled web designers to “misuse” HTML as a design medium. Moreover, the original conception of HTML as having universal accessibility to content was sacrificed in favor of evermore dazzling page layouts.
One of the main reasons that CSS style sheets were developed then, was to stop the creation of new HTML physical formatting constructs and return to its original conception of separating style information from document content.
CSS Recommendations
CSS (Cascading Style Sheets) is a list of statements (also referred to as “rules”) that can assign various rendering properties to HTML elements. The CSS
specifications were defined by the W3C (World Wide Web Consortium) and developed with public input from the W3C “www-style” mailing list Discussion Forum and feedback from other member companies.
The term “cascading” in “Cascading Style Sheets” refers to how web browsers interpret a style sheet and which rules it will follow when a conflict in CSS styles is encountered. A style element and the properties that are assigned to it, collectively, are referred to as a “style rule”. A “style sheet” is a list of CSS styles that determine the appearance or display of elements for which said style rules are applied.
W3C has released several recommendations for Cascading Style Sheets including “CSS 1”, “CSS 2”, and “CSS 3”.
CSS 1 recommendation was formalized on December 17, 1996, and revised on January 11, 1999. It contains approximately (50) properties. CSS 2 recommendation was formalized on May 12, 1998. CSS 2 contains about (120) properties, including those delineated within CSS 1. CSS 3 specification is not fully complete and still under development. As a result, many web browsers may not support some of the new properties created in this specification. Nonetheless, CSS 2
recommendation is now well supported by most web browsers and degrades somewhat gracefully even in older web browsers.
CSS has a much more important role in web development than it did just a few years ago. Many web developers now use CSS on all their websites given the wide-spread support for it among web browsers. In fact, Dreamweaver 8, among other HTML editors, uses CSS styles by “default” for setting web page properties such as
Background Color, Background Image, default Font Face, Font Colors, page Margins, and so forth.
Moreover, the W3C Web Accessibility Initiative (WAI) has mandated the use of CSS styles in the place of deprecated elements and attributes for web pages. The <FONT> and <BASEFONT> elements, along with <BODY> elements including <TEXT>, <LINK>, <VLINK>, <ALINK>, <BGCOLOR>, and <BACKGROUND> attributes have been depreciated in HTML 4.01 and XHTML 1.0, in favor of using CSS style sheets to provide improved accessibility as advised:
In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes.
Many government agencies, organizations, and companies have subscribed to the W3C’s (WAI) initiative in the spirit of the “Americans with Disabilities Act (ADA)”. As a result, “Screen Readers” used by those with visual impairments can simply ignore CSS styling that affects a web page, while the content is indicated by XHTML mark-up. In the past, such individuals were left to sift through tedious descriptions of formatting to hear the actual content of a web page.
Capabilities of CSS
The primary function of CSS then is to set a standard that separates web page “structure” from the “presentation” material. The separation of a web page “format” mark-up from its actual “content” is the fundamental step toward ensuring that the structure of a web page does not compromise the materials presented within a document, just to “make it look good...”
Accordingly, the page formatting and presentation that was once done with HTML mark-up is now considered to be an “improper” usage of HTML. XHTML documents
can now be developed with all styling and presentation information governed by rules defined by CSS. All the elements and format for an entire website can then be defined using CSS style sheets, resulting in a leaner, cleaner mark-up.
In turn, CSS specifications offer more control over page elements and can modify things you can not set with simple HTML tags. In particular, CSS offers more specific control over “typography” elements than XHTML tags can, including size in points, inches, pixels, or ems, for type.
CSS offers (3) different types of implementation for style sheets:
- Embedded style sheets are an internal part of an XHTML document and useful for applying styles to a single web page only. All of the CSS styles are contained inside the <HEAD> tag of the web page itself.
- External or “linked” style sheets are the most powerful type of style sheet in terms of scope. Though the content of an external style sheet appears to be just like the contents of an embedded style sheet, it differs in that, it is not a part of the XHTML document but, is stored in a separate file with a “.css” extension. The “.css” style sheet file simply contains a list of CSS style rules without any XHTML code.
A <LINK> element is used to define the relationship, or “link”, between the External style sheet and XHTML document. A <REL> attribute defines the relationship <rel=stylesheet> and a <TYPE> attribute specifies that the “linked” CSS style sheet (referred to by the <STYLE> element to “embed” a style sheet) so that its style definitions can be applied to the content of an XHTML document.
<link rel="stylesheet" type="text/css" href="styles.css">
- Inline styles are useful in order to over-ride other style definitions applied by either an “embedded” or “external” style sheet to a particular element. Inline styles then share a common characteristic with embedded styles, in that, they are part of an XHTML document mark-up. However, inline styles are written as an “attribute” of an XHTML tag.
Inline styles are then the least powerful, in terms of scope, compared to the other CSS style sheet types, but, do trump the others in the cascade hierarchy for rules application within a particular document, and are in that sense, the most powerful type of them all.
|
