July 24, 2010

Use of Cascading Style Sheets (CSS)

A graphical depiction of a very simple css doc...Image via Wikipedia

Use of CSS

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 a separate stylesheet resulting in considerably simpler HTML markup.

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 use the HTML font and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It 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 now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated the use of all the original presentational HTML markup.
CSS information can be provided by various sources. CSS style information can be either attached as a separate document or embedded in the HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.
  • Author styles (style information provided by the web page author), in the form of
    • external stylesheets, i.e. a separate CSS-file referenced from the document
    • embedded style, blocks of CSS information inside the HTML document itself
    • inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute.
  • User style
    • a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
  • User agent style
    • the default style sheet applied by the user agent, e.g. the browser's default presentation of elements.
One of the goals of CSS is also to allow users a greater degree of control over presentation; those who find the red italic headings difficult to read may apply other style sheets to the document. Depending on their browser and the web site, a user may choose from various stylesheets provided by the designers, may remove all added style and view the site using his or her browser's default styling or may perhaps override just the red italic heading style without altering other attributes.

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.

About the Author

Iwebslog Labs

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Post a Comment

Iwebslog Blog © 2015 - Designed by Templateism.com