Welcome to the MacNN Forums.

juanvaldes · Jun 6, 2002, 03:50 AM

Well its' taken 6 years but now that schools over and I have som free time I am making my own page. Nothing fancy, just pics of our <a href="http://forums.macnn.com/cgi-bin/ultimatebb.cgi?ubb=get_topic;f=45;t=005912" target="_blank">apartment</a> and a place for me to put up programs and probably a log for the folks to checkout and whatever strikes my fancy.

So, I have been brushing up on the basic HTML I know and got my Perl book back out for cgi and I have been looking over this forum for topics with some keywords and I have repeatedly come across people saying how important CSS is. But what the hell is it?!?!

wulf · Jun 6, 2002, 06:40 AM

CSS stands for Cascading Style Sheets, there's a good guide <a href="http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/" target="_blank">here</a> and the official W3C specification is <a href="http://www.w3.org/TR/REC-CSS1" target="_blank">here</a> (well that's just CSS1, but should keep you going for now <img border="0" title="" alt="[Wink]" src="wink.gif" /> )

Basically it's a neat way of defining common style elements for your pages, so you don't need to do FONT FACE=x SIZE=x COLOR=x etc., every time you put some words on a page. You can set different styles for different tags (and classes) so for instance all text in a P tag could be in 10pt. Garamond, all text in an H1 tag could be 12 pt. Futura Bold, etc.

You can also control other things like spacing...

Takes a bit of fiddling, but it is possible to use style sheets to ensure that all your content looks the same on different browsers (so long as they support CSS). Also you can put your style sheets in a separate file and reference them from all pages in your site. Once the rules are set, they can be left alone, but if you want to change, say, your body text style, you only have to change the style sheet page and all the other pages on your site will reflect it... very handy

hth,
wulf

[ 06-06-2002, 06:43 AM: Message edited by: wulf ]

juanvaldes · Jun 6, 2002, 06:47 AM

cool thanks! <img border="0" title="" alt="[Wink]" src="wink.gif" />

neoTony · Jun 6, 2002, 07:08 AM

CSS is where the web is headed: It's about separation of the content and structure (ie. Headings, paragraphs, etc are just categorisation structures within your document) from the presentation (ie. I want my headings to be 48pt Verdana).

Follow the links provided above, but my favorite resource is the New York Public Library Style Guide. There's also a fantastic XHTML primer there that you should take a look at - it's a fairly basic step from HTML to XHTML.

<a href="http://www.nypl.org/styleguide/" target="_blank">http://www.nypl.org/styleguide/</a>

If you'd like help, feel free to email me: [email protected].

ism · Jun 6, 2002, 07:46 AM

Luckily there are loads of resources, as shown by the above posts.

I would suggest getting a CSS editor. It makes it much easier to implement CSS than by coding by hand and also allows you to make changes more quickly. Check out Stylemaster from <a href="http://www.westciv.com" target="_blank">westciv</a>. I purchased this even though all I do is a bit of web design in my spare time. It's pretty good, however not osx yet. Alternatively check out Cascade from <a href="http://interaction.in-progress.com/cascade/" target="_blank">interaction in progress</a> . There is a free light version.

Or for completely free get the <a href="http://cascades.mozdev.org" target="_blank">CaScadeS</a> add on to the composer in Mozilla

For CSS recources, I recommend the <a href="http://www.westciv.com/style_master/house/index.html" target="_blank">free courses</a>, etc at westciv. Also check the links page.

Also, websites such as <a href="http://www.alistapart.com" target="_blank">A list Apart</a> have really good resources, such as <a href="http://www.alistapart.com/stories/fear/index.html" target="_blank">Fear of style sheets</a>

A good mailing list for CSS beginners and experts can be found at <a href="http://two.pairlist.net/mailman/listinfo/css-discuss" target="_blank">css-discuss</a>, but expect a lot of messages.

CSS can be a bit overwhelming at first so it is easiest to try out a few tutorials at first.

If you are going for CSS I recommend that you also try to code in XHTML as well, which really isn't any harder than HTML, just a bit stricter.

Have fun, CSS rocks!

MojoRising022 · Jun 6, 2002, 02:43 PM

