CSS Introduction

1 Jan

Cascading Style
Sheets (CSS) is a
language that is used to describe the stylistic
presentation of a structured document written in
HTML or XML. The CSS specification is maintained by
the World Wide Web Consortium (W3C).

Table of contents

  1. Overview
  2. History of CSS
  3. Difficulty with adoption
  4. Usage of CSS

    1. Example of an XHTML document with embedded
      CSS
    2. Example
      of a user style sheet
  5. Common pitfalls
  6. Recommendations
  7. References
  8. External links
    1. Hacks and
      workarounds

Overview

CSS is predominantly used by web page authors to
define colors, fonts, layout, and other document
characteristics. It is designed primarily to enable
the separation of document structure (written in
HTML or a related language) from document
presentation (written in CSS). This separation
provides a number of benefits, including improved
content accessibility, greater flexibility and
control in the specification of presentational
characteristics, and reduced complexity of the
structural content. CSS is capable of specifying
auditory characteristics and other alternative
rendering methods, in addition to its visual
formatting capabilities.

CSS information can be provided by:

  • Author style
    • external, i.e. a separate CSS-file referenced
      from the HTML document
    • embedded in the HTML document
    • inline, overriding the general style just for
      one occasion
  • User style
    • a local CSS-file specified by the user in the
      browser options, to be applied on all
      HTML-files; for the case that author and user
      style regarding a particular style item
      differ, the user can specify which should
      determine the result.
  • User agent style
    • the default style sheet applied by the user
      agent, eg. the browser’s default presentation
      of HTML elements.

CSS specifies a cascading order that accords
relative weights to rules. When rules from the
three origins overlap, the one with the greatest
weight takes precedence.

Advantages of using CSS include:

  • Presentation information for an entire website or
    collection of pages resides in one place, and can
    be updated quickly and easily
  • Different users can have different style sheets:
    large print and text readers for example. Web
    browsers allow users to specify their own local
    style sheet to apply to a remote site.
  • The HTML code is reduced in size and complexity,
    since it does not need to contain any
    presentational markup

CSS has a syntax that is simpler than that of HTML,
and uses a number of English keywords to specify
the names of various style properties. Here is a
simple example of what CSS code looks like:

 p { font-size: 110%; font-family: Garamond, serif; }
 h2 { color: red; background: white; }
 .highlight { color: red; background: yellow; font-weight: bold; }

Here, the HTML elements p (paragraph)
and h2 (level two heading) are being
assigned stylistic attributes. The paragraph
element will be rendered in a font size ten per
cent larger than its parent, in the Garamond font
or, if Garamond is unavailable, a generic serif
font. The level two heading element will be
rendered in red, on a white background. The third
rule shown here defines a CSS class, which
can be assigned to any HTML element by using the
class attribute. For example:

<p class="highlight">This paragraph
will be rendered in red and bold, with a yellow
background.</p>

The CSS rules given above can be included within
the HTML document, or imported separately. This
capability gives CSS much of its flexibility and
power. Additionally, CSS can be used with XHTML,
XML, or in fact any structured document format
which is properly implemented in an associated user
agent or browser.

History of CSS

Style sheets have been around in one form or
another since the beginnings of HTML in the early
1990s. Various browsers included their own style
language which could be used to customize the
appearance of web documents. Originally, style
sheets were targeted towards the end-user; early
revisions of HTML did not provide many facilities
for presentational attributes, so it was often up
to the user to decide how web documents would
appear.

As the HTML language grew, however, it came to
encompass a wider variety of stylistic capabilities
to meet the demands of web developers. With these
capabilities, style sheets became less important,
and an external language for the purposes of
defining style attributes was not widely accepted
until the development of CSS.

The concept of Cascading Style Sheets was
originally proposed in 1994 by Håkon Wium
Lie. Bert Bos was at the time working on a browser
called Argo which used its own style sheets; the
two decided to work together to develop CSS.

