1. CSS Classes
2. CSS IDs
Why do we use these? Well, to explain that, I am going to have to talk about programming a little. In programming and coding, there are things called functions. The purpose of a function is to have a process that you can refer to over and over without having to make a new function all the time. I'll try to give you an example:
- Code: Select all
function shampoo(person){
person.lather;
person.rinse;
person.repeat;
}
This is a quick function (which is waaaay oversimplified) that talks about the shampooing process. To explain the other things:
- function lets the program know what type of object this thing is.
- shampoo is the name of the function. In other words, to refer to the whole set of instructions, you only need to use the word "shampoo".
- person is called an "argument". It doesn't mean that the function is fighting with you or anyone else. Instead, it's just a word that they use to describe a parameter the function can take in. In other words, it let's the function know who or what is being shampooed.
The other things there aren't as important right now, but I might write a javascript tutorial soon, and if I do, then you'll find out about that weird "this word.that word" thing up there. For now, let's move on.
In the rest of the code, you might want to shampoo funky. If you did, then you could simply say:
- Code: Select all
shampoo (funky);
And Funky's hair would be squeaky clean in seconds.
In CSS, there are things that serve the same purpose that functions do for coding. There are two flavors of that: classes and ids.
"But why two of them?" you ask.
There are a few reasons.
Mainly because you can only have one id of a certain name on a page. All ids in an HTML file have to be unique on that file. You can use the same ID over multiple files, but not in the same file. You can, however, use the same class more than once on the same page without a problem.
"But, um, couldn't they have just made it only classes then?" Well, I guess they could have and I have no idea why they didn't. I can only tell how things are.
Moving on, ids are one of a kind. Classes can be used a bunch. Let me show you how:
IDs are marked in a CSS file with a # and a value name like this:
- Code: Select all
#idname
Classes are marked like this:
- Code: Select all
.classname
IDs and classes can have any name you want them to have. Outside of that, the CSS code looks EXACTLY the same. For example:
- Code: Select all
#randomID{
color:red;
background-color:orange;
}
...will give redtext and an orange background to whatever you apply it to. That's as complex as writing it gets. Congratulations: you've made your first ID reference. What will it look like on your HTML page?
Nothing.
These kind of things have to be called. This is another programming reference. Remember this?:
- Code: Select all
shampoo(funky);
That's one example of a function call. Functions in programs don't do anything unless they are called or, in lay terms, asked to do something to a particular something.
So why do we need this stuff, anyway?
Well, remember the lesson about Inline CSS? For your memory, here's an example of inline CSS:
- Code: Select all
<p style = "color:red; background-color:orange;">This is a paragraph</p>
For the results, refer to this post. In the meantime, let's rewrite that code using the class we made earlier.
- Code: Select all
<p id="randomID">This is a paragraph</p>
Same result, a fraction of the writing.
Because of this, I recommend the frequent use of IDs and classes in whatever kind of CSS code you write a million times over. As a rule, I find that it is best to use IDs for (a)large containers (like <div> tags or even <table> tags) or (b) as markers for major page divisions (like the navigation area or the content area) and to use classes for smaller things that are (a)more subject to change or (b)frequent use (like <p> tags or <a> tags).
Imagine having to uniquely every paragraph that appears on a page and you will see what I am talking about.
While I have this on my brain, I would like to talk to you about a little known tag. It's called <span>. What does <span> do? Well, let's say you wanted a random effect in the middle of a word. Or in a specific group of words. The page is already colored and you don't want to mess up the whole coloring scheme for all the words on the page, just a few. That's where <span> comes in. You stick the <span> tag around whatever you want affected and slap a class or ID on it. It's a local area bomb!
"Well, that's great, but don't we have <p> tags for that?" Yes, but paragraphs come with their own pre-packaged padding and line breaks. Not only that, but you can't nest a paragraph within a paragraph (that's technical jargon for "you can't a paragraph inside of another paragraph") because of those line breaks.
The <span> tag, on the other hand, has no line breaks or padding whatsoever, so it won't mess up the flow of the sentence if you put them in there. Using this, along with classes and IDs can give you an awesome tool for being able to jazz up a few words here and there when you want to highlight a point or idea.
So, what do we learn about next? Maybe a few attributes
This is going to step away from the beginner level and move toward the intermediate, so if you haven't been reading up to this point, back up and read the previous posts, okay?Until next time
.
