A Quick Intro to CSS

In the previous post we had a look at marking up some example text up with XML. Now I imagine you’re just as excited as me to view that example in all its glory, but before we can do that, we need to specify how the various parts of it should look. The most common way to specify this style information when using XML is with CSS (cascading style sheets). This is the same way it’s done on the web with HTML. For our ‘Hello, World’ example, the style sheet might look something like this:

greeting{
font-size:120px;
color:red;
}

Easy huh? Even if you are a complete CSS virgin, I’m pretty sure you’ve been able to guess at what I have specified, but if you are having one of those days: we told the viewer program that we wanted it to render any text contained within a greeting tag with a font size of 120 pixels and using the colour red (note that in the CSS file we have to use the American spelling: color). You may have noticed that we left out rather a lot of information too, this will all be provided by the viewers default style sheet. There is no standardisation of these defaults, but viewers tend to pick reasonably sane values.

If we save this style info in a file called helloworld.css, we can then link our XML file to it by including the following processing instruction:

<?xml-stylesheet type="text/css" href="helloworld.css"?>

Now we can take a quick peek at our first bit of marked up text! You may be wondering what to use to view it. The good news is that your computer probably already contains many XML viewing programs. Some of these will be designed for a particular XML document type, others will be general purpose. The best general purpose XML viewer you are likely to have is your web browser. So download the two files here and here (making sure to save them in the same directory), fire up Firefox, Chrome or whatever you use, and then click file open. And ta daa!

Well ok, it isn’t the worlds most exciting document, but hopefully you get the basic idea of how these technologies work together. CSS, like almost everything, can get pretty complex. Again I’m not going to dwell on the details because you don’t need to be any kind of CSS guru for what we are going to use it for, but what follows is what you need to know in a nutshell.

The first thing to grasp about CSS is the fact that it gives gives you lots of ways of referring to the same bit of text and that the more specifically a particular rule identifies the text, the higher its precedence is when merging the matched rules all together (it also doesn’t limit you to just the one CSS file but we aren’t going to use that functionality). So, in our example if we add another rule which identifies the first letter of the text inside the greeting tag like so:

greeting:first-letter {
color:blue;
}

This is more specific than our previous rule that applied to all the letters in the greeting tag, so it will have precedence over it and successfully turn the first letter blue.

As well as identifying text by tag name or sub-item you can also use class and id attributes. These aren’t really used with pure XML documents but are used extensively when styling HTML for the web. They are needed in HTML to deal with with the fact that HTML can’t use arbitary tag names, you are limited to those specified in the HTML standard. To get around this limitation, what would be the tag name in an XML document is set as the item’s class attribute, so an HTML fragment of our ‘Hello, World!’ example would look like this (note, <p> is the HTML paragraph tag):

<p class="greeting">Hello, World!</p>

To indicate we are giving a class attribute in our CSS rule we put a dot in front of the name (if we were using an id atrribute we would indicate it with the # sign).

.greeting {
font-size:120px;
color:red;
}

Alright, getting back to XML and identifying tags by name, if we add a nested tag to our example,

<greeting>Hello, <nestedTag>World</nestedTag></greeting>

We can reference the text in the nested tag in three ways. Firstly, as it is a child of the <greeting> tag, all of <greeting>’s CSS rules apply to it. We can also create our own rule especially for <nestedTag>,

nestedTag {
font-size:240px;
}

Which, as it applies to the text more specifically than <greeting>’s rules do, it’ll override any that are declared in both, as font-size is. Finally, we can reference it by including its family tree separated by spaces:

greeting nestedTag {
font-size:60px;
}

This rule would only apply to <nestedTag> tags that are children of <greeting> tags (whereas the previous rule applied to all <nestedTag> tags regardless of parentage.) As this is more specific than the previous rule, it would get priority over it and set the font size to 60px.

The other major concept you need to grasp about CSS is the way in which it can position the the bits of text identified by its rules. Every identified bit of text (or, more generally, content) is put into a box. This box has height, width, padding, margins and borders (all of which can be specified in the CSS), and also X (left), Y (top) and Z (z-index) coordinates.

Usually, these coordinates are relative to the text’s starting position (or, more accurately, the starting position of box around the text with all its padding, margins, borders etc.) This starting position can be one of three different types. Firstly, and most simply, it can follow on from the piece of text before it (or the box around it). This is called being inline. Secondly, it can start a new line below the previous bit of text (or the box around it). This is called block layout. And Finally, it can float around the previous or next bit of text. Floating is used a lot in HTML to achieve interesting and flexible layouts, but doing this is horribly unintuitive. Thankfully, we don’t need to use it in anything other than its most basic form, which is pretty straight forward to grasp: imagine a picture on a page and that the text of that page is flowing around it, that effect is achieved by using the float layout.

Once we have established the text’s starting position, we have two possible ways to move it from there. The most common is with relative positioning, the other is with absolute positioning. Relative positioning is pretty straight forward. If you set its X coordinate to 5px the bit of text will move 5px right from its starting position. Behind it, it will leave a 5px space, but it will overlap any text that follows it by 5px. If absolute positioning is used, the text is pulled from its starting position and the hole it leaves closes behind it. It is then position 5px to the right of its nearest parent that was positioned relatively, overlapping any content that was already in that position (whether overlapping content goes above or below the content it overlaps is controlled by the text’s Z coordinate.)

We also have a third, pseudo, way of moving text. We can set the left and top margins of our text’s. This way doesn’t actually move the entire text, but the effect is very similar to moving it relatively. The big difference with doing it this way is that any text that follows is moved up by the same amount as well, meaning we don’t get overlapping text.

That’s probably enough CSS to get you going. However, now that you know all about CSS, I’m afraid I have some bad news for you: unfortunately, CSS isn’t how LibreOffice handles style information. But before you despair, it is how MOBI (kindle) and EPUB (and pretty much everything else) do, so when we write our plugin, not only will have to convert its markup, we will also have to convert its style information to CSS. That’s it for now on CSS. If you are interested in the subject there are lots of good resources on the web, such as http://www.w3schools.com.