Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Overview: the big picture



12:45 pm on Mar 7, 2001 (gmt 0)

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Hello Webmaster World

A Pain Free CSS Overview:

You know html like the back of your hand. You know js mouse rollers quite well. You probably even experimented a little with server side scripting (first time is free). Yet learning CSS has always been on the someday list. While I can't teach you CSS in a day, let's look at the big CSS picture and you can get an idea of what you are in for if you choose to learn CSS.

CSS: What is it
It is a method for applying style to an html document. I think of it as font tags and html color attributes on steroids. HTML gives you a big old brush to paint the picket fence, while CSS gives you a pixel thin detail brush to paint a masterpiece.

Why CSS?
CSS (Cascading Style Sheets) allow the page author greater control over page presentation. There are many things you can do in CSS that would be difficult and impossible in some cases in HTML.

There are also the benefits of being able to apply style via an external file to an entire web site with the change of one file. This opens up many possibilities for the page author AND user to change the way a website looks and feels with a simple file change.

Why Now?
Most version 4 browsers had huge sets of quirks with CSS that an author spent more time trying to get code to work than they did actual written it! With the release of IE5, NN6, Moz, and Opera 5, it has slowly become safer and less hazardous to use CSS. CSS is starting to pop up everywhere now. Almost all major portals and hubs are using CSS in varying degrees.

How Safe?
Three years ago, when the hype machine was in rare form, CSS was billed as the wave of the future. However, those of us that jumped on the bandwagon found it just wasn't ready. Browser bugs and user indifference left most of us swearing off CSS until it was safe again to use. Now that we've seen two full rounds of browser upgrading and mass adoption, CSS has never been safer too use.

How Style is Applied
There are three method to apply style to a html document: Inline, Embedded, and External. Inline style applies commands directly to an existing html tag or attribute, Embedded are style declarations near the top of an html document, and External is a stand alone file called a Style Sheet full of CSS declarations.

Inline Style: you may place style commands right along with standard html tags: (please replace square brackets with angled brackets in examples.)

[[html element name] STYLE="[CSS property]:[property value]"]

For example:

[h2 STYLE="background: #0000F0; color: red; line-height: 30px; font-size: 32px"]

The inline style is good for light usage when you need something special. It is also very safe because non css browsers will just ignore the extra attributes.

Embedded Style:
Embedded Style declarations are placed in the HEAD of the document.

Embedded style is good to use when you don't have many declarations. Take for example this page. It would be silly to place those few style declarations as an external file - it would require more time for the browser to connect and download a small style sheet, than it would to just put it inline. So embedded is good for beginners:

[STYLE TYPE="text/css"]
body {
margin-top: 0px;
margin-left: 0px

a:hover {
color: red;
background: yellow;
text-decoration: underline !important

If you have larger amounts of declarations, it is always better to go with an External style sheet.

External Style Sheets

External Style Sheets are a text formatted file with your CSS declarations in them. To link to the sheet from your html, you use the LINK tag in the HEAD section of your document:

[LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"]

You can even use more than one if you wish:

[LINK REL=Stylesheet HREF="urls.css" TITLE="combined"]
[LINK REL=Stylesheet HREF="colors.css" TITLE="combined"]
[LINK REL=Stylesheet HREF="fonts.css" TITLE="combined"]

Official CSS recommendations from the W3C
CSS 1 http://www.w3.org/TR/REC-CSS1
CSS 2 http://www.w3.org/TR/REC-CSS2/

The Whole Speed Controversy
Many tutorials claim that CSS will speed up page display and/or loading. While it might be true for someone using huge sheets, I find the whole speed up issue to be less than truthful.

The most important visit to a website is the users first - the page must load as fast as possible at that time. If your site lives and dies off raw foot traffic, speed isn't everything, it is the only thing. A good friend of mine is former pro poker player turned webmaster who sums it up this way; speed trumps all.

Getting excessive with Style Sheets, could cost you some first time hits as users leave before the sheet is loaded. If you are on a picky or congested server, the time required for a browser to request and load an external style sheet, could be the extra time that breaks your site.

I do grant, that you can gain a little of that back on successive pages as the browser won't be required to request the sheet again.

Code used for intro example at top:
[H1 STYLE="color: red; font-family: impact"]Hello Webmaster World[/H1]
[P STYLE="background: yellow; font-family: courier"]A Pain Free CSS Overview:[/p]

CSS Resources for futher study


5:15 pm on Mar 7, 2001 (gmt 0)

Thank you Brett. I have never had any luck with style sheets, but you make some good points. I will again look into working style sheets into my web sites.

I love the list of links...



7:00 pm on Mar 7, 2001 (gmt 0)

10+ Year Member

good post Brett. Thanks


8:31 pm on Mar 7, 2001 (gmt 0)

10+ Year Member

One comment about speed: you don't have to put your CSS in external files. You can put a copy in each file and still gain significant speed boosts due to smaller file sizes than what you'd get with HTML only.


8:56 pm on Mar 7, 2001 (gmt 0)

>>you don't have to put your CSS in external files

Wouldn't this kill the administration factor (Not having to open multiple files to make a change?)?.



9:02 pm on Mar 7, 2001 (gmt 0)

10+ Year Member

>>Wouldn't this kill the administration factor (Not having to open multiple files to make a change?)?.

Sure would. But if you have a small site or one that maybe doesn't need much style updating, this might be a way to speed up the page load for visitors. True, it may not be for everyone.


9:10 pm on Mar 7, 2001 (gmt 0)

Excelent call Scott. I had not thought of that.



12:36 am on Mar 8, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

CSS helps separate the visual elements from the logical markup. Ideally (but not always in practice) tables aren't even needed for layout, and they can retire to their intended job of presenting data in columns and rows.

I love the clean look of a page when the visual aspects of the code are elsewhere. The logic of the markup jumps out at a glance, and editing is so much easier. It'll be even more useful as browser support continues to improve.


1:11 pm on Mar 8, 2001 (gmt 0)

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

The problem with embedded style is degrading gracefully. If you put in a pretty good set of declarations right in the html, and then us font tags and tables to adjust the layout for non-css browsers, then you've just balloned the size anyway. If you are going to degrade with ease, then the size of the code must increase to use CSS declarations.


11:36 pm on Mar 8, 2001 (gmt 0)

10+ Year Member

Not really. If you duplicate the same appearance for non-CSS browsers, that'd be not degrading at all. Degrading gracefully can be done with very little markup.

I find the default appearance adequate for the few who still use non-CSS browsers, so I'm not currently using any FONT elements on any of my sites. I ditched nearly all presentational markup when the non-CSS users dipped below 1% of graphical users.


Featured Threads

Hot Threads This Week

Hot Threads This Month