Embracing Cascading Style Sheets Makes Good Sense
By Fred Black (c) 2006
Why do I like Cascading Styles Sheets (CSS) and what makes
CSS so great. The answer only makes sense if you know what
CSS is.
The Holy Grail of CSS is to separate the content of a web
page from the instructions that control what it looks like.
This makes it much easier for various devices to display
the web page correctly. The same page would display
correctly on all standard web browsers (Internet Explorer,
FireFox, Opera, Netscape, etc.), and devices used by
persons with a handicap, cell phones, other devices, and
yet-to-be-developed interfaces. The web site designer would
not have to make separate pages for these devices. However,
reality is different and here in the real world CSS does
not do all these things. It does have enough positive
points to make it worthwhile to learn and incorporate it
into your web pages.
There are multiple ways to control how something looks on a
web page. The color, size, and font used for a headline or
for a paragraph of text can be defined with in-line styles
and tags. The term "in-line" means that the commands for
controlling the color, size, and font are mixed in with the
content. This makes the source code for the page cluttered
and hard to read and edit when you want to update it or fix
something. Also, because you're repeating the same commands
over and over throughout the page, the file size of the
page gets larger and hence slower for those browsing your
site.
As opposed to in-line styles, CSS is not repeated
throughout the page. CSS can be defined in the head
section, or put in a separate file and referenced from the
HTML file, or both. CSS consists of definitions of how a
page component should render itself on the page. For
example, you can define that a headline should be blue, 24
point, centered text and that a paragraph should be black,
12 point, justified text. Once that is defined, any normal
HTML paragraph tags or headline tags would use these
definitions when rendered.
You can define almost all the normal HTML objects this way;
background color, background image, background image position,
tables, cells, images, divs, etc. This leaves your HTML code
clean and much easier to read. Just like those Ronco TV
commercials, there's more! If you have a multi-page web site
and you use CSS and all your CSS definitions are in a separate
file, you have one place to go to change the look and feel of
all the pages in your site. Imagine if you have a 50 page site
and you learn that the size of your text in all your paragraphs
is too small or the wrong color to maximize sales: instead of
having to edit 50 pages and change the definition of each
paragraph, you simply edit the CSS file and you're done!
But with CSS what do you do if you want one paragraph or a
set of paragraphs to look different? You define a class. If
you have a right column where you display ads in your CSS,
you would define a class and give it a name such as ".rcol",
then you would define the necessary items that you want to
look different (p tags for example). ".rcol p" would be
used to control how a paragraph tag was rendered. You
simply add "class=rcol" to the paragraph tag, or the table
tag if it's in a table, or div tag if it's in a div, etc.
This is also where the cascading in CSS comes into play:
the default definitions cascade down into a class as long
as the class does not contain something that overrides the
default. This means that in our example text rendered in a
paragraph tag looks different for the rcol class, but
because that's the only thing we've defined for rcol,
everything else would use the same styles as the rest of
the page.
You can also define size and positioning for objects in
CSS. This is one place where we hit the real world of CSS
pretty hard. Not all browsers support the size and position
commands the same way. This leads to hacks that define a
position and then use a command that is known. For example,
to cause Internet Explorer to bail out of the CSS, after
that line you use a position command that Netscape for
example understands. CSS uses the last definition of an
object so this technique can be used to "trick" or "hack"
CSS into working across more browsers than it normally
would.
I don't recommend doing this. One reason is that
it's messy and easy to forget why you did something. The
other reason is because as browsers are updated, or new
devices come online, they may not follow these unwritten
and unsupported hacks and your pages are apt to be all
messed up. To get around this I usually use CSS as much as
I possibly can and then use tables and in-line definitions
to control positioning and size. Some people will go to
great lengths to use CSS for everything, even replacing all
tables, but here in the real world, you should get the
page built, functioning, and in a form that can be used
reliably on as many platforms as possible.
Not all web site software packages like Microsoft Front
Page, Dreamweaver, or Adobe GoLive, etc. fully support CSS.
You'll have to do some coding manually. Don't worry, it's
not that hard. I have an online course that can teach you
how, just follow the link at the end of this article.
Take the time to learn CSS and implement it in your web
pages. It will be time well spent.