Just a word of caution....no browser is completely standards compliant and no 2 browsers will render CSS the same way. If you intend to make extensive use of CSS, make sure you test your pages in every possible environment. Odds are that a CSS-intensive page will produce unexpected results in one or more browser. I have had problems, in particular, with CSS-P (CSS Positioning) in pages under Omniweb(which 1/2 of OS X users have as their primary browser - per the survey in another forum) and iCab.

macvillage.net · Jun 6, 2002, 07:21 PM

A word of advice: Avoid a lot of CSS for now. It's great for some formatting, but don't do a complete layout in it. You will create a page that is viewable in one browser on one platform. CSS support is just to new right now.

juanvaldes · Jun 6, 2002, 07:39 PM

yeah, I use OW and do plan on making sure everything looks good in the end on all sorts of different platforms and browsers. Actually I am not even sure how much I will use as even a basic page as this:

okay, well I was going to put in the code but even if I quote it but NN will not let me post it.

Took FOREVER for OW to render and that IS my browser and if performance is like this for me I doubt it will stick around long. All I was really planning on doing was the whole 'one change and make all text on page/site be consistent'.

Thanks to all for the great links and advice.

KaptainKaya · Jun 8, 2002, 01:23 AM

Cannibus Smoke Special?

godzookie2k · Jun 8, 2002, 11:12 AM

No *USE* CSS for everything, it'll look fine in any mozilla browser, and any IE browser. (recent ones) it'll even work in opera iirc. in fact, the only browser it *won't* work correctly in is Omniweb. This is because its a crap browser. If you are going to trust a random poll on a message board as hard data regarding *anything* you are out of your mind. OSX only makes up about 5% of mac users, who only make up 5% of computer users, even if half (not very likely) of those X users use omnicrap, you are really talking about an insignificant percentage. Not using a great technology like CSS because like 20k people in the world who are retarded enough to run a *bad browser* which doesn't support it is just a bad idea. Even NS4 has *some* css support. Omniweb has to spoof its identity to websites because not a single web developer I know even considers it viable.

macvillage.net · Jun 8, 2002, 11:50 AM

<blockquote>quote:<hr />Originally posted by godzookie2k:
No *USE* CSS for everything, it'll look fine in any mozilla browser, and any IE browser. (recent ones) it'll even work in opera iirc. in fact, the only browser it *won't* work correctly in is Omniweb. This is because its a crap browser. If you are going to trust a random poll on a message board as hard data regarding *anything* you are out of your mind. OSX only makes up about 5% of mac users, who only make up 5% of computer users, even if half (not very likely) of those X users use omnicrap, you are really talking about an insignificant percentage. Not using a great technology like CSS because like 20k people in the world who are retarded enough to run a *bad browser* which doesn't support it is just a bad idea. Even NS4 has *some* css support. Omniweb has to spoof its identity to websites because not a single web developer I know even considers it viable.<hr /></blockquote>Each browser renders CSS differently. There is currently no true way to ensure that a page appears the same way in each browser. Use of CSS for some small tasks is great, but you will never be able to cover all of your bases with CSS until MS updates CSS support for Windows and Mac (which it is doing) to become more compliant and Mozilla like. OmniWeb I heard is also looking towards better CSS support. That is when it will be the right time. The days of table based layouts are not over, at least those who have sites that are viewed by more than one browser. A respectible webmaster makes a site viewable in as many browsers as possible. Personally I only ignore iCab, since it just plain stinks. OmniWeb, IE, Netscape 4.x, Mozilla, and Opera are all taken into consideration, IE and Mozilla are of course a higher priority over Opera.

Judge_Fire · Jun 8, 2002, 05:50 PM

If you want to get into tweaking things, you can create different CSS files for different browsers, then use a small JavaScript to recognize the browser and select the appropriate file.

In case JavaScript isn't enabled at the clients end or detection fails, you should have a fallback to one of the files.

This is a bit tricky and adds a bit work, but can be done with a little testing.

J

juanvaldes · Jun 8, 2002, 09:56 PM

