Naming Things

Now that we know the structure of an HTML site, we can start learning CSS. The two of them work together, so good thing you know the basics.

#IDs
If you give something an id, there can only be one of it. So, if I know that there will only be one special box on my site named specialBox, I can give it the id of #specialBox in the CSS.

My HTML will look like this:

<div id="specialBox">
	I am unique and special. There is only one of me!
</div>
						
Then, I can style my specialBox by calling it in CSS. When calling id's, you use the pound sign before it. Check out the example in the editor on the right.

.classes
Classes act the same way as id's, except there can be as many of them as you want. So, if I have a gallery of images, and they all behave in the same way, I'd give them the same class. That way I can style one class without having to style each individual image. So, I may only have one specialBox, but I can have tons of kittenImages.

So my HTML is:
<img src="kitten1.jpg" class="kittenImages">
<img src="kitten2.jpg" class="kittenImages">
<img src="kitten3.jpg" class="kittenImages">
						
When I call my kittenImages in CSS I'll put a period before the name because it's a class. Notice the difference of classes and IDs on the right.
Tags
Sometimes the things in my HTML don't need names. While it's always good to give your elements classes and id's, it is totally possible to style plain HTML tags. If I want every single paragraph tag in my site to have the same size font, for example, I can just call the <p> tag.

When you call tags you don't need anything before it. You just type the tag in your css without the brackets.

Again, check out the CSS on the right. It's easy to tell the difference between classes, ids, and tags because of the color coding, cool huh?

Try it out

For now, just try and remember the differences between classes and IDs. They're easy to get mixed up, but once you get them down they're the best things that ever happened to you. In the next lesson we'll cover what goes inside the CSS, so we can start making stuff look awesome.

Need a refresher? Just backtrack a little, we'll save your progress. Check out the previous lesson.

Got it! ✓


#specialBox {
	/* 
	All of my styles for my Special Box will go here
	*/
}

.kittenImages {
	/*
	All styles for my kitten images will go here
	*/
}

p {
	/*
	Whatever goes here will style ALL of my paragraph tags
	*/
}