Math Tutorials and More
by George

CSS (Cascading Style Sheets) is a powerful way of adding properties to selected HTML elements. With CSS you can, for example, change the behavior of every <p> tag with one rule. There are three ways that CSS can be applied to an HTML file. The CSS rules can be contained in an external file that is loaded with the link command in the head section. For example,

<link href="style.css" rel="stylesheet" type="text/css" />

would apply the rules in the file style.css to the present HTML file. The advantage of placing the CSS rules in a file is that the same rules could be applied to multiple HTML files. The rules can also be placed between the tags <style> and </style> in the head section. These rules would apply only to the present file. You can also place CSS rules within an opening tag of an individual HTML element using style="CSS rules". For example,

<p style="text-indent: 0;">

In this case the rules would only apply to that particular element. The original MOBI format only supports a limited number of CSS rules. The basic form of a CSS rule is

Selector {Attribute: value;}

A selector can be an HTML tag name such as p, div, or h1. It can also be a user determined class name preceded by a period, e.g., .left. The properties of a class are added to an element by placing a class="…" statement within the opening tag, e.g., <p class="left">. If you want to restrict a class selector to a particular HTML element, you can use a selector of the form element.class, e.g. p.left. More than one attribute can be assigned to a selector by separating the attributes by semicolons. For example,

p {text-indent: 0; text-align: left;}

More than one selector can be assigned the same attribute by separating them by commas. For example,

h1, h2, h3 {margin-bottom: 15;}

Many CSS properties involve units. Common units are pixels (px), percent (%), and em-units (em). An em is usually taken as the default font size. This is a very useful unit since it scales nicely when the user changes the font size. The em unit is ideal for specifying the height or width of an image since it allows the image to scale like the font size. Unfortunately, the older Kindles do not handle this unit properly. For the older Kindles an em has a static size (it doesn't change with font size) and this size is not the same for all models.

It should be noted that a margin attribute refers to spacing external to the element. Margins are used to separate elements. A padding attribute refers to spacing within an element.

Below are some examples of useful attributes

text-indent: 0;

sets the amount of first line indent (0 in this case). Hanging indents can be obtained by using negative values. If no unit is given, the unit is considered to be pixels.

text-align: left;

text is aligned on the left. This overrides the default full justify alignment and produces a ragged right margin. Other values for text-align are right, center, and justify.

margin-top: 40px;

sets a margin of 40 pixels above the element. margin-bottom would place a margin below the element.

padding-left: 1em;

sets padding to 1em inside element on the left.

font-style: italic;

sets the font style to italic. Other values are normal and oblique.

font-weight: bold;

sets font weight to bold. Another possible value is normal.

font-size: 1.5em;

sets font size relative to the default size, in this case 1.5 times larger. Other possible property values are xx-small, x-small, small, medium, large, x-large, xx-large.

text-decoration: underline;

underlines text. Another possible value is line-through.

You can insert comments in a CSS file by placing them between /* and */.

The next section contains a sample CSS style file .

+++++