Cascading Style
Sheets. (CSS)
By Virtual Mechanics |
Last week we introduced
Dynamic HTML and Cascading Style Sheets (CSS) as one of its
three major components. We have mentioned CSS in several past
issues. Unfortunately its name tends
to send many people running for cover. It's a term that could
only have been coined by a techie with a penchant for the dramatic.
If I were responsible for the name I would have called it PHH
for 'Position your HTML Heverywhere'. This name not only helps
describe what it does but the spelling also identifies it as
a techie term.
Cascading Style Sheets are a W3C (see below) specified method
for adding desktop publishing capabilities to HTML. CSS enables
you to define a Style such as position, size, Font etc. and
assign it to a picture, block of text or combination of Objects
on your web sites. There are two primary ways to define a style.
The first is through
the Style container which is used to define a globally accessible
style. The second is inline were the style may be applied to
a single tag.
The style container is used to define multiple styles that will
be applied globally to the document. An example of a style container
is:
<STYLE TYPE="text/css">
H1 {color: blue; 12pt}
P {color: black; 10pt}
UL {background -image: url(mypic.gif)}
</STYLE>
is6fig1
In this example, whenever a H1, P or the UL tag is used, the
specified color, font sizes and for the UL tag, a background
image, will be applied. The style container can either be placed
between the </HEAD> and <BODY> tags or it can be
placed into a separate file and accessed by multiple documents
on your web site through the
LINK tag as in: <LINK rel=STYLESHEET HREF="mysheet.css" TYPE="text/css">
The second method defines Styles inline with individual tags.
Inline tags are only applied to the current tag but will take
precedence over global container styles. An example of an inline
style is:
<p style="color:red;Font-Size:24pt;background-color:green">This
is a style example</p>
What styles are available?
Many of the styles such as FONT expand upon the basic HTML elements.
Some Styles such as BACKGROUND add new features. Some of the
major categories are (capitalized only for clarity) BACKGROUND,
BORDER, CLEAR, COLOR, FLOAT, FONT, HEIGHT, LETTER, LIST, MARGIN,
PADDING, POSITION, TEXT, VERTICAL, WHITE, WIDTH and WORD. Many
categories also include multiple properties providing a wealth
of new design
capabilities to HTML authors.
So just why do Style Sheets Cascade? It refers to the potential
conflict that arises when an element has the same attribute
assigned to it multiple times. This can occur when a style is
defined in a external file, again in a container and again in
multiple in-line attributes. The Cascade determines which style
will be used. This is usually (simplistic) the style closest
to the element it is applied to.
If you would like to find out more about Style Sheets, an excellent
place to start is the W3C Style page at http://www.w3.org/Style/
If you are not aware of it, the W3C or World Wide Web Consortium
is a group of Internet professionals responsible for defining
the www standards such as HTML. The W3C web site is at http://www.w3.org/
and contains all kinds of useful Internet information.
Source: "IMS Web Tips" is a weekly news letter for
all web site managers regardless of experience who are looking
for detailed information on creating, maintaining and promoting
their web sites.
To subscribe send an email to join.imswebtips@list.imswebtips.com
or visit www.IMSWebTips.com
for subscription information and a list of past articles.
More Articles
|
.
|
|
[an error occurred while processing this directive]
|
|
|
|
|
