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.
With the availability of new HTML authoring tools such as IMS, it
is not necessary to become proficient in the use of CSS. Having a
basic understanding of the underlying technology however, is an
invaluable advantage.
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.
"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.
