CSS is designed
primarily to enable the separation of document content (written in HTML or a
similar markup language) from document presentation, including elements such as
the layout, colors, and fonts.[1] This separation can improve content accessibility,
provide more flexibility and control in the specification of presentation
characteristics, enable multiple pages to share formatting, and reduce
complexity and repetition in the structural content (such as by allowing for tableless web design). 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 (when read out by a
speech-based browser or screen reader)
and on Braille-based, tactiledevices. It can
also be used to allow the web page to display differently depending on the
screen size or device on which it is being viewed. While the author of a
document typically links that document to a CSS style sheet, readers can use a
different style sheet, perhaps one on their own computer, to override the one
the author has specified.
CSS
specifies a priority scheme to determine which style rules apply if more than
one rule matches against a particular element. In this so-calledcascade,
priorities or weights are calculated and assigned to rules,
so that the results are predictable.
Selector
In CSS, selectors are used to declare which
part of the markup a style applies to, a kind of match expression. Selectors
may apply to:
- all elements of a specific type, e.g.
the second level headers h2
- to
elements specified by attribute, in particular:
- id:
an identifier unique to the document
- class
- to
elements depending on how they are placed relative to, or nested within,
others in the document tree.
Pseudo-classes are used in CSS selectors to
permit formatting based on information that is outside the document tree. An
often-used example of a pseudo-class is :hover, which identifies content
only when the user 'points to' the visible element, usually by holding the
mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover.
A pseudo-class classifies document elements, such as :link or :visited,
whereas a pseudo-element makes a selection that may consist of
partial elements, such as :first-line or :first-letter.
Use
Prior to CSS, nearly all of the presentational attributes of
HTML documents were contained within the HTML markup; all font colors,
background styles, element alignments, borders and sizes had to be explicitly
described, often repeatedly, within the HTML. CSS allows authors to move much
of that information to another file, the style sheet, resulting in considerably
simpler HTML.
Headings (h1 elements), sub-headings (h2), sub-sub-headings
(h3), etc., are defined structurally using HTML. In print and on the screen,
choice of font, size, color and emphasis for these elements is presentational.
Prior to CSS, document authors who wanted to assign such
typographic characteristics to, say, all h2 headings had to repeat HTML
presentational markup for each occurrence of that heading type. This made
documents more complex, larger, and more difficult to maintain. CSS allows the
separation of presentation from structure. CSS can define color, font, text
alignment, size, borders, spacing, layout and many other typographic
characteristics, and can do so independently for on-screen and printed views.
CSS also defines non-visual styles such as the speed and emphasis with which
text is read out by aural text readers. The W3C has now deprecated the use of
all presentational HTML markup.[citation needed]
An "external" CSS stylesheet file, as described
below, can be associated with an HTML document using the following syntax:
<link href="path/to/file.css" rel="stylesheet">
Limitations
Some noted limitations of the current capabilities of CSS
include:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of an
element that satisfies certain criteria, until CSS Selectors Level 4, which
is still in Working Draft status. A more advanced selector scheme (such as
XPath)
would enable more sophisticated style sheets. However, the major reasons for
the CSS Working Group previously rejecting proposals for parent selectors are
related to browser performance and incremental rendering issues.
Vertical control limitations
While horizontal placement of elements is generally easy to
control, vertical placement is frequently unintuitive, convoluted, or outright
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;). This
would be useful in a variety of cases, such as calculating the size of columns
subject to a constraint on the sum of all columns. However, a
working draft with
a calc() value to address this limitation has been published by the CSS WG.Internet
Explorer versions 5 to 7 support a proprietary expression() statement, with
similar functionality. This proprietary expression() statement is no longer
supported from Internet Explorer 8 onwards, except in compatibility modes. This
decision was taken for "standards compliance, browser performance, and
security reasons".
Lack of column declaration
While possible in current CSS 3 (using the column-count module), layouts
with multiple columns can be complex to implement in CSS 2.1. With
CSS 2.1, 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.
Cannot explicitly declare new scope independently of
position
Scoping rules for properties such as z-index look for the
closest parent element with a position:absolute or position:relative attribute.
This odd coupling has undesired effects. For example, it is impossible to avoid
declaring a new scope when one is forced to adjust an element's position,
preventing one from using the desired scope of a parent element.
Pseudo-class dynamic behavior not controllable
CSS implements pseudo-classes that allow a degree of user
feedback by conditional application of alternate styles. One CSS pseudo-class,
":hover", is dynamic (equivalent of JavaScript
"onmouseover") and has potential for abuse (e.g., implementing cursor-proximity
popups), but CSS has no ability for a client to disable it (no
"disable"-like property) or limit its effects (no
"nochange"-like values for each property).
Cannot name rules
There is no way to name a CSS rule, which would allow (for
example) client-side scripts to refer to the rule even if its selector changes.
Cannot include styles from a rule into another rule
CSS styles often must be duplicated in several rules to
achieve a desired effect, causing additional maintenance and requiring more
thorough testing.
Cannot target specific text without altering markup
Besides the :first-letter pseudo-element, one
cannot target specific ranges of text without needing to utilize place-holder
elements.
Advantages
Separation of content from presentation
CSS facilitates publication of content in multiple
presentation formats based on nominal parameters. Nominal parameters include
explicit user preferences, different web browsers, the type of device being
used to view the content (a desktop computer or mobile Internet device), the
geographic location of the user and many other variables.
Site-wide consistency
When CSS is used effectively, in terms of inheritance and
"cascading," a global style sheet can be used to affect and style
elements site-wide. If the situation arises that the styling of the elements
should need to be changed or adjusted, these changes can be made by editing
rules in the global style sheet. Before CSS, this sort of maintenance was more
difficult, expensive and time-consuming.
Bandwidth
A stylesheet, internal or external, will specify the style
once for a range of HTML elements selected by class, type or relationship
to others. This is much more efficient than repeating style information inline
for each occurrence of the element. An external stylesheet is usually stored in
the
browser cache,
and can therefore be used on multiple pages without being reloaded, further
reducing data transfer over a network.
Page reformatting
With a simple change of one line, a different style sheet
can be used for the same page. This has advantages for accessibility, as well
as providing the ability to tailor a page or site to different target devices.
Furthermore, devices not able to understand the styling still display the
content.
Accessibility
Without CSS, web designers must typically lay out their
pages with techniques that hinder accessibility for vision-impaired users, like
HTML tables (see
Tableless web
design#Accessibility).
