So I’ve talked about how to call style in the HTML of an ebook, and I’ve talked about the kinds of rules that you can invoke.
This time around, we’re going to look at which rules take priority over which — and I’ll also share some fun examples of ways you can use CSS to make your ebook beautiful.
Pecking Order: The Priorities of CSS Rules
So this is the thing about all of the different ways that you can apply style to an HTML element — sometimes (well, often) the rules can overlap and contradict each other. Say you had these two rules, one in the <style> element in header of the page chapter:
h1 {color:darkred;}
And the other in the linked stylesheet:
h1 {color:green;}
Say that you had the following line in the chapter:
<h1 style=”color:blue;” >WHAT COLOR SHALL I DISPLAY?</h1>
Well, will you look at that!
The question is, why was the text blue instead of either of the other colors?
The answer is that there’s a ranking of which kinds of rules take priority over which. In CSS, this is known as specificity.
Here are the rules, ranked from the highest priority rules to the lowest.
It’s all on the table — CSS priority rankings[1]
| 1 – Importance | The ‘!important’ annotation overwrites the previous priority types |
| 2 – Inline | A style applied to an HTML element via HTML ‘style’ attribute |
| 3 – Media Type | A property definition applies to all media types, unless a media specific CSS is defined |
| 4 – User defined | Most browsers have the accessibility feature: a user defined CSS |
| 5 – Selector specificity | A specific contextual selector (#heading p) overwrites generic definition |
| 6 – Rule order | Last rule declaration has a higher priority |
| 7 – Parent inheritance | If a property is not specified, it is inherited from a parent element |
| 8 – CSS property definition in HTML document | CSS rule or CSS inline style overwrites a default browser value |
| 9 – Browser default | The lowest priority: browser default value is determined by W3C initial value specifications |
Okay. What does this mean? I’ll go through the rankings in reverse order, from lowest to highest.
9. Browser Default
Every web browser has built-in default display values — and, since every ebook is a website in a box, every ereader is nothing but a specialized web browser, so the same is true of them as well.
These defaults define what will display if absolutely no other rule is defined in a particular case. Of course no two lines of ereaders have the same defaults — not even within the same company.
8. CSS property definition in HTML document
Basically, this tells us that every single defined CSS rule will take priority over #9. Just saying. (Not sure why they felt the need to specify this, but there you go.)
7. Parent inheritance
So let’s say that you haven’t defined the color property for <p> elements, but you have defined what the text color should be for the <body> or <html> elements inside of which the paragraph exists.
Each <p> element will then inherit the color property from the element inside which it is nested, like one of those Russian dolls I’ve talked about.
So if there were no other rules in an ebook, a chapter file might look like this:
<body style=”color:red”>
<p>WHAT COLOR SHALL I DISPLAY?</p>
</body>
It would display this way:
Make sense? The <p> element inherited the color property from the <body> element it was nested inside of.
6. Rule order
I mentioned this before, but the later a rule is, either on a stylesheet or in a declaration, the higher the priority it has.
So here’s an example:
<p style=”color:red; color:blue”>WHAT COLOR SHALL I DISPLAY?</p>
Look at those two color properties; which is the later rule? So, how will the paragraph display?
Wow. You’re so smart. ☺
5. Selector specificity
A selector is the part of a CSS rule that defines what element(s) the rule applies to — <h1>, <p>, <span>, etc.. Obviously this true only inside <style> tags at the top of the file or in linked stylesheets; you don’t use a selector when you’re defining style inline (see #2 below).
The more specific a selector, the higher the priority. Here’s the ranks of the different kinds of selector, from highest to lowest priority:
- ID — that is a rule that looks like this: #green {color:green;}
- Class — that is, a rule that looks like this: .blue {color:blue;}
- Element — that is, a rule that looks like this: p {color:red;}
So let’s say you had a series of rules just like those three above in a stylesheet — how would this paragraph display?
<p class=”blue” id=”green”>WHAT COLOR SHALL I DISPLAY? </p>
Well, the ID (green) takes priority over the class (blue) which takes priority over the <p> element.
So it would look like this:
Surprise! [2]
4. User defined
Remember how I’ve been saying that the readers can set their own preferences for how text is supposed to display, and that there isn’t much you can do to change that? Yeah, this is why.
So if the reader really, really wants to read her ebooks in miniscule purple Zapfino on an orange background, that’s what she’s going to get. (There IS a way to overcome this — one that usually works, though not always. See #1 below.)
Just because you asked, here’s what that user’s preference would look like:
Ouch.
3. Media type
This is where we get tricky.
You can assign very specific rules depending on the medium: on the size of the screen or the make, for example, of Kindle — whether it’s one of the old MOBI7 models or one of the newer KF8 models.
These are called media queries, and they’re very powerful. They also break a lot of ereaders, so be careful with them. [3]
So let’s say I wanted to have text display red on a new Kindle, but black on an old one (since red would show up as grey on a black-and-white screen).
I could place the following in the stylesheet (note that there are TWO sets of curly brackets — one for the rule, all of which is inside the one for the media query):
@media amzn-kf8 {p {color:red;}}
@media amzn-mobi {p {color:black;}}
These rules would take priority over any other rules for the <p> element in the stylesheet.
Or let’s say I want to have all of the images float to the right on larger screens, but on smaller ones (under, say, 600 pixels wide), I want the image to stand centered on its own line. I could do the following (note the parentheses around the criteria):
@media (max-width: 600px) {img {float:none;margin: 5px 10% 5px 10%;}}
@media (min-width: 601px) {img {float:right;margin: 0 10% 0 10%;width:80%}}
Here’s how that would look on a small screen (like a phone, say):
See how the image is on its own line and centered?
And here’s what it would look like on a tablet or computer screen:
(The full page extends to the left here — but to show it to scale I had to lop off part of the screenshot.)
See how I did that? The image now floats to the right of the text. The style responded to the size of the screen — which is why this kind of web and ebook design is called responsive.
2. Inline style
Well what do you know! When you declare the style in the style attribute of an element, it takes priority over everything. Almost.
Remember the first example — the heading that looked like this?
<h1 style=”color:blue;” >
That’s why the text displayed blue, and not green or red as was specified in the stylesheets. The blue color was defined inline.
So local, inline style is at the top of the heap. [4]
Almost.
1. Importance
Let’s say you’ve got a global rule that you’ve declared in your style.css stylesheet file., but that keeps getting bumped by a higher priority rule — user preferences, for example, or those annoying inline styles. Wouldn’t it be nice if you could just tell the ereader that a particular rule is important?
Well, you can.
To make sure that your rule has the highest possible priority, you can add the tag !important at the end, like this:
h1 {color:darkred!important;line-height:120%;}
(Note that there’s no space between the exclamation point and the beginning of important, and that the tag goes after the value(s), immediately before the semicolon that marks the rule’s ending.)
If I had done that in the first example above, even though there was an inline rule turning the color of the text in <h1> element blue, the heading would have looked like this:
It’s a beautiful thing. ☺
Now, in practice, the !important tag doesn’t always overrule other priorities. I have found this to be particularly true on Kindles. So test, test, test!
So, that’s it for CSS — I can show you guys some fun examples, if you’d like, but that should give you enough to begin to work on your own.
Next time around, we’ll look at how to work on your ebook after it’s been converted. Specifically, I’ll talk about how to drop your optimized images in.
[1]This table is based on one found on the Wikipedia page on Cascading Style Sheets. It’s used through a Creative Commons license.
[2]Also, the more specific the selector, the higher priority. So chapter p.orange {color:orange;} (a paragraph of the class orange inside of a chapter tag) is higher priority than p.red {color:red;} (a paragraph of the class red) is higher priority than .blue {color:blue;} (any element that is of the class blue). Got it?
[3]Nook won’t accept them, for example.
[4]It is, however, a pain to work with — if you put in a whole bunch of local styles, you’ll have to go through and make any changes one by one. When in doubt, use global stylesheets.
Photo: bigstockphoto.com
