CSS Cookbook/About
The Basic CSS Idea
We use CSS rules to tell the browser how to render the elements of the document.
That's it; end of course! Time for tea?
Oh, well, perhaps a little elaboration is in order...
HTML Elements
You know how the parts of an HTML text are marked up into different elements; for example, each paragraph is marked up with <p> at the start and </p> at the end; and each cell of a table has <td> at the start and </td> at the end; and so on for list items (<li>..</li>), italic phrases (<i>..</i>), links (<a href=...>..</a>) and blah blah... block quotes... headings... yadda yadda yadda.
Not everything has balanced open/close markup:
- Breaks are one-item elements <br />
- Rules are one-item elements <hr />
- Images are one-item elements <img... />
Each marked-up piece of text is an element of the document. Some elements are contained within other elements; for example, table items (<td>) are enclosed in table rows (<tr>) are enclosed within tables (<table>). And everything visible is enclosed within the <body>..</body> which is enclosed within the <html>..</html> element.
Browser Rendering
It is the job of the user's web browser to take an HTML page and display it nicely on the screen—or sometimes, to print it to a printer or even speak it through a sound system. This is rendering the HTML: making it visible using fonts and pixels.
In the absence of other instructions, each browser has a set of default rules for how to render any given element, for example, a list item. Some defaults are built-in to the browser; some are set by user preferences. The default rules applied to an etext generally produce readable, but ugly, output.
CSS is a standard language that is supposed to be supported identically by all browsers. (Yeah, right.) You use rules written in CSS to instruct the browser how to render the different elements of your etext. For example a rule
p {text-indent:1em;}
tells the browser "When rendering any element tagged <p>, indent its first line of text 1em."
Rule Syntax
Each CSS rule has two parts, a selector and some declarations. Consider that simple rule p {text-indent:1em;}.
The selector specifies to which elements the rule applies. Here the selector is simply p so the rule applies to every <p> in the document.
Each declaration specifies a value for a property of the selected element. The example has just one declaration in which the property is text-indent and the value is 1em.
Declarations are grouped with curly braces and set apart with semicolons. (The semicolon could be omitted from the last declaration of the group, but we don't, because when we go to add another declaration to the rule, it's too easy to forget to put the semicolon back.)
Where Rules Are Placed
All your CSS rules are grouped in the head element of the document:
<html>
<head>
<style type="text/css">
/* all your CSS rules go here */
</style>
</head>
There are other ways to incorporate CSS rules, but this is how you do it for an etext.
Oh, yes, in that style section you can write comments in the form /*Whatever...*/
Selectors
Much of the power of CSS lies in its selectors, which designate precisely the elements of the document we want to affect.
All Elements
A selector that is just the name of an element type selects every element of that type wherever it is. Selector p applies its rule to every paragraph. Selector tr applies to every table row of every table. Selector a applies to every link, and so on.
Class Names
A selector with a dot and a name selects only elements that have that class-name. For example a rule
.blush {background-color:pink;}selects any element that contains class="blush", whether that is a list item <li class="blush">..</li>, a heading <h3 class="blush">..</h3>, a table row or table cell. Any element can specify a class, and thus put itself under control of a rule that selects that class.
A selector that gives both an element-name and a class-name is specific to that combination. For example
span.big {font-size:larger;}
is a rule that applies only to elements coded <span class="big">..</span>. This rule would not apply to a heading coded <h2 class="big">.
Grouping Selectors
For convenience we can give a list of selectors for a rule. A good example is
h2, h3, h4 {text-align:center; font-weight:normal;}
This applies to all the 2-, 3- and 4-level heads without having to write a separate rule for each.
Contained Selections
A selector that lists two things in a row with a space between selects the second thing but only when it is contained somewhere inside the first. For example,
table p {line-height:1.1em;}
applies to any paragraph but only when it is enclosed within a table—not otherwise. We use this type of selector often, for example the selector .footnotes h3 lets us specify a particular style for the header "FOOTNOTES" inside a block of footnotes, while not affecting any other head-3 in the document. Similarly, the selector .poem p lets us apply specific rendering rules to paragraphs that are within a poem while not affecting the other paragraphs.
Child Selection
A selector that lists two things with > between selects the second only when it is a "child" of the first, that is, contained directly in it and not nested in something else. For example
body > p {text-indent:1em;}
applies only to paragraphs that are directly in the body—not ones that might be nested in a table or div.
Sibling Selection
A selector that lists two things with + between selects the second only if it is an "adjacent sibling" of the first. The important example is
h2+p, h3+p {text-indent:0;}
which says "in a paragraph that immediately follows a head-2 or -3, don't indent the first line."
Named Elements
A selector that lists a hashmark and a name selects the element that has that name as its id property. For example,
#booktitle { /* the title on the title page */
font-size:200%;
font-weight:normal;
letter-spacing:3px;
}
The selector #booktitle applies solely to the element coded
<h1 id="booktitle">Turgidity Exemplified</h1>
Web designers use these id-selectors a lot because the typical commercial web page has many one-of-a-kind elements that are conveniently identified by unique names. In etexts we have few such unique, one-per-document elements except, as indicated, the uniquely-styled elements of a title page.
Ambiguous Selectors
It is obviously possible to write a set of rules so that a given element is selected by more than one rule. Which rule wins?
One possible answer is, "both." When the rules affect different properties both can be applied without conflict. But when two rules affect the same property of the same element—as for example, in
body > p {text-indent:1em;}
h2+p {text-indent:0;}
both rules apply to the text-indent property of a paragraph following a heading. Here the answer is the rule with a more specific selector takes priority.
In the example, the second rule is, fairly clearly, the more specific. In fact there is an elegant and precise algorithmic rule in the CSS standard that makes the meaning of "more specific" highly, well... specific. But in general the intuitive reading is all you need.
Other Selectors
CSS supports other kinds of selectors—read a book or take a proper course to learn them—but they are not of interest in etexts. On to the properties.
Values
The power of CSS rules is in the specific properties that you can set, and the values you can give them..
Important values are lengths, percents, and colors.
Length Values
Lengths can be given in:
- pixels (e.g. 6px)
- inches or centimeters (0.25in and 2.2cm)
- typographical ems (1.25em, 0.25 em)
Different browsers on different systems should render a distance in pixels the same. Of course, the pixels on different screens are different sizes.
Different browsers on different systems should render sizes in inches or centimeters roughly the same. But the browser really has to guess how many pixels there are in a centimeter of screen.
Ems are relative to whatever font-size is in use in the selected element. One horizontal em should be the width the browser would use to render a capital M in that font. One vertical em should be the line-height in use. Measures in ems are especially useful since they automatically scale in proportion to their context.
Percentage Values
An important type of length is the percent (e.g. 7%). It is taken as a percentage of the value of the same property of the containing element.
For example, body {margin-left:7%;} says, make the left margin of the body element 7% of the width of the browser window. However, the rule table {width:50%;} says that any table is to be half the width of its containing element. If that is the body element, a table will be half the width of the body. But if the table is contained in a sidebar <div> that is itself 50% of the body, the table will be sized to 50% of that container.
The declaration font-size:75% says that the font in this element should be 3/4 the size of the font used in its container.
The importance of percentage values is that they adjust automatically with their context. If the user makes the browser window wider or narrower, the body margins and the width of the table adjust smoothly to match. If the user changes the default serif font size, percentage changes in font size adjust automatically.
Color Values
Colors are specified using the HTML rules for color values documented here.
Properties
The specific properties you can set are listed in the property reference. You need to know the following general points about properties.
How Properties Get Values
Every element has a number of properties. Elements get values for their properties in these ways:
- By default: the browser assigns default values to all properties when it begins to load the document. Some defaults are set by the user; for example, the user sets a preference for the default font-family to use.
- By inheritance: each element inherits values for some (but confusingly, not all) of its properties from the element that contains it. For example if you give a table the text-align:center property, centered alignment is inherited by all the cells in the table, and by all the paragraphs in those cells.
- From a CSS rule: when an element is selected by a rule, the rule determines the value for one or more of the element's properties.
- By explicit styling: you can write a style=".." attribute into any element. The quoted string is a list of CSS declarations which apply to this element. For example, the following rule element has an explicit style:
<hr style="width:35%;margin-top:8px;" />
- By execution of a Javascript function—but since Javascript is not allowed in our etexts, we don't care.
The Box Model
Block-level elements are the elements that force a "line-break" before and after them, including paragraphs, divs, tables and headings—and any element that has been assigned the property display:block.
Block-level elements all have these parts:
- The content area is sized by the browser to fit the content of this element: text, images, other elements.
- The color of the content area can be set by the background-color property.
- The border area is normally zero-width. It expands to accomodate a border as specified by the border properties, and it can be made wider by setting the padding properties.
- The border area has the background-color except where the border-color appears.
- The margin area defaults to zero size but can be made larger with the margin properties.
- The margin area is always transparent.
Where Next?
Study the list of properties in the CSS reference. Then read examples, such as in the other parts of this document, and in the PP examples on PG. But the best way to learn CSS is to take an HTML document and experiment with it. Try to make something like this:
Is this not hideous?
| CSS Cookbook Topics | |
|---|---|
| Intro | • Styles • Browser Issues • About • Reference |
| Styling | • Basic Text • Heads • Lists • Tables |
| • Block Quotes • TOC and Index • Images • Poetry | |
| • Sidenotes • Drama • Footnotes • Page Numbers | |