<blockquote>quote:<hr />Originally posted by godzookie2k:
No *USE* CSS for everything, it'll look fine in any mozilla browser, and any IE browser. (recent ones) it'll even work in opera iirc. in fact, the only browser it *won't* work correctly in is Omniweb. This is because its a crap browser. If you are going to trust a random poll on a message board as hard data regarding *anything* you are out of your mind. OSX only makes up about 5% of mac users, who only make up 5% of computer users, even if half (not very likely) of those X users use omnicrap, you are really talking about an insignificant percentage. Not using a great technology like CSS because like 20k people in the world who are retarded enough to run a *bad browser* which doesn't support it is just a bad idea. Even NS4 has *some* css support. Omniweb has to spoof its identity to websites because not a single web developer I know even considers it viable.<hr /></blockquote>no.

My site, my browser.

I chose to do what I want. this is not Yahoo or even Macnn for crying out loud. I am just making a stupid little web page for myself. The site is so small I can *EASILY* get away without using ANY CSS, i just wanted to know what the **** it was. And since *I* chose to use OW (since it works just fine for every site *I* visit) *I* will make sure OW works *THE BEST* with my site. I couldn't give two flying ****s about IE, and especially less about windows users.

This is a small page for me and the only people who will even know of it's existence are going to be mac users. Not that I was basing this on that poll it does bring up exactly *WHY* I better make sure OW works just as fine as any other if not best.

godzookie2k · Jun 9, 2002, 01:37 AM

<blockquote>quote:<hr />Originally posted by juanvaldes:
<snip>

*I* will make sure OW works *THE BEST* with my site. I couldn't give two flying ****s about IE, and especially less about windows users.
<snip><hr /></blockquote>Well, there is a great sign of a great web developer right there. (not)

nick

[ 06-09-2002, 01:39 AM: Message edited by: godzookie2k ]

neoTony · Jun 9, 2002, 07:21 AM

godzookie: I think you're being a bit harsh - juan has already stated he isn't a web developer. However, you're on the right track with pure CSS - it's certainly one of the only ways to an XHTML page through validation - and if used correctly, pages can look disturbingly similar between browsers. I think people need to understand that the only way they will get their pages (and still be syntactically correct and valid HTML) to look identical between browsers is to save the entire page as an image and post that - which is stupid.

