Beginning in CSS is a little something I put together for a web design newsletter. There are some tips inside of it (in the large table) for beginners, intermediate users, and an advanced tip. Some stuff that I haven't shared here yet! But since I was *hired* as a scripty-goddess because of my css knowledge and not my good looks 
makes sense to share this article!!!
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
1 | kristine
Thanks Christine and Gaile 
I'm really glad you got something out of the article – I was really honored to be able to write for this newsletter, and about something I love so much?!
Lynda, apology accepted. I think sometimes just agreeing to disagree will make for more fun over here!
2 | Gaile
Out of curiousity (after reading all the comments) I ran the page in question thru the W3C CSS Validator and it does validate. Ironically the HTML doesn't (no document type declaration).
It is impossible to please everyone, but I think Kristine's article was very nicely written and will help anyone new to CSS or possibly those who are hesitant to give it a try. This type of tutorial-like article is not the easiest thing to write, but Kristine has done a good job of writing something that is clearly laid out and easily understood.
Congratulations, Kristine!
3 | Lynda
I think Kristine did a great job on it. God only knows I suck at writing tutorials.
I was just feeling ultra argumentative the other day – hey kristine, I apologize for that.
I don't know where I came up with only a and a:hover being valid. I know I've come across it before, but God only knows where or why.
This ALL being said – I make sure my html is valid but only go through my CSS once in a blue moon to make sure it's valid. I have run into cases where invalid CSS does pretty darn freaky things.
So – I'm eating my words (won't be the first time. hehe)
4 | Christine
Kristine-y! Thank you for sharing that! It helped me out from getting a perspective on tag order – I'm still *very* CSS clueless. It took me a weekend and a migraine to skin my site and get the CSS in there, and even now my head starts to throb when I think about doing things like that nav!
7 | sasha
this would be more efficient:
.nav { background-color:black; color:white; padding: 10px; border: solid 1px white; text-align:center;}
.nav a, a:link { color:#FF9999; border:none;}
.nav a:visited { color : #990000;}
.nav a:hover, a:active { background-color: #990000; color: black;}
and then your html looks like this:
<div class="nav">
<a href="twinkle.html">twinkle </a>
<a href="star.html">star </a>
<a href="moon.html">moon </a>
</div>
in opera 6, your css doesn't display properly because the links are getting the nav class applied twice to them, giving them an extra 10px padding. this causes your black/red bg from the links to overlap the white border along the bottom. the css I wrote does not do this.
8 | kristine
Although I don't have opera 6 to test this, the effect I was going for doesn't work with the alternate coding that you showed, Sasha – only the words change color, not the whole bar behind it. Which is probably why I've always done it with the class in both places.
It would sure be nice if all browsers rended the same way! I'm seeing what I was wanting to see in both IE 6 and N6, as well as Opera 5.
9 | sasha
never mind the fact that Opera 6 is one of the most standards complaint browser…
if you use this class, it gets rid of the overlapping black at the bottom on the links:
.nav a, a:link { color:#FF9999; border:none; padding: 10px }
it still leaves the bg color overlapping.
10 | kristine
Not to be argumentative, but I thought I'd try one more time to explain myself….
Once everyone who is designing uses Opera 6 as their testing browser, it would make sense to change the coding in my tutorial to match it. Since IE 6, Netscape 6, and Opera 5 together make up almost the entire browser share (for me personally its 99%), and this code works there, I still abide by the code because it works in most browsers. Sorry, next time I'll put a disclaimer.
11 | Lynda
I hadn't really looked at the tutorial much before (heh) but, um…
well, we all know how I feel about standards compliance. And I don't really feel that workarounds are ever good and especially bad coding practices aren't good either.
I'd think a true designer would be in a constant struggle between getting something to function right on the majority of browsers (which may include a SLEW of bad code) and becoming standards compliant so maybe one day they no longer have to think about workarounds
It seems to me, when TEACHING others to code, it would be as standards compliant and correct as possible.
Unless you're like me, someone who doesn't know what she's doing with PHP trying to spit off code to something. hehe.
I always tend to code for the latest versions of IE, Netscape (thank God for v.6!) and Opera. One can't possibly code for all versions of everything, so it's best to code for the most recent.
I don't mean AT ALL to come off snotty. I'm tired and I might be coming off as cranky.
I think my point is just that – with SO MANY freaking browsers out there, it's impossible to please everyone and EACH designer has to set his/her own priorities.
12 | kristine
But, I don't think I am being uncompliant. I'm nesting some navigation elements inside of a div. And then giving them a class that's different from that of the rest of the page.
13 | Lynda
Kristine,
I'm not positive adding the classes to nav is uncompliant, I don't think it is, but I know it's not a good practice, especially when they're already technically under the nav tag.
In the latest version of CSS at least, the only a tags that are supported are "a" and "a:hover" and trying to apply properties to anything else will not validate.
I'm just curious, have you ever tried running your css through a validator? The purpose of validators are not to thwart your efforts, but to make it so your site IS viewable to the most amount of people with compliant (or semi-compliant) browsers.
scriptygoddess
