Why Use Style Sheets? - Page 2
July 31, 2001
Like text editors, WYSIWYG editors use tables to build pages.
Tables in HTML are not
unlike shelves in the local hardware store. They are used to
separate items, but they are not for attractive display.
It is in this area that WYSIWYG editors run into problems. Many
use unacceptable coding to accomplish what can easily be done
with hand HTML coding and style sheets. In fact, positioning is
an area where styles sheets really shine.
Granted, viewers need newer browsers to take full advantage of
style sheets, but because most are free and computer upgrades are
relatively inexpensive, there is no reason not to design for
them.
Positioning with CSS (
Cascading Style Sheets) most frequently
is used in two versions — absolute and
relative. Here is a look at each:
- Absolute: The most simple way to describe this is
simply that it allows the placement of an object with
pixel-level control. For example:
img {position:absolute; left:100; top:
100} would place an image 100 pixels from the left border
and 100 pixels down from the top border.
While most elements in HTML flow through a page, absolute
positioning eliminates that and allows users to place objects on
top of each other, if they wish, perhaps the back one larger than
the other to create a special effect. Users must be careful,
however, because those elements will be placed on top of type or
anything else on the page. Possible absolute positions are left,
right, bottom, or top. Note the placement of the colons and semi-
colons in the coding.
- Relative: This positioning places objects with pixel-
level control in regard to where they are normally placed on the
page. Place an object on the page, then change the positioning in
respect to where it began. Other elements are not factors in the
positioning. This positioning also allows users to flow text
around an image. Again, it's options are top, bottom, left, and
right. Here is a sample of what it would look like:
img {position:relative; left:100; top:
100} would place an image 100 pixels left and 100 pixels
down from where it was originally placed.
- Other types of positioning include Static,
Floating, and Z-order, but they are not as widely
used as the others. Static positioning is the same as
normal HTML, but it does allow a child element to be placed in a
particular position within the static, unmovable, parent element.
Floating positioning allows child elements to be floated
anywhere within a parent element, but is not as flexible as it
will likely become in future versions of style sheets. Z-
order refers to the back-to-front order that elements appear
on a page, should you choose to have one covering another in full
or partially.
Styles sheets can also be used to do many other things in HTML,
including assigning values to fonts and many other elements. Here
is a coding sample for merely choosing a special font in a
WYSIWYG editor document:
<font face="Trebuchet MS, Arial,
Helvetica"><h6 align="left"><font
color="#996600"><big><big><big>Copy goes
here</big></big></big></font></h6>
;
That would have to be done each time the user wanted the font to
appear that way.
Here is the same thing in hand-coded HTML, using an external style sheet, accessed with an <a href> command within the document:
.h6 {font-family:trebuchet MS, arial, helvetica;font-
size:16pt;color:#996600;}
The beauty of this is that, if the designer is using external
style sheets, it only needs to be done once, then called into use
with a <class=h6> command each time it is
needed.
Even more importantly, if the builder later wants to change the
size of the font, for example, all that needs to be done is to
open the file, change the point size, save it, and FTP it to the
server. No need to go through page by page or even to use global
search and replace.
Users can place styles within a document simply by putting the
desired commands in the "head" section of the document. Here is
an example:
<head>
<head>
<style>
.h6 {font-family:trebuchet MS, arial, helvetica;font-size:16pt;color:#996600;}
</style>
</head>
Again, users can later change the font size, for example, by
merely changing the "16pt" to the desired size.
Web Sites: Learn to Build Smart and Buy Smart
Titles and META Tags - Page 3
|