CSS is your friend - use it whereever possible, and start looking at XML/XSLT - the future is coming, and you might as well jump on the bandwagon and start letting go of all the hacks you use to hold your pages together (don't deny it! we all use shims and hacks to make our pages look good).

My opinion of good web design is something that works in all browsers (that doesn't mean lays out identically), but presents the content to the users, not the design. Web design is becoming more about human interface interaction than pretty pictures, and the sooner web designers start realising this, the easier their jobs will become - you can't just be a designer or a code monkey if you're planning on being a web designer - you'll need elements of both. I'm pretty interested in starting up/finding a forum similar to macnn.com for web design/UI discussion, but how many people would be interested in something like this? (If it already exists - please let me know!)

juanvaldes · Jun 9, 2002, 06:36 PM

<blockquote>quote:<hr />Originally posted by godzookie2k:
 <blockquote>quote:<hr />Originally posted by juanvaldes:
<snip>

*I* will make sure OW works *THE BEST* with my site. I couldn't give two flying ****s about IE, and especially less about windows users.
<snip><hr /></blockquote>Well, there is a great sign of a great web developer right there. (not)

nick<hr /></blockquote>Like I said, I am not a web designer. Just a small stupid little site and I do not feel that such a small site really needs a whole lot of CSS. This does not mean that I will not use it, just that I will only sue so much that the site comes out fine with my browser and as many others as possible. I doubt it will be harder on browsers when I don't use tons of fancy stuff. This will also make it easier for me to do (less complex), when I feel I am on solid ground I will reevaluate the site and will probably overhaul it with CSS and other things.

thank you all for answering my question, I just wanted to know what CSS is.

Wevah · Jun 10, 2002, 11:18 PM

Someone mentioned ALA...just for the record, that entire site is renderd using CSS for styling and layout.

Griggsy · Jun 11, 2002, 05:04 AM

<blockquote>quote:<hr />Originally posted by juanvaldes:
 I doubt it will be harder on browsers when I don't use tons of fancy stuff. This will also make it easier for me to do (less complex), when I feel I am on solid ground I will reevaluate the site and will probably overhaul it with CSS and other things.

thank you all for answering my question, I just wanted to know what CSS is.<hr /></blockquote>Sorry mate, but that's the wrong attitiude, why learn to drive a car backwards for 100 yards when else everyone goes forward for 100,000 miles. Save yourself major grief and learn from the ground up the correct way to build a website. Now that Mozilla is in full version, there is now no excuse! I use to have OW as my prime browser but have switched to the dinosaur for ease of use and compliancy checking. The only reason there would seem to me to use a non compliant browser such as OW (I'm just waiting for the flames) is the anti-aliasing and for that get <a href="http://www.versiontracker.com/moreinfo.fcgi?id=15012&db=macosx" target="_blank">silk</a>

[ 06-11-2002, 05:06 AM: Message edited by: Griggsy ]

Raman · Jun 11, 2002, 03:53 PM

<blockquote>quote:<hr />Originally posted by juanvaldes:
Well its' taken 6 years but now that schools over and I have som free time I am making my own page. Nothing fancy, just pics of our <a href="http://forums.macnn.com/cgi-bin/ultimatebb.cgi?ubb=get_topic;f=45;t=005912" target="_blank">apartment</a> and a place for me to put up programs and probably a log for the folks to checkout and whatever strikes my fancy.

So, I have been brushing up on the basic HTML I know and got my Perl book back out for cgi and I have been looking over this forum for topics with some keywords and I have repeatedly come across people saying how important CSS is. But what the hell is it?!?!

<img border="0" alt="[Skeptical]" title="" src="graemlins/bugeye.gif" /> <hr /></blockquote>Now why not type "CSS" and maybe something like "web design" in google instead of thinking out loud?

mrl14 · Jun 11, 2002, 05:40 PM

You people kill me. It's funny how all of you are fighting over using proper coding, new technologies, etc.

I'm a web designer. I run my own company. I have this client that I'm designing a simple page for. I emailed them and said

"Would you like me to setup an email account for you so that you can put that address on your new business cards along with your domain"

Do you know what they told me?

"Why do I need an email address on my business card?"

That alone tells me that I don't need to know anything more than HTML 1.0 to get a job (freelancing). The public is stupid...so why should have to be so much smarter than them? They don't even know what a domain name is.

When a client actually asks me if I will be using CSS on their site then I'll consider putting it on their web pages. For now, as long as they're happy, i'm happy. I'm still surprised they can run a business....but such is life!

Enjoy, and don't work too hard on your site...

hyperizer · Jun 13, 2002, 12:30 PM

<blockquote>quote:<hr />Originally posted by mrl14:
You people kill me. It's funny how all of you are fighting over using proper coding, new technologies, etc.

I'm a web designer.<hr /></blockquote>If you've been developing Web sites for any length of time, you'll know there's always a debate between designers and usability experts. Often the former eschew cutting edge technologies, while the latter emphasize backwards-compatibility. Any site you build is a trade-off between these two extremes.

No site will look the same on all browsers, platforms, and computers. If someone's viewing your site in Netscape 3 on a 640 x 480 resolution monitor displaying 256 colors, it'll look different than a designer using some ridiculous resolution, millions of colors, and the latest browser. Thankfully, CSS lets sites degrade gracefully for those using browsers that don't support it. CSS has been out 6 years now--it's not a new technology by any means.

<blockquote>quote:<hr />Originally posted by mrl14:

When a client actually asks me if I will be using CSS on their site then I'll consider putting it on their web pages.<hr /></blockquote>One big advantage to using CSS--it's less work for you. Lets say your client decides they want to change the background color and font size on all their pages. With CSS, instead of changing body and font tags by hand on dozens or even hundreds of pages, you just change one stylesheet.

Lots of old HTML tags have been deprecated. If you want to make sure the sites you build continue to be viewable for years to come, and can make the transition to new technologies, like cell phone Web browsers, etc., you should research the W3C's standards.

More reading material for you: <a href="http://www.webstandards.org/learn/faq/" target="_blank">WaSP: Learn: FAQ</a>

Millennium · Jun 13, 2002, 01:06 PM

<blockquote>quote:<hr />Originally posted by mrl14:
The public is stupid...so why should have to be so much smarter than them? They don't even know what a domain name is.<hr /></blockquote>Because if the public is stupid, and you aren't smarter than them, then everyone is stupid, and no progress will ever be made. Surely this is a bad thing, is it not?

The real question you should be asking is "The public is stupid, but why should I have to be as stupid as they are?"

ism · Jun 13, 2002, 06:42 PM

Juan,

If you are still reading this, it should be added that writting valid XHTML and CSS really isn't hard. You can construct the document in appleworks say, export as HTML (I think it does it to HTML3.2 or something garbage), but by the wonders of modern technology you can use <a href="http://www.geocities.com/terry_teague/tidy.html" target="_blank">HTML Tidy</a> (I use it as a plugin to BBEdit Lite, so totally free) and hey presto it sorts it all out for you. There you have it valid XHTML and CSS.

I know it is only for your self, but it is worth doing it right, otherwise you will have a load of files around that are unusuable, admittedly not tomorrow or even next year, but plan for the future. Saves having to do the work then

godzookie2k · Jun 13, 2002, 08:42 PM

My god you think so lowly of your clients. Its no wonder designers have earned that "condescending little ****s" reputation. Don't be like every yo boy on the street and mistake ignorance for stupidity. Just because someone doesn't recognize the importance of email, like you have so obviously been "enlightened" to, doesn't mean they are stupid. They just _don't know_. And lastly, just because your clients will settle for mediocrity, doesn't mean that you should. After all, it is *your portfolio*.

godzookie2k · Jun 13, 2002, 08:45 PM

Oh and one more thing, you don't give the "public" enough credit. And at what point did becoming a "designer" put you above being part of the "public"?

godzookie2k · Jun 13, 2002, 08:52 PM

yep, its triple post day, as I notice new stuff around. Quoted off of Zeldman. it reminds me of someone in this thread.

--------
In today�s Meyerweb, CSS expert and Netscape standards evangelist Eric Meyer responds to the anonymous developer comment that ends the Wired News article on the WaSP relaunch.
To the developer�s question, �Do you know how much I get paid� for knowing how to code the same web page seventeen different (and incompatible) ways, Eric responds:
�Yep. And can you imagine how much more you�d be paid if you knew how to code to standards, thus delivering a superior product with outstanding delivery capabilities? Not to mention what kind of reputation you�d build up for doing so, and how much more you could charge then?� (More at Meyerweb.)
------------

The Godfather · Jun 14, 2002, 10:10 PM

Take a look at my website. It is CSS meat and potatoes

It uses a little of javascript to automatically insert the same header and footer in all pages. I will study CGI to make this in the server (instead of the client with JS) because when JS is disabled, it looks like crap.

<a href="http://barney.gonzaga.edu/~rguerra/" target="_blank">http://barney.gonzaga.edu/~rguerra/</a>

Chuckit · Jun 16, 2002, 01:57 AM

<blockquote>quote:<hr />Originally posted by The Godfather:
Take a look at my website. It is CSS meat and potatoes

It uses a little of javascript to automatically insert the same header and footer in all pages. I will study CGI to make this in the server (instead of the client with JS) because when JS is disabled, it looks like crap.

<a href="http://barney.gonzaga.edu/~rguerra/" target="_blank">http://barney.gonzaga.edu/~rguerra/</a><hr /></blockquote>Doesn't your server allow SSI? That's the sort of thing it was designed for.

The Godfather · Jun 16, 2002, 02:19 PM

<blockquote>quote:<hr />Originally posted by Chuckit:
 <blockquote>quote:<hr />Originally posted by The Godfather:
Take a look at my website. It is CSS meat and potatoes

It uses a little of javascript to automatically insert the same header and footer in all pages. I will study CGI to make this in the server (instead of the client with JS) because when JS is disabled, it looks like crap.

<a href="http://barney.gonzaga.edu/~rguerra/" target="_blank">http://barney.gonzaga.edu/~rguerra/</a><hr /></blockquote>Doesn't your server allow SSI? That's the sort of thing it was designed for.<hr /></blockquote>SSI is exactly what I needed. Thanks!

macvillage.net · Jun 16, 2002, 07:58 PM

I am definately a usability guy. I believe a site should work across the board as long as the browser is somewhat compliant (only browser I don't care too much about is iCab).

Most of the time, a page is compatibile because the designer is lazy. I see to many good sites to believe that Netscape doesn't support most of what is used.

Possibly because I work on a portal, and several other sites that need 100% compatibility,

A good design in my opinion is: MacNN (pretty dang compatible), Yahoo! (simple, everyone knows where stuff is and how to find it, fast loading), Excite (face it, the design is good), Netscape (pretty compatible, fast loading, just a stupid popup)

Those are well designed sites. To many designers are just graphic artists and know little to nothing about standards. Entire Flash sites are *bad* for busnesses... require lots of RAM to load, slow for 56k users, not indexed by search engines, you have to load the entire site to see the home page... bad. Flash used for an animation on the home page and a few other pages is a very good technique. Having a Flash and HTML site makes it even better.

Graphic Artists should stick to what they are good at, rather than just cloud the industry with trash that doesn't work. If each of them partnered with someone who could code, the web would be full of gems.

Judge_Fire · Jun 18, 2002, 05:38 PM

<blockquote>quote:<hr />Originally posted by macvillage.net:
 If each of them partnered with someone who could code, the web would be full of gems.<hr /></blockquote>I'd add that designing the interaction is it's own trade, so having someone focused on that is always good. Interaction design can be described as taking into account, for example the bare bones:

'How should something work to achieve the wanted goals?'
'Does this thing work? Test it, if it doesn't, fix it?'

There are a lot of Bilities. Usability, legibility, readability, marketability. The list goes on.

The designers can not automagically assume that they know best and what they've done amongst themselves will work.

Or they can, but then they haven't seen the light of user testing, or prototyping. It's very educating to see your design fail in real life conditions. It's good humility to recognize it's not the users who are stupid, but it's your design that needs work.

A person thinking about the interaction, then getting feedback on it, then repeating the cycle as needed is good to have. It's not graphic design, it's not dramatic/audiovisual design, it's not systems design or coding. It's fun <img border="0" title="" alt="[Wink]" src="wink.gif" />

J

Griggsy · Jun 21, 2002, 01:29 PM

<blockquote>quote:<hr />Originally posted by Judge_Fire:
If you want to get into tweaking things, you can create different CSS files for different browsers, then use a small JavaScript to recognize the browser and select the appropriate file.

In case JavaScript isn't enabled at the clients end or detection fails, you should have a fallback to one of the files.

This is a bit tricky and adds a bit work, but can be done with a little testing.

J<hr /></blockquote>Got any resources for this???

Judge_Fire · Jun 21, 2002, 04:27 PM

<blockquote>quote:<hr />Originally posted by Griggsy:
Got any resources for this???<hr /></blockquote>First, my JavaScript sucks. But here's an example piece, which I put together for a small site to take care of Netscape 4.xx's problem with rendering certain font definitions too small to read.

If it's Netscape and earlier than 5, then it picks the first CSS, else, the other.

If you know JS, please feel free to clean up the code. Please note the slashes at the ends of unclosed tags are there to meet with xhtml standards.

Also, at the bottom, there's a reference to a stylesheet defining fonts and alignments for when the user prints the page out - that's always a nice touch, a good looking print version.

<blockquote>code:<hr /><pre style="font-size:x-small; font-family: monospace;"><script language="JavaScript">
<!--
if ((navigator.appName == "Netscape&quot

&& (parseInt(navigator.appVersion) < 5 )) {
document.write("<link rel=stylesheet href=\"css/house_style_NS4.css\" type=\"text/css\" media=\"screen\" />&quot

; }
else {
document.write("<link rel=stylesheet href=\"css/house_style.css\" type=\"text/css\" media=\"screen\" />&quot

; }
// -->
</script>

<link rel="stylesheet" href="css/print_style.css" media="print" /></pre><hr /></blockquote>J

[ 06-21-2002, 04:31 PM: Message edited by: Judge_Fire ]