Join Tony Harmer for an in-depth discussion in this video Writing smarter rules, part of CSS for EPUB.
- View Offline
- This movie is essentially something I did mention earlier on in the course, but in a little more detail. So in this file, and I'm working inside of smartrules in the CSS for EPUB document that you'll have access to if you're a premium subscriber, although you could of course work along with your own files. And I have four divs here, each a different color. And they all have an ID. As you can see there's the ID of greenBox, redBox, blueBox, and yellowBox just there.
And what I'm actually looking for, is I'm looking for what's in common. And if you look carefully, you'll see that all of these properties are replicated through all four divs. So what I would tend to do just there, and I'm going to remove these just for a second. So if I just take these ones out, like so. If I take that one out just there. And out just there. And this one I'm just going to cut that one to my clipboard. Like so.
And then what I'd do, is I would create a new class for those things. So let's just call this baseBox. Just there. Okay, and we'll close that rule off like so. And then paste in those rules. So now we've got that, and we've got these individual colors at the top here. In fact, what I've possibly would do, because I might have other elements that might use those colors, I might actually create entirely new things for those.
So if I just leave this as an empty rule just for a second, and then create a class. So .greenbg, like so. And then I'll do the same with redBox. So I'll just leave an empty rule part there, just for the minute. And do a class .redbg. Like so. And that way I've got this freed up for only the real content that I need for the ID to have. Things that are specific and peculiar only to that ID.
So if I just do this one as .bluebg, actually box is a better term to apply that. It doesn't really conflict with that, because one's an ID and one isn't. Let's just do that the whole way around. Probably makes more sense, much more likely to do that in reality. And then I'll just park this one just here and just one final one, .yellowbox, like so. You'll notice they're not the same levels of capitalization, so it won't be the same rule anyway.
Just there. And I've missed out a couple of little things. Just going to correct where I've missed braces out. Just there. They all look just fine now. What I'm going to do in Calibre is just beautify, this file's really handy little features to click, the little flower at the top, Sigil has a very similar deal inside of it. So there we go. I've got all of those things. Actually the beautification did remove any unused CSS, so I just need to retype the IDs, but that's just fine. So I've got these things here, .baseBox and .yellowbox, .bluebox, .redbox, and .greenbox.
So I'm going to come down to these, and now change these things. So I'm going to do class, and then equal to. So I'm actually working in the markup, of course. And I'll do "baseBox and then a space and then I'll do a greenbox", just there. Close off my quotes, like so. Ah, greebox, greenbox. There we go, that's much better.
I'll get some sort of result. There you go. That colors in nicely. To be honest, I could just copy that little bit just there. I'm going to end up with four green boxes, just to start off with, but it's not really a massive labor to just change those from there, so I'll just do that all the way back up. Just change this one to yellowbox, like so. And change this one to bluebox. And then redbox, just here.
So that should update just about now. Somethings missing somewhere. And that's because I changed the wrong thing just there. Need to change that to baseBox back again. There we are. And we'll try that one more time. This time with feeling. There we are, so now I've got all of those things. And I've reduced the amount of CSS that I'm writing as a result. And that's always a good thing. One, because it's less things to change, if you need to start moving things around or making edits.
And two, it's just really efficient for the device to read as well. It makes it a lot easier. There, just making sure that you're using classes and things like that. And IDs with things specific. Just for example, if redBox there needed to float out to the right for example, for whatever reason, I'll just do a rule for redBox. And let's just float that to the right. There we go. And of course, that would do exactly that.
And it's specific to that actual ID.
NOTE: The techniques shown are designed to help members create reflowable EPUBs with CSS 2.1. There is some CSS3 for creating fixed-layout EPUBs covered, but the majority of the tutorials concentrate on CSS 2.1.
- Working with CSS selectors
- Incorporating @ directives in CSS
- Understanding the CSS box model
- Writing more efficient code with shorthand notation
- Sizing and positioning text
- Including images with CSS
- Styling lists
- Assigning relative, absolute, and fixed positions
- Floating elements