Cascading Style Sheets { CSS}
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content  from document presentation .This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice  and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

encoders

Introduction

Recently, I've seen quite a few websites that do not implore any type of stylesheet, or organizational structure to their code. This is only only poor coding practices, in my opinion, but it also produces a site of poor quality and makes it harder for peole who wish to read the source code to find out what it happening. On the other end, there are people who use CSS without a full understanding of what it does, and thus they never reach the limits of what CSS can do. Pratices like table layouts, multiple use of the font color/size attribute, and other coding pratices can be cut out of code with one simple style sheet. I hope that in writing this blog I will be able to reach out to the greater community and hopefully help develop a greater understanding of CSS for others.

What is CSS?

Cascading Style Sheets, or CSS for short, is a easy to use coding system that adds style (font attributes, spacing, etc.) to your Website. To most common application application is to style web pages using HTML and XHTML, but it is possible to use the langauge in multiple types of XML documents. With CSS a user can seperate their document content from document presentation, thus improving the content accessibility and making it easier to change styles from one source. The CSS specifictations are maintatined by the World Wise Web Consortium (W3C), and uses the mime type text/css which is registered for use by CSS by RFC2318.

History

Having a simple understanding of CSS is not enough to truely appreciate the use of Stylesheets. Knowing where CSS comes from, what sparked the idea/need for it, and how it has helped the World Wide Web community will develop a depper understanding of stylesheets and will compel you to take full advantage of it when the time comes.

First it is prudent to know that style sheets have existed since SGML in the 1970's. As HTML grew in popularity, it began to cover a wider variety of styling features that would help meet the demands of the World Wide Web community. This growth gave designers moer control over their site apperance, but also resulted in more complex, and harder to maintain, HTML code. To make matters worse for developers, a variation in web browsers made it almost impossible to have your site look consistent across multiple browser platforms, and gave users less control over how web content was displayed.

In order to improve the capabilities of web presentation, nine different style sheet langauges were proposed to the W3C's www-style mailing list. Out of those nine proposals, two were chosen as the foundation for what became CSS; Cascading HTML Style Sheets (CHSS) and Stream-based Style Sheet Prposal (SSP).

Thus, through a combination of the two, CSS was born.

Unline existing style languages like DSSSL and FOSI, CSS allowed a document's style to be influenced by multiple style sheets. One style sheet could inherit or "cascade" from another, permitting a mixture of stylistic preferances controlled equally by the site designer and user.

Although the CSS1 specification was completed in 1996 and Microsoft's Internet Explorer 3 was released in that year featuring some limited support for CSS, it would be more than three years before any web browser achieved near-full implementation of the specifcation. I.E. 5.0 fror the Macintosh, shippped in March of 2000, was the first browser to have full support of CSS1, surpassing Opera, which had been the leader since its introduction of CSS support fiften years before. As of July 2006, no browser has fully implemented CSS2, which implementation levels vary.

Syntax

CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties. Each style sheet consists of a list of rules, where each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-terminated declarations in curly braces. Each declaration itself consists of a property, a colon, a value, then a semi-colon.

In CSS, selectors are used to declare which elements a style applies to. Selectors may apply to all elements of a specific type, or only those elements which match certain attritubles.

In addition to these, a set of pseudo-classes can be used to define futher behaviour. A pseudo class selcts entire elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements.

Before CSS, nearly all of the presentational attributes of HTML documents contained within the HTML markup the font colors, background styles, element alignments, borders and sizes, etc. CSS allows you to move much of that information to a separate stylesheet resulting in a considerably simpler HTML page.

For example, the heading tags (h1, h2, h3, etc) were all predefined sizes structurally using HTML. If a designer wished to chance the size he/she then had to use the HTML font tag, and other presentational elements, for each occurrence of that headign type. Thus, each time H2 was called, the user also had to add the code to render it in the perferred design. With the creation of CSS, presentation is seperated from structure. Thus, you declare the design of h2 once in your stylesheet, and watch as everytime h2 is called in your HTML it inherits the desired design declared in the stylesheet.

Limitations

Some noted disadvantages of using "pure" CSS, as stated by the W3C, include:

Inconsistent browser support

Different browsers will render CSS layout differently as a result of browser bugs or lack of support for CSS features. For example Microsoft Internet Explorer, whose older versions, as IE 6.0, lacked many CSS 2.0 properties, misinterpreted a significant number of important properties, such as width, height, and float. Numerous so-called CSS "hacks" must be implemented to achieve consistent layout among the most popular or commonly used user agents (browsers). Pixel precise layouts can sometimes be impossible to achieve across browsers.

Selectors are unable to ascend

CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

One block declaration cannot explicitly inherit from another

Inheritance of styles is performed by the browser based on the containment hierarchy of DOM elements and the specificity of the rule selectors, as suggested by the section 6.4.1 of the CSS2 specification. Only the user of the blocks can refer to them by including class names into the class attribute of a DOM element.

Vertical control limitations

While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.

Absence of expressions

There is currently no ability to specify property values as simple expressions (such as margin-left: 10% - 3em + 4px;). However, a working draft with a calc() value to address this limitation has been published by the CSS WG, and Internet Explorer 5 and all later versions support a proprietary expression() statement, with similar functionality.

Lack of orthogonality

Multiple properties often end up doing the same job. For instance, position, display and float specify the placement model, and most of the time they cannot be combined meaningfully. A display: table-cell element cannot be floated or given position: relative, and an element with float: left should not react to changes of display. In addition, some properties are not defined in a flexible way that avoids creation of new properties. For example, you should use the "border-spacing" property on table element instead of the "margin-*" property on table cell elements. This is because according to the CSS specification, internal table elements do not have margins.

Margin collapsing

Margin collapsing is, while well-documented and useful, also complicated and is frequently not expected by authors, and no simple side-effect-free way is available to control it.

Float containment

CSS does not explicitly offer any property that would force an element to contain floats. Multiple properties offer this functionality as a side effect, but none of them are completely appropriate in all situations. As there will be an overflow when the elements, which is contained in a container, use float property. Generally, position: relative does solve this. Floats will be different according to the web browser size and resolution, but positions can not.

Lack of multiple backgrounds per element

Highly graphical designs require several background images for every element, and CSS can support only one. Therefore, developers have to choose between adding redundant wrappers around document elements, or dropping the visual effect. This is partially addressed in the working draft of the CSS3 backgrounds module, which is already supported in Safari and Konqueror.

Control of Element Shapes

CSS currently only offers rectangular shapes. Rounded corners or other shapes may require non-semantic markup. However, this is addressed in the working draft of the CSS3 backgrounds module.

Lack of Variables

CSS contains no variables.

Lack of column declaration

While possible in current CSS, layouts with multiple columns can be complex to implement. With the current CSS, the process is often done using floating elements which are often rendered differently by different browsers, different computer screen shapes, and different screen ratios set on standard monitors.

Conclustion

As you can see, though CSS has its limitations, it provides designers with the tools needed to make better sites, easier to read code, cleaner HTML markup, and much more. It is my hopes that in reading this introduction to CSS, that designers will feel the need to implement the system into their designs, and create better signs and more readable and easier to maintaitn code.