Join Tony Harmer for an in-depth discussion in this video Styling a heading, part of CSS for EPUB.
- View Offline
- In this movie we're going to be looking at some very simple options to style your headings. Aside from changing the font, which we'll be looking at later on in this chapter. So, there's a few different things we could do. Maybe if you didn't want to be so in-your-face with the headings just here, you could change the size of these down a bit, so I'm going to just bring this down to about 1.8em, from it's current size. And then bring this one down as well. Just a bit lower than that, so about 1.4.
And they're much more subtle that way. Now I want to add some things to distinguish them. One of the things I could do, if I go to my rule just here that applies to all of my heading elements, is I could, of course, add some text decoration like so. So, if I just do that, and spell it correctly, then that will work perfectly. So just do text decoration there, and put underline, like so. Then you'll see that the underline gets... Ooh! Gets rendered if I spell it correctly again.
So, there we are. So if I do that, you can see that underline's there, but it's very, very tight to the actual shape just there, and I've got no other control over it inherits the text color, and all sorts. One of the things I could do is add a border to it. Now, in the next chapter, you'll find out a little bit more about borders, but I'm just going to do something here with a short form of the border, which is kind of like a superproperty, so I'm just gonna say, "Make a one pixel solid "black border just here," and that's going to add a border around the whole thing.
Now, one of the things I can do is access one of the subproperties of that, and go for border-bottom, like so. And that will then add a line underneath that, and there's a few things I can do to control that, so what I might want to do here is, where I may use some of my padding, as we did in the last movie, where I was demonstrating that. If I maybe make that .25em, just there, and do that, you'll see how that gets spaced out by something relative to the size of the text, like so.
And, if I wanted to, I could even tweak that in so it was more towards the sides of the text here, maybe for the h2, and do something else with the headline there, the level one heading, sorry, I was tripping over my words. So the level one heading, just there. And I'm going to select these two things just here, I'm just going to copy that. Come to my h1, and then just paste those in, and then I'm going to change the word bottom there, for top, like so.
And now I've got borders above the main heading like that, and I could maybe change the color there, I could use a keyword, like silver, and so that would drop those down to grey. Of course, it's done it grey for the top just there, but not for the bottom, but I could override that with one of the other border properties if I wanted to. But for now, I'll just reset that back to black, because we are dealing with that in the next chapter. I could tweak this one in by using the margin property just here, so if I decided to put in a little bit of margin...
So if I just do margin-left, just there, just for the moment, and I'll maybe make that... Let's see what my margins are further up. So they have a margin on the left and right of zero, so I'm just going to bring that in then, by about 1em, just for the minute, let's have a look at what that does to change things for us. Actually, that's just about perfect. Bring that out to .75, just there, and just tune that up a little bit. That's brilliant. So once I've got that, I can select that and copy it, and then bring that down a line, and you've probably guessed that what I'm going to do here now is change the margin-right to equal that value as well, and so that's brought in.
You can see there some very simple ways for me to change those headings. I just want to take that to one extra level with both of my headings here, and I'm going to use the text variant property just here, so if I just do text... Actually, it's font variant, there you go. So if I do font, hyphen, variant, just there, and I'll set that to small, hyphen, caps, like so. That will change all of those, and there you are. My lowercase letters are now scaled down things, so there are things you can do with the headings without doing anything else in terms of bringing in extra files, and so on.
Very small, very elegant, a bit of a font change would probably be a good idea, and we'll explore that shortly, color, might leave it at that so that the user's text will stay with it.
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