It's all about control. Or the lack thereof.
Learning to add style to your pages by adding
<style> to your pages.
While HTML is a relatively simple language to master, or at least use,
it has its drawbacks or hadn't you noticed?
Maybe it just never occurred to you, but while you have control over
some of the simpler elements of the appearance of the plain text of
your documents - stuff like bold and italics and underline - you can't
prescribe some of the subtler aspects that really make a reader smile
and go 'Wow!' like they might do while perusing the latest issue of
Wired or Rolling Stone or Details. Those nifty type tricks where words
overlap or the first letter is really big and it doesn't screw up the
rest of the line and the headlines jump out at you and so on and so
forth.
Open a magazine, then compare that to what you can do with HTML on a
Web page. Sure, you can sort of cheat and make a graphic that positions
words the way you want them to be seen. And, yes, you have some control
over appearance with the font tag. But you have to trick a page using
table cells and blank GIFs to achieve simple margins and indents, and it
still doesn't look as cool, does it? And you don't have that control, do
you?
Well, now who would go to all the trouble of bitching about a problem
without offering a solution, except somebody looking to get elected to
something? And since that isn't the case here...
S A Y W H A T ?
Enter Cascading Style Sheets or CSS.
Cascading, because you can use more than one and the browser needs to
be able to tell which one to use. Style, because that's what you're
defining. Sheets, because Cascading Style Doodads doesn't have that nice,
tidy, professional-sounding ring to it. With CSS, you are suddenly given
the capability to perform some rather amazing page design stunts all
without a net.
Before we start down this road, you need to be aware that the only
browsers currently supporting CSS are Microsoft's Internet Explorer v3.0+
and Netscape Navigator 4.0 - now called Communicator - in a limited
fashion. But that also means that the majority of users won't be able to
see your cool CSS page effects. Which means that unless you plan on
designing separate pages for browsers that can and can't interpret CSS,
you would be best advised to use Style Sheet instructions as incidental
and not integral to your page design.
Your next question is likely, "Can I design a page that allows me to
use CSS and still make it look good for everyone else?" Short answer: Yes.
Long answer: We'll get to that later. Given that you may not even choose
to use Style Sheet formatting now, it behooves you to learn it because it
will be coming and if you don't have it when everyone else does, you'll
feel like a poor forlorn design schmo, or PFDS in Web lingo.
I just made that up, but feel free to spread it around.
You need to get familiar with some new concepts when you start thinking
about CSS. Firstly, it used to be that you could only attach layout
instructions to certain HTML tags. For example, you could define the
background for a page in the <body> tag and apply it to
the entire document. With CSS, you can define a BACKGROUND for a document
<body> or <p> or
<h1>, etc.
So a paragraph, a sentence, a word, a letter can have its own
background and text effects. So think of everything on a page as an
element that you can now ascribe individual attributes to. Oops, ended
with a preposition.
DANGER!: Well, not really, but that got your attention, didn't it? This
is just a warning about something very specific pertaining to using
Style Sheets as opposed to the CSS itself. When you are marking up a
page and you intend to use CSS, it's very important that you use the tags
for the purpose designed, particularly the Paragraph mark,
<p>.
The reason is because CSS will be very serious about what it does when
it starts affecting your page. For example, if you are now using
<p> more as a separator than as an envelope, along with
</p>, to encompass a Paragraph (like you use one
between every element - including tables and images - on a page to provide
a line of blank space) you may find your text bleeding across your images,
or being hidden by them, and your tables collapsing in on themselves
attempting to conform to your CSS margins and such. Remember, a
<table> is not a <p>aragraph. It's a
<table>. When you want blank space around an image, use
the "hspace=" and "vspace=" elements which is what they're there for. If
you want to separate your tables, use two
<br><br>'s instead of a
<p> and you'll be so much happier you'll scream with
ecstatic bliss. Think about what a tag means instead of what effect
it has and use it for that purpose. No more cheating!
And stop whining. It's unattractive and your face will stick that
way.
P U S H I N G T H E E N V E L O P E
Another concept to become familiar with involves what we'll call
envelopes.
With HTML, you can't set margins without goofing with tables and
transparent GIFs or frames. You can set borders, but only around images,
frames and table elements. CSS introduces three envelopes called (in order
from outside to in) Margin, Padding and Border. These are areas of blank
space that surround elements and, again, you will be able to assign very
specific measurements to each side (e.g. margin-right,
border-bottom-width, padding-top) of each envelope or box.
So, the BODY of the document with a red BACKGROUND might have a set
MARGIN on each edge, then you might decide that list items
<li> have a 20-pixel PADDING around them with a blue
BACKGROUND color, and a 5-pixel BORDER of white. This would yield a white
box of text, surrounded by a border of blue, sitting on a red page. Or the
background of any of those enveloping elements could be a graphic. Or an
element might have no background defined and would be transparent. Using
those three boxing envelope elements you can move other elements all over
your page by any measurement (centimeter, pixel, inch, etc.) so you
suddenly have complete layout control.
Scary.
Before telling you how to define things, let's look at what you will
be able to define. This may seem backwards, but maybe you'll get a clearer
idea of your options once you see in detail what the variables are for
designing your page layout. Or maybe you'll suffer information overload
and run screaming from your computer. Either way, it should be fun.
|
_files/blankdot.gif){kind=spacer}
_files/nav_graydot.gif){kind=small}
_files/nav_blackdot.gif){kind=small}
_files/sitetool_bluedot.gif){kind=small}