Forum Moderators: not2easy
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
}
--]
[/STYLE]
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:
[HEAD]
[LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"]
[/HEAD]
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]
I love the list of links...
-G
Wouldn't this kill the administration factor (Not having to open multiple files to make a change?)?.
Brian
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.
Brian
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.
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.
