What you need to know about CSS!
Style sheet is a progressive breakthrough for the advancement of
web. Today, more and more browsers are implementing style
sheets, opening authors' eyes to unique features that allow
influence over presentation while preserving platform
independence. The advantages of style sheets have become -
apparent -- and the disadvantage of continually creating more
HTML tags -- galore -- for presentation effects with the gradual
development of CSS.
Let's understand CSS in the right perspective.
Style sheets in retrospect
Style sheets have been around in one form or another since the
beginnings of HTML in the early 1990s .
As the HTML language grew, however, it came to encompass a wider
variety of stylistic capabilities to meet the demands of web
developers . With such 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.
Teething problems with implementation of CSS
Many implementations of CSS are fraught with inconsistencies,
bugs and other quirks . Authors have commonly had to use hacks
and workarounds in order to obtain consistent results across web
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 CSS bugs that have been
documented in various versions of Internet Explorer, Netscape,
Mozilla, and Opera many of which reduce the legibility of
documents. The proliferation of such bugs in CSS implementations
has made it difficult for designers to achieve a consistent
appearance across platforms.
Currently there is strong competition between Mozilla's Gecko
layout engine, Opera's Presto layout engine , and the KHTML
engine used in both Apple's Safari and the Linux Konqueror
browsers - each of them is leading in different aspects of CSS.
Internet Explorer remains the worst at rendering CSS by
standards set down by World Wide Web Consortium as of 2005 .
Some breakthroughs ...
These problems have preisely led the W3C to revise the CSS2
standard into CSS2.1, which may be regarded as something of a
working snapshot of current CSS support. CSS2 properties which
no browser had successfully implemented were dropped, and in a
few cases, defined behaviours were changed to bring the standard
into line with the predominant existing implementations..
What makes style sheets significant enough?
et representsStyle she an enormous step forward for the Web.
With the separation of content and presentation between HTML and
style sheets, the Web no longer needs to drift away from the
strong ideal of platform independence that provided the medium
with its initial push of popularity. Authors can finally
influence the presentation of documents without leaving pages
unreadable to users
A style sheet is made up of style rules that tell a browser how
to present a document. There are various ways of linking these
style rules to your HTML documents, but the simplest method for
starting out is to use HTML's STYLE element. This element is
placed in the document HEAD, and it contains the style rules for
the page.
Functionality and Usage of CSS
CSS is well-designed to allow the separation of presentation and
structure. Prior to CSS, nearly all of the presentational
attributes of an HTML document were contained within the HTML
code; all font colors, background styles, element alignments,
borders and sizes had to be explicitly described, often
repeatedly, in the midst of the HTML code.
CSS allows authors to move much of that information to a
stylesheet, resulting in considerably simpler HTML code. The
HTML documents become much smaller and web browsers will usually
cache sites' CSS stylesheets. This leads to a reduction in
network traffic and noticeably quicker page downloads.
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 use the HTML font element for each occurrence of that
heading type.
Moreover, CSS can be used with XML, to allow such structured
documents to be rendered with full stylistic control over
layout, typography, color, and so forth in any suitable user
agent or web browser.
CSS has its share of inconsistencies as well
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.
Discrepancies compared: CSS vs programming languages
CSS also 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.
CSS in a nutshell
CSS is used by both the authors and 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 structure (written in HTML or a similar markup
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 also
capable of controlling the document's style separately in
alternative 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, tactile devices.
CSS allows complete and total control over the style of a
hypertext document. The only way this can be illustrated in a
way that gets people excited is by demonstrating what it can
truly be, once the reins are placed in the hands of those able
to create beauty from structure.