Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The first thing we'll do when writing CSS is to explore writing a selector, and how it can help us target elements on the page. Now, a little bit later on, we're going to explore the different types of selectors in more detail. For right now, let's just concentrate on what a selector is and what it allows us to do. So I'm going to go over to my exercise files, go in the 01_04 folder, and open up selector.htm. So I want to just briefly go over the structure of the document with you.
You're going to notice right off the bat that inside of the head of the document we have the style tag. You know we're going to go over embedded styles in more detail a little bit later on, but for now, the style tag allows us to write CSS directly within this document. In the body of our document we can see that we have a h1, below that we have a paragraph, and then we have a div tag in which a h2 and a paragraph are both located, so those are the elements on the page that we're going need to be targeting. We also have a sample rule already written for us. All it needs is a selector, and that is what we're going to go ahead and write right now.
So I'm just going to place my cursor right before the opening curly brace of our CSS rule, and I'm going to type in P. That is a very simple element selector, and it's going to target all the paragraphs on the page. So I'm going to save the page, and I'm going to preview that in a browser. Now depending upon which authoring tool you're using, you're probably going to have different methods for previewing within the browser. Some of them you are actually going to have to go out to the browser and open the file separately; others such as Aptana Studio and Dreamweaver, they give you an option of previewing from the browser directly within the application.
In Aptana, all I do is go right up here to this little Play button and I can grab the pulldown menu and I can run from any browser that I've configured. So I'm going to go ahead and run this from Chrome, and now I can see that all of the paragraphs on the page, because of the element selector that we just wrote, are now red. So I want to jump back into Aptana Studio, and I'm just going to change the selector. So instead of the just having a paragraph selector, I'm going to type in div, and then a space, so now div p. This is what's known as a descendent selector, and it's only going to target paragraphs that are found within a div.
So I'm going to go ahead and save this, go back out to Chrome, refresh the page, and you can see that now instead of targeting every single paragraph on the page, we've filtered it a little bit, and we're only targeting the paragraph that's inside of the div tag itself. So I want to go back into our editor, and we'll make one more change to our selector. I'm just going to go right after the div p, type in a comma, and then h1. Now, this is what's known as a group selector, and what it is doing is it's going to target both of these. It'll target all paragraphs inside of a div tag, as well as all h1s on the page.
So again, I'm going to save that, go back to Chrome, refresh the page, and now you can see that now in addition to targeting this paragraph, it's also targeting the heading 1 up here as well. Now we're going to learn more about those selector types, and as we do that, you're going to become a lot more comfortable targeting specific page elements. Now the real challenge for you as an author is to make sure that you're writing the most efficient selectors that you can. The more complex the selector gets, the more work to browser has to do in order to render it properly. By having a thorough understanding of all the different types of selectors and when they're appropriate to use, you'll be a lot better prepared when planning and executing your styles.
Now although we are going to be examining selector types in more detail later, I want to mention a very, very helpful resource. And I'm just going to click over here on my tabs, because I already have this pre-loaded up here. This is the Selectors Level 3 module from the W3C. Now this is the specification that describes selectors in more detail. However, if you scroll down to the Selectors section--and I'm just going to do that as quickly as possible here; here we go-- you get a list of all of the different selector types, and it gives you a nice quick overview of the selector and what it targets.
Now as you're learning selectors a little bit later on, I would recommend actually having this and referring back to it, because it's an extremely handy resource to have on hand.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.