Cascading Style Sheets
Essay by review • September 1, 2010 • Essay • 6,135 Words (25 Pages) • 2,381 Views
Cascading Style Sheets (CSS)
What is CSS?
CSS (cascading stylesheets) is a simple mechanism for
controlling the style of a Web document without compromising
its structure. By separating visual design elements (fonts,
colors, margins, and so on) from the structural logic of a Web
page, CSS give Web designers the control they crave without
sacrificing the integrity of the data - thus maintaining its
usability in multiple environments. In addition, defining
typographic design and page layout from within a single,
distinct block of code - without having to resort to image
maps, <font> tags, tables, and spacer GIFs - allows for faster
downloads, streamlined site maintenance, and instantaneous
global control of design attributes across multiple pages.
--------------------------------------------------------------------------------
How CSS Works
CSS overrides the browser's default settings for interpreting
how tags should be displayed, letting you use any HTML
element indicated by an opening and closing tag (including the
<p> tag) to apply style attributes defined either locally or in a
stylesheet.
Stylesheets contain rules, composed of selectors and
declarations that define how styles will be applied. The selector
(a redefined HTML element, class name, or ID name) is the link
between the HTML document and the style. There are two
different kinds of selectors: types (HTML element tags) and
attributes (such as class and ID names).
A CSS declaration has two parts,
a property ("color") and a value ("red").
The basic syntax of a rule
selector {property 1: value 1; property 2: value:
2}
An example (containing two declarations, as above)
P {font-size: 8pt; color: red}
--------------------------------------------------------------------------------
Local, Global, and Linked Stylesheets
Local (inline) stylesheet declarations, specific to a single
instance on a page, can be used instead of <font> tags to
specify font size, color, and typeface and to define margins,
leading, etc.
<p style="font size: small; color: red; font-weight:
bold; font-family: Ariel, Helvetica, non-serif">This
is a local stylesheet declaration. </p>
Global (embedded) stylesheet declarations, applicable to an
entire document, are defined within the <style> and </style>
tags, which precede the <body> tag in the HTML document
and are usually placed in the header.
To embed a global stylesheet in your HTML document:
<html>
<head>
<title>Title</title>
<style type="text/css">
<!--
[STYLE INFORMATION GOES HERE]
-->
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
Linked stylesheet declarations use a single stylesheet (in a
separate file, saved with the .css suffix) to define multiple
pages. A typical .css file is a text file containing style rules, as
here:
P {font-family: non-serif;
...
...