A number of other style sheet languages had already
been proposed, but CSS was the first to incorporate
the idea of “cascading” — the capability for a
document’s style to be inherited from more than one
“style sheet.” This permitted a user’s preferred
style to override the site author’s specified style
in some areas, while inheriting, or “cascading” the
author’s style in other areas. The capability to
cascade in this way permits both users and site
authors added flexibility and control; it permitted
a mixture of stylistic preferences.

Håkon’s proposal was presented at the “Mosaic
and the Web” conference in Chicago in 1994, and
again with Bert Bos in 1995. Around this time, the
World Wide Web Consortium was being established;
the W3C took an interest in the development of CSS,
and organized a workshop toward that end.
Håkon and Bert were the primary technical
staff on the project, with additional members,
including Thomas Reardon of Microsoft,
participating as well. By the end of 1996, CSS was
nearly ready to become official. The CSS level 1
Recommendation was published in December 1996.

Early in 1997, CSS was assigned its own working
group within the W3C, chaired by Chris Lilley. The
group began tackling issues that had not been
addressed with CSS level 1, resulting in the
creation of CSS level 2, which was published as an
official Recommendation in May 1998. CSS level 3 is
still under development as of 2003.

Difficulty with
adoption

Although the CSS1 specification was completed in
1996, it would be more than three years before any
web browser achieved full implementation of the
specification. Microsoft Internet Explorer 5.0 for
the Macintosh, shipped in March of 2000, was the
first browser to have full (better than 99 per
cent) CSS1 support. Other browsers followed soon
afterwards, and many of them additionally
implemented parts of CSS2, though as of 2003, no
browser has achieved full implementation of CSS2.

Even the browsers that did achieve full
implementation often did so with a degree of
difficulty; many implementations of CSS are fraught
with inconsistencies, bugs and other quirks.
Authors have commonly had to utilize hacks and
workarounds in order to obtain consistent results
across browsers and platforms. One of the most
well-known CSS bugs is the Internet Explorer box
model bug; box widths are interpreted incorrectly
in several versions of the browser, resulting in
blocks which appear as expected in most browsers,
but are too narrow when viewed in Internet
Explorer. The bug can be avoided, but not without
some cost in terms of functionality.

This is just one of hundreds of other CSS bugs that
have been documented in various versions of
Internet Explorer, Netscape, Mozilla, and Opera,
many of which have severe detrimental effects on
the legibility of the document; the proliferation
of such bugs in CSS implementations has made it
difficult for designers to achieve a consistent
appearance across platforms. However, currently,
Mozilla’s Gecko layout engine is the best at
rendering CSS, while Internet Explorer remains the
worst at rendering CSS by standards set down by
World Wide Web Consortium.

Usage of
CSS

CSS is designed primarily to separate presentation
from content. Authors who use CSS commonly do so
towards this end. Prior to CSS, nearly all of the
presentational attributes of an HTML document were
contained within the HTML code; all font colors,
background styles, alignment specification, boxes,
borders, and sizes had to be explicitly described,
often repeatedly, in the midst of the HTML code.
CSS allows authors to extract much of that
information, resulting in considerably simpler HTML
code, supplemented by an auxiliary style sheet
written in the language of CSS. The structure and
semantic markup is restricted to the HTML code,
while the presentational markup is restricted to
the CSS code.

For example, the HTML element h2
specifies that the text contained within it is a
level two heading. It has a lower level of
importance than h1 headings, but a
higher level of importance than h3
headings. This aspect of the h2
element is structural.

Customarily, headings are rendered in decreasing
order of size, with h1 as the largest,
because larger headings are usually interpreted to
have greater importance than smaller ones. Headings
are also typically rendered in a bold font in order
to give them additional emphasis. The
h2 element may be rendered in bold
face, and in a font larger than h3 but
smaller than h1. This aspect of the
h2 element is presentational.

