Slashdot Mirror
CSS From the Ground Up
jsin writes "Web Page Design for Designers is a great source for anyone who is looking for a non-programmer-centric view on web page design and development. Starting in his most recent issue, Joe Gillespie describes CSS from an absolute beginners perspective. Even though I've been building commercial sites for years, the article is an excellent way to review the basics in the context of endless changes in standards and practices."
That CSS is wonderful when you want to use your own custom one to override page design.
The one I use blocks out most ads, and red strikes any link that contains goatse.
But I've noticed that Mozilla and FireFox don't let you set a custom CSS, which I find disappointing.
I'm a Java developer with no artistic talent whatsoever. I tried to draw something once....the result caused dizziness, blindness, and violent nausea in all who saw it. It was eventually banned by the FDA and shot into space. Whenever I'm forced to make choices about color, font, and layout in web pages I inevitably choose a combination that looks like an elephant came along and crapped on a computer screen.
What sources are out there for people like me? Technical people who need a little help making artistic choices. I'm not expecting a website to turn me into Rembrant or anything, but just a few simple rules and some examples that demonstrate those rules would go a long way.
His bar graphs don't display properly in Mozilla -- what browser do his pages actually display properly in? He appears fairly IE-centric.
"Freedom means freedom for everybody" -- Dick Cheney
For an example of how powerful CSS can be when used correctly, check out CSS Zen Garden.
At http://www.alistapart.com/ you can find more detailed, praxis-oriented tutorials/examples using CSS and XHTML if you like this way of doing sites. It's especially interesting, because they have quite a lot of things about pure CSS layouts without tables.
Budding webbdesigners, take warning from that page: Dark grey on a pale grey background is _not_ easy on the eyes, and should be avoided, no matter how 'artistical' you think it might be.
If my eyes hurt from looking at your webpage, you're doing something wrong...
"Total destruction the only solution" - Bob Marley
Designers and web don't always mix well. I once got called "a vandal" by a web designer who has just heard about possibility of using your own stylesheets in Mozilla. Apparently, doing so would be defacing his artistic work and he wanted such features banned.
:)
Explaining how that feature worked didn't help a bit. For some reason he was sure random visitors would be setting their styles to green text on purple background with large blinking headlines & then post screenshots all over the net - just to mock his "masterpieces".
Well, at least I learned one thing from that event: don't argue with retards over the internet.
There's literally millions of web sites out there. Find one with a colour scheme you like, view the source, and copy the colours!
The above post qualifies to be moderated as interesting but uesless.
I went to the "color scheme generator" and gave it the equivalent HSB values for what I'm currently using on my website background.
That color *is* (both when I look at it, and when I punch the numbers into Adobe Photoshop) clearly a dark shade of blue.
In the "color scheme generator" it *clearly* shows as a dark shade of green.
Said "color scheme generator" is worse than useless, because it is DEAD SET WRONG.
You Have Been Warned.
Visit CryptoGnome in his home.
One site that I've found useful as an introduction is Mulder's Stylesheets Tutorial. It's presented quite well, and covers enough to give you a good idea of what can be done easily with CSS.
I'd go on more about it, but if you're looking for a good tutorial, you'll probably try every link you see in this story's comments. If you're not looking for a tutorial, there's no point in me wasting my time describing it.
That and it's time to poop. Bye!
Somebody get that guy an ambulance!
Glad to see the author closed his paragraphs with </p> for a change, but...
The one other important tag is the line break <br>.
Why not make it <br /> and make it somewhat XHTML compliant while you're at it? Same applies to the <img /> tag, and others.
I've been following WPDFD for years, and have used at least the last five versions of Moz on Windoze. I haven't read this month's editorial with Moz -- I'm using IE at work -- but I've never seen such a problem before, and Joe's always been pretty careful about standards compliance, cross-browser support, etc.
He does try new things occasionally, so if there's a glitch this month, mail him and tell him and he'll almost certainly look into it; I've contacted him a couple of times and always had at least a "Thanks for the feedback, I'll look into it" type of reply. I certainly wouldn't accuse him of being IE-centric, though; quite the contrary, in fact.
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
OK, since the standard CSS Zen Garden link has come up, I'll post the standard caveats: the content for that site is marked up much more than any "typical" web site, in order to provide maximum flexibility for the stylesheet designers; also, a lot of the really nice effects are actually based on images and not CSS. It's a great demonstration of what the technology can do. It's a lousy demonstration of what the technology can do in the real world.
Now go look at the site, keep it in perspective, and be impressed. :-)
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
I think we need a new meta-mod option for that (+1, Informative) moderation:
This post was:
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.