When someone with no web design experience starts digging around in the backend, it can be quite scary. But, if you stop and think about it, everything is very straightforward, and makes a lot of sense. There is endless CSS Syntax to learn if you want to become an expert, and it all starts with selectors.
Selectors are pretty self explanatory – they are how you select a certain area of the design. If you want to change the back ground of the header from pink to white, you have to select the header, and then add CSS to make it white. Selectors are how you determine one area from the next – and today I’m going to talk to you about how to use them.
How to Find the Selectors
Before we can talk about understanding selectors, we need to know how to find them. I use Firebug to target certain areas of a website and I wrote a whole post on how to use it here – Web Design Basics – Using Firebug to Help You Style. Firebug lets you click on one area of a webpage and see exactly what code and selectors are affecting it.
Selectors apply to every part of a webpage, from the entire html, to the whole content area, to just a single line of text or a tiny div. They are what web designers use to define each area. A very large area, like the entire html will only have one or two selectors because it is the largest and most outside area, but something like a line of text would have many selectors because it is inside so many other areas which each have their own selectors.
Selectors can be anything – any word, or series of words, or even numbers – and are used to identify a certain area. Usually they make sense like ‘header’ or ‘footer’ or ‘main-content’. When you’re creating your own divs you might even name it something very specific like ‘homepagebox1’. You can name them whatever you want to – but as usual, simpler is better.
One important thing to remember is that selectors are optional. You can create a div and add content to it without defining it with a selector. But, you won’t be able to target it as easily if you don’t add one.
*Incase you don’t know what a div is – the quick explanation is that a div is a box. You can put divs anywhere and put other things inside them. Div’s are an easy way to explain and understand selectors.*
Types of Selectors
There are two types of selectors that you need to understand – classes and IDs. Classes are more general, and IDs are specific. Many divs might all have the same class, but each ID must be unique to the div. You can also apply multiple classes to one div, but only one ID (but that’s a little more complicated than we need to get into).
For example if you wanted to make a grid of divs that are all the same size you might name them with the class ‘grid boxes’ and if you wanted to make a specific one green, you might also add on the ID ‘greenbox’.
How to Use Selectors
So, let’s talk about how to actually apply these selectors. To create a div with the ID of ‘homepageblurbs’ you write:
And say you wanted to add three identical divs inside that and name them ‘innerblurb’ you write:
And then maybe you want to target the first one those and name it ‘greenblurb’ to make it green, you write:
How to Target With Selectors
All of that would go in your html, or in the body of your post. But it’s important to remember that naming the div ‘greenblurb’ does not actually make it green, in fact it doesn’t do anything other than give it a name. It just allows you to then target that div within your CSS.
You target classes with periods ‘.’ and IDs with number signs ‘#’. So, to make all the inner blurbs the same size, and then to make the green blurb div green, in your css you write:
It’s important to note that you can use as many or as few selectors as you would like, and when you use multiple selectors it is called a string. Targeting the greenblurb div you can use just that ID, or you can use the entire string of selectors that apply to it. Since it is inside the other divs, their IDs and classes apply to it as well, so both of these strings will bring the same result.
As I mentioned before, you can even use IDs and classes to target something as small as a sentence, or even a word. You do this by using the span tag, and then giving it a class or ID – which I explained in more detail in my post Web Design Basics – Styling Text Within a Post.
This can all be very confusing when starting out, but after a while it will be reflex to add IDs and classes to your divs. Though they aren’t necessary, they are a great way to customize your design.