================================================
<!--content start-->
<!--headline start-->Containing Web Pages<!--headline end-->
<!--body start-->
Last week I talked about Dynamic HTML and how it can be
used to add animation to your site. Over the previous
several weeks I introduced SVG "Scalable Vector Graphics"
as a new W3C sanctioned format that will provide vector
graphics and animation capabilities to your web site.
Both SVG and Dynamic HTML are in many ways, "Container
Technologies". That is, they combine many other
technologies together to build a new technology. Without
these existing technologies, neither SVG nor Dynamic HTML
would work. Both SVG and Dynamic HTML are dependent on two
specific technologies. These are: CSS (Cascading Style
Sheets) and a Scripting language (usually Javascript).
Due to the relevance of these two technologies to both SVG
and Dynamic HTML, I think it would be worthwhile to look
at them in more detail. Even if you are not intending to
create Dynamic content yourself, both CSS and Javascript
can be used for many other enhancements to your standard
HTML pages.
CSS or "Cascading Style Sheets" is a W3C sanctioned format
for adding greater flexibility to the display of
documents. HTML for example, does not provide the ability
to position elements within a browser. Text and Images are
simply displayed in a linear format with each element
following the position of the previous element. With CSS,
it is possible to position a picture or block of text
anyplace on the screen completely independently of any
other element.
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 can be used to define global styles
that will be used by specific elements within the
document. An example a style container used to assign
global attributes:
is64fig1
In this example, whenever a H1, P or the UL tag is used,
the specified color, font size and for the UL tag, a
background image, will be applied.
The style contain can also be used to define your own
classes of styles that you can use anyplace you wish. For
example:
Now if you wish to switch between large and small fonts
within a section of text you would use the class attribute
to select the predefined style.
This is my default text but
if I
want small text
or I want
to
use big text
I can simply select the appropriate
style using the class attribute.
You can create as many style containers as you wish and
place them in the HEAD or BODY sections of your web page.
A Style can also be placed in an external file that can be
shared globally by all your web pages. You can access an
external file with the link tag:
If you wish to assign a style to a small single block of
text or element, a more convenient way to do it is inline.
Inline styles are only applied to the current tag but will
take precedence over global container styles. An example
of an inline style is:
een">This is a
style example
In this example the P tag's existing Font Face and Font
Size will be used but the background color will be
replaced with green and the default text color will be
replaced with red.
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 an 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.
One of the unique and most powerful aspects of styles is
that they are part of the DOM or Document Object Modal.
What that means is that an element's styles become part of
the data structure that is retained after the page (or
document) is loaded. Since it is part of the DOM, its
value can be changed.
So what?
If you assign a block of text a Red style and then change
it to Blue after the page has loaded, when the page is
redrawn, the red text will turn Blue. Likewise if you
change the X,Y position of style, the element using that
style will move at the next redraw. This is how you create
animation in Dynamic HTML and SVG.
"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.
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
