homepage Welcome to WebmasterWorld Guest from 54.237.77.181
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS Overview: the big picture
Brett_Tabke




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

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
}
--]
[/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]

CSS Resources for futher study


 

grnidone




msg:1183877
 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...

-G

ihelpyou




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

good post Brett. Thanks

gmiller




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

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.

GWJ




msg:1183880
 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?)?.

Brian

scott




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

>>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.

GWJ




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

Excelent call Scott. I had not thought of that.

Brian

tedster




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

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.

Brett_Tabke




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

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.

gmiller




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved