Join James Williamson for an in-depth discussion in this video Understanding basic selectors, part of Dreamweaver CS4 with CSS Essential Training.
If you are new to CSS, the syntax behind the code can look a bit intimidating at first, but in reality CSS syntax is very easy to learn and decipher. In this movie, we'll examine the structure of CSS syntax and break down the basic selector types that will become the building blocks of your more complex selectors later. Now in our slide, here we have a sample CSS rule and this one is pretty basic. So each rule is broken down into specific parts and if you know what these parts are, it's a lot easier to decipher what's going on. So the first part of any CSS based rule is going to be the selector.
The selector identifies the element or elements on the page that you are targeting with this particular style. Some selectors are really basic and general in nature and others can be more complex and a lot more specific regarding the targeted element. Here we have what we call an element selector and it's just targeting any h1 tag that it finds in your file. Now next you are going to have the declaration block. The declaration block is in those curly braces and they are going to contain all of the instructions for how your heading 1s or whatever targeted element should be formatted within your file. Now inside the declaration block, you're going to find individual rules themselves, and those rules are broken up into two parts.
You have the property and a value. The property comes first and it's followed immediately by a colon. Just after that you have the Value. You can have as many of these Property/ Value pairs as you need within your rule, although you really only need to have one. However, after an individual rule, use a semi-colon to tell the browser or the user agent to go on and start rendering the next property. Here you can see we are setting some font properties for the heading 1. We are setting the Font to Arial and setting the Size to 1em, and we're assigning the Color to #000, which will be black.
So this entire rule is targeting heading 1 tag, setting the Font to Arial at 1em and changing the Color to black. So now that you understand the basic pieces of this CSS rule syntax, it's a good idea to go ahead and get your basic selectors under your belt. So here are basic CSS selectors. We have element selectors and to identify an element, all you have to do is type-in the element itself. So h1 would target heading 1s, h2 would target heading 2s, p would target paragraphs, TD would target table cells, so forth and so on.
You just have to know the name of the tag and you type it in free of any tag braces. It's just the element itself. Next step we have class selectors, and in this case, you can see I'm representing that with .author. Class selectors target anything with that particular class attribute and notice that they are preceded by a period. After that they have to be named exactly the same thing as the class attribute on your page and capitalization and spelling most certainly counts. Next, we have ID selectors and again, this is going to target any element with an ID specific to what you have here.
IDs are preceded by the pound symbol just like classes are preceded by the dot. So if you ever see a dot, that's a class. If you ever see a pound symbol, that's an ID. So they are pretty easy to identify when you are seeing them within the CSS syntax. If you don't see any of those things, chances are it's probably an element selector and just to check that, make sure it's representing an actual HTML tag like h1 or block quote or the A tag. Well, now we have that under our belt, let's go ahead and take an existing page and write some of those basic selectors for it. This also gives us a really good opportunity to see how we create new CSS rules in Dreamweaver.
So here we have a page that has pretty much the same structure we have been working with. There is just more content in it now. We have a Header region, we have our Content region, we have our Sidebar region and down the very, very bottom we have our Footer region, but note we also have paragraphs, we have list items. We have all sorts of stuff going on here. And if I look over at my CSS Styles panel and if you don't see this opened, you can go to Window and choose CSS Styles, but it's usually in the top panel grouping here. We see that we have some existing styles already on the page. We have an element selector.
It's targeting our paragraphs, and I'm going to expand my CSS Styles panel so I can see what's going on here. So it's assigning a color of #333 and it's setting a font family of Georgia or Times New Roman. We also have a class selector called .author, and you can see it's going to change that color of that text to green and give it a font weight to Bold and you can see that in action in a couple of different places. And finally, we have the #header selector, so that's targeting any element with an ID of header. Now remember, IDs can only be used once per page, so I've given this a background color and a little bit of padding. What we've done is we have separated the Header region from the rest of the page, not only with structure but with also style as well.
So let's go ahead and style some of the other basic elements we have on the page. We have a couple of headers that we want to style, so we're going to use element selectors for those. We also have a list. We'd like to reformat our list so we are going to use the list item selector for those. So I'm going to go over to CSS Styles panel and the easiest way to add a style to my document is to simply go down to the row of icons on the bottom right-hand corner. The one that has the page with the plus symbol on it is New CSS Rule and you want to go ahead and click that. Now the first thing that's going to ask you to do is what type of selector do you want? Well, we are covering those three basic selectors, so notice that they come up as choices.
We have Classes, IDs or Tags. Tag is another way of saying an element selector, so I'm going to choose tag. Now I want to target the h1 tag, and if I had been smart enough to click inside an h1 tag, Dreamweaver would have populated that for me, which would have been really nice. Notice that you could also grab that from a list. So if you forget exactly what that tag is you can usually use that list to find exactly the tag you are looking for. Now I could also choose to define this rule in this document only or if I have an external style sheet file, I could move it over to my external rules.
We don't have that yet, so I'm just going to keep it in this document. So I'm going to go ahead and click OK. And up comes my CSS Rule Definition dialog box. This is separated by categories. You can see the categories on the left-hand side. We have some Typography categories, categories referencing the background and borders, so generally, you can find what you are looking for here. Now I'm going to set my font family, a pull-down menu and choose Arial, Helvetica, and sans-serif. I also want to set a color, so I'm going to click in the Color Chip, and you can do this one of two ways. One, you can click the actual Color Chip itself and then sample the color from the Swatches, or from anywhere in your file, or you can literally just type it in.
I'm going to go ahead and sample #000. That's a black, and I certainly could have typed that in right there as well. I am going to go ahead and click OK, and I notice that all my heading 1s change font. The color was already black. That's just me making sure. I am going to go ahead and choose another New CSS Rule, and this time I'm going to do a tag selector and I'm going to do the h2 tag. So you can see this dialog box gets a lot easier to manage once you kind of know your way around it. I am going to go ahead and click OK and we are going to do something very similar here. For font-family, I'm going to choose Arial, and for Color, I'm going to type-in #060.
If you hit Tab, anything that you type- in there you'll actually see and 060 is a green, so I'm going to click OK. Any of my heading 2s will change color and the font changes as well. Right, we have one more element selector left to do, so I'm going to choose New CSS Rule, I'm going to choose Tag, and I'm going to type in li. I could also have chosen from the list obviously and that's going to target any of my list items. I am going to leave it in this document only. Go ahead and click OK. I'm going to change my font-family to Arial, Helvetica, sans-serif and that's all I really wanted to do there.
I'm going to go ahead and click OK and I can see the list, updates, and changes. Perfect! Now that's an element selector and you can see that it's very global in nature. It really didn't discriminate into what it was formatting. It formatted everything. So the heading 1 is targeting the heading 1s inside the header as well as the content region. If I had multiple lists, it would format those no matter where they are and we can actually see that we have a list in our content region and a list in our sidebar and they are both using the same font. So we know that these styles are very global, they're very general in nature and they're likely to affect your entire page. Now you can do more targeted selectors by using ID or classes.
So what we want to do is we want to change the way our sidebar looks. We want to give it a background color and a little bit of padding all the way around it as well. So what I'm going to do is create a new CSS rule and this time, I'm going to choose ID. I can grab the pull-down menu and I would find any previously populated IDs but I don't have any. So I need to type this in, so I'm going to type-in #sidebar. Notice the no space there, just #sidebar and I'm going to click OK. I am going to give it a background color, so I'm going to click on the Background category and I'm going to give it a color of #999.
Now if you hit Tab, you can see what color is going to be entered there. In this case, it's going to get sort of a neutral gray. I am going to go to my Box category and give it some padding. I'm going to give it 10 pixels worth of padding all the way around it. So I'm going to leave Same for all selected and just choose 10 pixels there. Now when I click OK, I could see that now my Sidebar has turned gray and the text isn't butting right up against the edge like it was before. Perfect! So now that we have done element selectors and ID selectors, the only one that we have left to do is a class selector.
Now remember class selectors are going to target any element that has the class attribute applied to it. In this case, we can use the class attribute of title, something that really hasn't been applied yet in the code. So it doesn't matter whether you apply the class attribute first within the code or whether you create the style first. Either way works fine for you. It's just whatever workflow you'd like to do. So I'm going to choose New CSS Rule, I want a class selector and remember class selectors are preceded by periods. I'm going to type-in period or dot, whatever you want to say, .title. Notice there is no space before that. There is no space after it.
It's just .title, all one word. Again, we are going to define it in this document only. I'm going to go ahead and click OK. So I'm going to stay in the Type category and choose font-style Italic. I'm going to go ahead and click OK and save our file. Now I don't know about you, but I don't see anything change here. Well, that's because it's only going to target elements that have that class applied to it and currently on our page nothing does. So what I'm going to do is find everywhere the text Animal Farm is. I'm going to go ahead and highlight that text. Now in the previous exercise, if we wanted a class attribute, we would go into either Code or we would use the Quick Tag Editor.
But if you already have some existing CSS, your class application becomes a lot simpler. So with that highlighted, I'm going to go down to my Properties Inspector and where it says Class of None right now, I'm going to grab that pull-down menu and I can see every single class that I have in my styles. I am going to choose Title and it's going to apply that. It does it by wrapping that text in a span tag and then giving it the title attribute, so that's automating that process and it's doing a lot for me. The next thing I'm going to do is highlight Animal Farm in my list and apply exactly the same class to it.
And I'm pretty sure that's all we have on the page as far as the book title but I want to make sure. Yup, and our book review is done. So I'm going to go ahead and save that. And just to review our structure, we have three selectors driving all the formatting on our page right now. We have an element, ID, and class selectors, and these guys can be counted on to style almost any content that you need them to. I should point out that they are extremely generic however, and they are not going to be right for every situation. For example, if you write an element selector that targets the paragraph tag, that's going to target every single paragraph in your entire site.
I really doubt that you can have a very many sites where every single paragraph needs to look the same. So instead of being what you use to format everything on the page, these three basic selectors are in actuality going to form the building blocks for the more complex selectors that you'll be using a little bit later on. So next up, we need to focus on those advanced selectors and how they allow you to target more specific items on the page.
- Understanding XHTML and CSS fundamentals
- Understanding and implementing advances in typography
- Using the Code Navigator for faster CSS edits
- Styling form elements while maintaining accessibility
- Customizing the look and functionality of Spry widgets through CSS
- Controlling layout and positioning through styles
- Controlling CSS with the Properties Inspector