In this session we talk about when to use the class and the ID in the Thesis 2.0 skin editor. The dot (.) is used to designate a class and the pound sign (#) is used to designate an ID. Then we discuss how to use the class and ID to link an HTML Box to a Package.
Member: When you’re doing a CSS class in Dreamweaver which I haven’t touched in several years but when I did it, if you… I’d like to put the period in before you know, you give it the class name. But if I didn’t, Dreamweaver would put it in. And on this system, when you’re doing the class in the HTML, you do not put the dot in because you’ll screw it up. But when you’re in CSS class, if you accidentally leave the period out, will it put it in or not?
Rick: It won’t.
Rick: No, it won’t. The HTML editor acts like HTML so if you’re writing an HTML and you say div class equals, you don’t put a dot in there, right? The class equals stands for the dot. The dot’s really just a shortcut. So think of the HTML editor as behaving like HTML in that regard. And so here, it’s asking you for either a class or an id or a class and an id, right? Whereas when you’re in the CSS section, it’s not asking you for a class and id. It’s asking you for a selector. So the selector could be a combination of classes and ids. I’ve shown here a whole bunch of very simple selectors but you can actually have a selector that was complicated like you would have written in normal Thesis where so you would have a you know, a #header area .page, right? That would be a selector. And so anything that you want to style that has a specific selector, you can create a package for and use that selector in it even if it’s a long compound selector.
Member: Gotcha. So yeah, the bottom line just to clarify, if you’re using a class in the CSS selector, I believe is where it was, you got to put a dot or you gotta put the pound sign to designate… there you go, right? CSS selector, yeah. You cannot leave that dot out at that particular place.
Rick: Right, because if you leave the dot out, it’s not an actual selector.
Member: Gotcha. And then the other cool thing that I saw you do which you just explained again, right after dot columns 44, if you want to put a p tag or the anchor tag or an h3 tag or something, you can do that, correct?
Rick: That’s right because the CSS selector is the thing that this package is going to refer to and it doesn’t just have to be a div. It could be the div p and therefore, not affect anything except the p tags inside that div.
Member: Well, that’s pretty powerful.
Rick: Yeah. You can think of this as essentially, once you’ve decided what your selector is, it will write the CSS for you by making selections.