Prior to CSS, document authors who wanted to assign
a specific color, font, size, or other
characteristic to all h2 headings had
to utilize the HTML font element, or
other presentational markup, in addition to the
h2 element, since h2 is
strictly a structural element. A heading to be
rendered in an italic red font on a white
background might be written:

<h2><font color="red"
bgcolor="white"><i>Usage of
CSS</i></font></h2>

The additional presentational markup in the HTML
made documents more complex, and generally more
difficult to maintain; if all level two headings
were to be rendered in this style, the markup had
to be used for each one separately. Furthermore, a
person reading the page with a web browser loses
control over the display of the text; if they would
rather see the heading in blue, they cannot easily
do so, as the site author has explicitly defined
the heading color to be used.

With CSS, the h2 element can be used
to give the text structure, while the style sheet
gives the text its presentational characteristics.
The above might be written:

<h2>Usage of CSS</h2>

With an accompanying style sheet to define the red
italic style and white background:

h2 { color: red; background: white;
font-style: italic; }

Thus, presentation is separated from content. (It
is because of the advantages offered by CSS that
the W3C now considers many of the presentational
elements and attributes in HTML to be deprecated).
The HTML describes only structural aspects, and the
CSS describes all presentational aspects. CSS can
define color, font, text alignment, size, and also
non-visual formatting such as the speed with which
a page is read out loud in text readers.

CSS style information can be either attached as a
separate document or embedded in the HTML document.
Multiple style sheets can be imported, and
alternative style sheets can be specified so that
the user can choose between them. Different styles
can be applied depending on what media is being
used. For example, the screen version may be quite
different from the printed version. This allows
authors to tailor the presentation appropriately
for each kind of media. Also, one of the goals of
CSS is to allow users a greater degree of control
over presentation; users who find the red italic
headings difficult to read may apply their own
style sheet to the document, and the presentational
characteristics will be “cascaded”; the user may
override just the red italic heading style, and the
remaining attributes will stay the way they are.

See also HTML tag#Presentational markup, which
gives the CSS code, along with the deprecated tags.


Example of an XHTML document with embedded CSS

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
     <title>Sample XHTML Page with CSS code</title>
     <style type="text/css">
       h1 { font: bold italic 150% sans-serif; color: blue; }
     </style>
   </head>
   <body>
     <h1>This will appear in large bold blue italics</h1>
     <p>Normal text.</p>
     <h1 style="color: red; background: green;">
     This will appear in large bold red italics on a green background,
     the general h1-style defined above is partly overridden.
     </h1>
     <h1>This will appear in large bold blue italics</h1>
   </body>
 </html>

Example of a
user style sheet

File highlightheaders.css containing:

 h1 {color: white; background: orange; !important}
 h2 {color: white; background: green; !important}

Such a file is stored locally and is applicable if
that has been specified in the browser options.
“!important” means that it prevails over the author
specifications.

Common pitfalls

CSS may at times be misused, particularly by the
author of web documents. Some developers who are
accustomed to designing documents strictly in HTML
may overlook or ignore the enabling features of
CSS. For instance, a document author who is
comfortable with HTML markup that mixes
presentation with structure may opt to use strictly
embedded CSS styles in all documents. While this
may be an improvement over using deprecated HTML
presentational markup, it suffers from some of the
same problems that mixed-markup HTML does;
specifically, it entails a similar amount of
document maintenance.

CSS shares some pitfalls common with programming
languages. In particular, the problem of choosing
appropriate names for CSS classes and identifiers
may afflict CSS authors. In the attempt to choose
descriptive names for CSS classes, authors might
associate the class name with desired
presentational attributes; for example, a CSS class
to be applied to emphasized text might be named
“bigred”, implying that it is rendered in a large
red font. While such a choice of naming may be
intuitive to the document author, it can cause
problems if the author later decides that the
emphasized text should instead be green; the author
is left with a CSS class called “bigred” that
describes something that is green. In this
instance, a more appropriate class name might have
been “emphasized,” to better describe the purpose
or intent of the class, rather than the appearance
of elements of that class. In a programming
language, such a misuse might be analogous to using
a variable name “five” for a variable which
contains the value 5; however, if the value of the
variable changes to 7, the name is no longer
appropriate.

