Join Tony Harmer for an in-depth discussion in this video Taking a look at the basic anatomy of a CSS rule, part of EPUB: CSS.
- In this movie, we're going to take a look at the basic anatomy of CSS. We're going to cover off some essential naming conventions and punctuation, so you know what everything is called, where it goes, and so on. CSS is implemented by rules that determine the appearance of page elements, and here's an example of a very simple rule so you can see how rules are constructed.
Rules begin with a selector, and that determines where the rule should be applied. These take many forms, and we'll look at some of these in the next movie shortly. Here though, we have an element selector, targeting a specific HTML element. And in this case, that would be any h1 element. And then next, enclosed in a pair of braces, which are sometimes referred to as curly brackets, although I'll be referring to them as braces throughout, we have a declaration, or, if there's more than one, a declaration block.
We'll have a look at one of those in just a moment. Declarations are formed of two parts. There's a property, which determines what aspect of the element is changed, followed by a colon to separate those out, and then a value, or in some cases, values. Each declaration should be terminated with a semicolon. Now, it is true that the specification doesn't require that in a single declaration, but it is best practice to always include it, just in case more declarations are made later on in the rule, sometimes by script or whatever, as the absence of the semicolon would make the rule invalid and it wouldn't work.
So now the basic rule anatomy is in the bag, let's just take a quick look at a declaration block. If we switch out and have a look what a declaration block typically looks like, you can see that this rule has three property value pairs in it. Don't concern yourself too much this time with a function, we'll get to that, although it may be fairly obvious in this case. Each individual declaration there is terminated with a semicolon to separate them out.
The way I've typed these here is common practice, one declaration per line, as it makes the rules easier to read. You don't have to do this if you don't want to. The rules can be typed in one long line, or lines as in this example. But you'd probably find it easier to work with this where they all have their own line. It is entirely up to you, though. Before we move on, I'd just like to point out that the rule is typed in lowercase, and with only a few exceptions that's the way it is with CSS.
As you'll see in the next movie, some selectors can have uppercase letters and numbers in them, although they should never begin with either of those. Otherwise, your text needs to be caps-free in the main. And there we have it. You know what the essential components of a CSS rule are, the order in which they appear, and the essential punctuation they contain. In the next movie, we're going to look at selectors in a bit more detail.
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