Cascading Style Sheets Essay, Research Paper
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, 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
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 tags to
specify font size, color, and typeface and to define margins,
leading, etc.
This
is a local stylesheet declaration.
Global (embedded) stylesheet declarations, applicable to an
entire document, are defined within the and
tags, which precede the tag in the HTML document
and are usually placed in the header.
To embed a global stylesheet in your HTML document:
Title
[DOCUMENT BODY GOES HERE]
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; font-size: medium;
color: red}
H1 {font-family: serif; font-size: x-large; color:
green}
H2 {font-family: serif; font-size: large; color:
blue}
To apply a .css stylesheet (”style.css” in the example below)
to an HTML page, a tag is added to the page header:
Inheritance
In cases where local, global, and linked style definitions
conflict, the most specific stylesheet will generally take
precedence: local overrides global, global overrides linked.
Similarly, inline style attributes override ID, ID overrides class,
and class overrides stylesheet-defined HTML elements.
——————————————————————————–
Units of Measure
Throughout this CSS reference guide, abstract values (notably
values involving units of measure) appear between angle
brackets: . They should be replaced by actual values as
indicated in the key below.
Length Units
indicates a number followed by a unit of measure:
24px.
The number can be an integer or a decimal fraction, and can
be preceded by + or -.
Units can be absolute or relative:
Absolute: mm, cm, in, pt, pc (millimeters,
centimeters, inches, points, picas)
Relative: em, ex, px (the element’s font height,
the element’s x-height, pixels)
Font size may be defined in points, pixels, inches,
or centimeters (pt, px, in, cm) or as a percentage.
can be: xx-small, x-small, small,
medium, large, x-large, xx-large.
can be: larger, smaller.
Percentage Units
indicates a number followed by a % sign: 50%.
In the text-indent, margin, padding, and width properties,
percentage values are relative to the width of the parent
element.
In the font-size property, percentage values are relative to the
font size of the parent element.
In values, percentages can be used to express RGB
values.
Color Units
can represent either or values, as
defined below:
can be: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow
can be: # rgb(,
, )
rgb(,,)
represents a hexidecimal value, a
decimal value, and a percentage.
——————————————————————————–
CSS-P (Po
CSS-P allows you to explicitly determine the position of HTML
elements, providing powerful layout control both for static
documents and for dynamic, animated HTML-based content.
There are two basic methods of positioning HTML elements
using the position property. Absolute position lets you set an
element’s position arbitrarily – that is, relative to its parent
container and independent of the document’s flow. Relative
position allows an element to be offset relative to its natural
position in the document’s flow.
Position is specified with the top and/or left properties using a
value (relative or absolute as appropriate).
The visibility property sets the display state of the element,
but doesn’t affect its position in the layout: An element takes
up the same space whether hidden or visible.
Z-index is used to specify the stacking order of the
positionable elements above or below other HTML elements.
The number value may be positive or negative, and must be an
integer. Default z-ordering of elements in a document is
back-to-front in the order of their appearance in the HTML.
The overflow element is used to control the display of an
element’s contents in cases where they exceed its given
dimensions. It applies only to elements with the position
property of type “absolute.”
Dynamic aspects of managing positioned elements, like hiding,
displaying, and movement, are implemented using an external
scripting language, such as JavaScript.
The top and left properties may be expressed as percentages.
For other CSS-P properties listed, percentages do not apply.
——————————————————————————–
Attributes
Class and ID
Classes let you create grouping schemes among styled HTML
tags by adding the style definition of a particular class to the
style definitions of several different tags. In the stylesheet, a
class name is preceded by a period (.) to identify it as such:
.foo {property 1: value 1; property 2: value 2}
A very simple example:
P {font-family: sans-serif; font-size: 10pt}
H1 {font-family: serif; font-size: 30pt}
H2 {font-family: serif; font-size: 24pt}
.red {color: red}
.green {color: green}
.blue {color: blue}
The tags and classes can then be used in combination:
This is rendered as 30-point red
serif text.
This is rendered as 10-point red
sans-serif text.
Or not:
This is rendered as 10-point sans-serif text in
the default color.
The ID attribute is used for a uniquely defined style within a
stylesheet. In the stylesheet, an ID name is preceded by a
hash mark (#) to identify it as such:
#foo {property 1: value 1; property 2: value 2}
Text rendered in the foo style.
Text-Level Attributes: and
The tag is generally used to apply a style to inline
text:
This text is rendered as
foo-style and this is not.
The tag is generally used to apply a style to a block of
text, which can also include other HTML elements:
The “foo” style will be applied to this text, and
to this text as well.
The style attribute provides a way to define a style for a single
instance of an element:
This text is
rendered as red, 10-point type
The class, ID, and style attributed can be applied within the
and elements. Used with class or ID, the
and tags work like customized HTML tags, letting you
define logical containers and apply a style to their contents.
——————————————————————————–
Conclusion
In conclusion CSS is a dynamic, innovative approach to creating
web sites. CSS’s freedom and reliability of code allows for pages
to be created by the most novice web programer and also allows
for creativity of the more advanced users. CSS is the wave of the
future in web programing, soon all sites will have a stylesheet controling
the style and form.
——————————————————————————–
Bibliography
http://www.w3.org/pub/WWW/Style/css/draft
Draft of the Cascading Stylesheets proposal
http://www4.inria.fr/
FORM-baesd CSS stylesheet editor.
http://www.ornl.gov/sgml/wg8/wg8home.htm
The ISO/IEC JTC1/SC18/WG8 Web Service — look on this page for links to information about
DSSSL and DSSSL-Lite (another proposed web-stylesheet
language). Other DSSSL information can be found at:
http://occam.sjf.novell.com:8080/dsssl/dsssl96 — The draft DSSSL standard.
http://occam.sjf.novell.com:8080/docs/howto_search_dsssl.html — Suggestions on how to use the underlying
SGML tag structure of the draft standard for searching,
ftp.netcom.com/pub/no/novlepub/dsssl/dsssl-dt — The draft standard in DynaText format. You need
the files dsssl96.zip, dtwin23.zip, readme.txt and unzip.exe. You cannot use pkunzip.
ftp.netcom.com/pub/no/novlepub/dsssl/src — The SGML source files for the DynaWeb draft.
334