Another problem are unspecified, undocumented, and
often forgotten class-names. A web author may have
hundreds of different needs; sometimes, the class
is called “footer”, sometimes “footnote”; at times
it’s “explanation”, at others “note”, then “info”,
then “more”. This way, redundancy creeps in. Often
an author of many complex websites might rely on
inline-styles to solve this problem; inline-styles
however again glue together content and layout, and
are media-dependent (a big bonus of external
stylesheets is their media-independence, as
different styles can be referenced for different
output media — something not possible with
inline-styles).

Complexity of HTML is another possible problem.
While most HTML which separates itself from the
layout world will be much more lean and clean than
traditional redundant table-layout, overuse of
classes and nested divisors can lead to almost the
same “garbage HTML”. Then, there’s the overuse of
divisors (which don’t have semantics of their own,
just like CSS classes or IDs) — a div-element with
the class “header” is naturally not to be preferred
to a h1, h2, or h3 element, yet we often see
similar things being written.

Yet another pitfall is a workaround to solve common
CSS or browser-implementation short-comings by
using so-called “CSS hacks”. Even though these
hacks serve a specific need (to exclude a certain
browser from a stylesheet, to please different
resolutions, and so on), their implementation and
maintenance cost might be higher than traditional
pre-CSS HTML methodology — table layout,
font-element and so on. (The only good thing about
those CSS hacks is they don’t re-appear in
thousands of pages but instead are in one or two
CSS files.)

Lastly there is a tendency of CSS designers to
mistake the layout easily to be achieved with the
layout a reader might prefer. Several CSS selectors
allow specific border styling, yet that doesn’t
make a border and box heavy web design better to
look at per se. Because we can does not mean we
should. And one of the most misused CSS styling
certainly is such trickery as removal of
link-underlines. It’s easy to implement, yes; but
the trouble for average visitors might be heavy.
(Extra-small and hard-to-decipher font-sizes on the
other hand have been around before stylesheets.)

Recommendations

The first CSS specification to become an official
W3C Recommendation is CSS level 1, published in
December 1996. Among its capabilities are:

  • Font properties
  • Color and background properties
  • Text properties
    • word-spacing
    • text-wrapping
    • alignment
  • Box properties
    • Margin
    • Border
    • Padding
    • Float
  • Classification properties
    • ‘display’
    • lists

The W3C maintains the CSS1
Recommendation.

CSS level 2 was developed by the W3C and published
as a Recommendation in May 1998. A superset of
CSS1, CSS2 includes a number of new capabilities,
among them the absolute, relative, and fixed positioning of elements,
the concept of media types, support for aural style
sheets and bidirectional text, and new font
properties such as shadows. The W3C maintains the
CSS2
Recommendation.

CSS level 2 revision 1 or CSS 2.1 fixes errors in
CSS2, removes poorly-supported features and adds
already-implemented browser extensions to the
specification. It’s currently a
Candidate Recommendation.

CSS level 3 is currently under development. The W3C
maintains a CSS3
progress report.

References

  • Jeffrey Zeldman: Forward Compatibility:
    Designing and Building with Web Standards.    ,
    New Riders, ISBN 0735712018 (paperback) (book’s
    companion site)
  • Eric A. Meyer: Cascading Style Sheets: The
    Definitive Guide    , 2nd Edition, O’Reilly &
    Associates, ISBN 0596005253
  • Eric A. Meyer: Cascading Style Sheets 2.0
    Programmer’s Reference    , McGraw-Hill Osborne
    Media, ISBN 0072131780

External links

Hacks and
workarounds

This article is licensed under the GNU
Free Documentation License. It uses material
from the
Wikipedia article “Cascading Style Sheets”.

No comments yet

Leave a Reply