101 CSS/XHTML: Your P's & Q's
By ezra vancilLike them or not, terms are very important, but truthfully you don't have to know any of them to make up a mess of code. I actually didn't know one term of HTML or CSS until about 1 year in and a few national awards richer. I finally admitted my ignorance when I got embarrassed at a awards ceremony when I couldn't even enter in a conversation about my own site! So... I figured, I better learn some P's and Q's. And, you will too if you ever want to communicate with another developer coherently, or to know what the hell I'm talking about... because, though I do use "tags" when I'm talking to my dog and children (My quality assurance managers), I will use the actual terms with you, because I don't want you to bare the shame of calling a selector a property in the wrong crowd.
Here is a visual layout of all the most common terms, or at least, most of the ones you'll need to follow in our podcast, until we get into parent child selectors, nth selectors etc.. but we'll make sure your up to speed.


101 Fundamentals: Selectors
By ezra vancilI've had allot of questions from other Socialgo'ers that smelled strangely of my early days and I want to scream stop! go back to go and collect $200. I decided to create a ground zero fundamentals series, and I hope it's helpful to those brand new to code, and those looking to sturdy their foundation.
A huge mistake I made, and still constantly make, is the lust for instant gratification at the expense of knowing what I'm consuming. Translated to XHTML and CSS this seemingly ambitious drive to get to the good stuff, causes what I call Rat's nest Code. Hey, but it does the trick right? Maybe, kinda like duck tape does the trick.
The problem with racing down the road with out knowing what all the road signs mean is you'll eventually collide head first with a pedestrian, and that pedestrian is usually one of your pissed off users, a client or a boss. How this happened to me, countless times, is I got the site going, looking good -- by the skin of my teeth. Then 4 months later, after I had done twenty more sites, tragedy struck. Something goes wrong, someone sneezed on your CSS or something and you got to go rescue the site. Well I would open up those four month old sites and nearly collapse. I didn't remember what I did, or how I did it. I had ripped most of the code from other sites and the rest ducked taped together with 20 different tutorials from 20 different versions of how to code. I can't tell you how many cuss words I learned back then, some of them would make the 18+ sights blush.
For you as a socialgo network owner,it probably will mean loss of members, loss of profits, loss of confidence.I've only been at socialgo for a short time, and I have already broken my sites, in a big way, accidentally. ( Usually because if you have several networks, whenever you go to admin it still pops back to your first network on the list. well, I'd go in the wrong network and start deleting stuff and so on..)
The malfunction, for me at least, was simply that I didn't know what the hell I was doing and didn't want to admit it. I'd learned how to steel code and make it work, but I never learned how to write code and understand how it was supposed to work together.
I finally forced myself to re-read all those books on my shelf and pay attention to the 90% I skipped over.
(By the way, after my little sermon, my code is still ratty... I'm working on it)
This is the real beginning fundamentals, so if you know all this please skip to the next blog.
SIMPLE SELECTOR
A HTML page is made up of ELEMENTS and ELEMENTS are different structures like buildings.
Here is a
ELEMENT:
I talk to my dog because Farty the cat has bad breath
With a CSS SELECTOR, I can grab hold of a TAG by it's NAME Like this:
p {}
Thats it!
'sp is name. This is a
SIMPLE SELECTOR because it's so damn simple. Now
I can tell this p what to do with CSS.
ID SELECTOR
But, hell there are like two thousand's
in my network, what if I just want to
grab hold of one element that talks about my dog's breath. Just
like I my State ID refers to me in a broad term saying that I am a
MALE- and then in a specific term, that I am EZRA. The element
works the same. I just have to give it the specific name, we'll
call it Hara because that's my dogs name.
#hara {}
That's it! This is a ID SELECTOR.Class SELECTOR
Now, lets say my Network is all about dogs and cats and I want all the Cat Elements to be orange and the dog Elements to be blue. Because dogs and cats are two different CLASSES of animals; I have to give them a CLASS so instead of a specific name ID like
I'll give them a class so I can call all the dogs and cats:
Think of it this way:
= animal
= dog
= my dog
now I'll call the cats with CSS:
.cat {}
Thats it. This is a CLASS SELECTOR.
Wrap it up Now
To close it all up I'll show you what it looks like when I order my dogs and cats to be orange and blue. We'll do this by commanding the selectors with Properties and Values which we will be covering in the next lesson. Here is a peek at how it looks all together:
.cat {
color: orange;
}
.dog {
color: blue;
}
and i'll make my dog pink.
#hara {
color: pink;
}