Advanced Styles (2)

Formatting Text

We’ve already seen how to use font-weight, font-style, font-family, and color to specify how characters should appear. You should look at the definitions for text-indent, text-align, and text-decoration. Thus, a style to have centered, bold, underlined text in a <h3>, and a one-em indent on every paragraph would look like this:

h3 {
   text-align: center;
   text-decoration: underline;
   font-weight: bold;
}

p {
   text-indent: 1em;
}

Here's what it looks like:

The Box Model

All of your content on a page consists of “boxes” with padding, borders, and margins as shown in the following diagram. The box contains a transparent margin; inside the margin is a visible border. Inside the border is padding, and at the very center is your content (text, images, etc.)

Note that the margin is not the same as text-indent, which affects only the first line of the content, and is inside the padding.

Setting Borders

To set all four borders, you need to set the border-style, border-color, and border-width. If you do not set a border-style explicitly, you will not see anything, because the default style is none. The border styles are: dotted, dashed, double, groove, ridge, inset, outset, and solid. The following examples sets <h1> elements to have a three-pixel solid green border.

h1 {
    border-style: solid;
    border-color: green;
    border-width: 3px;
}

It is also possible to use a shorthand form to set these three presentation aspects at once. You may put the values in any order; the following two specifiers are the same as the one above:

h1 { border: 3px solid green; }
h1 { border: solid green 3px; }

You may also specify individual sides with the shorthand form; the following example is shown with the borders that it specifies:

div {
    border-top: 1px solid black;
    border-right: 4px groove blue;
    border-bottom: 3px dashed red;
    border-left: 2px dotted green;
}

If you need even greater control, you can set the individual styles, colors, and widths for each side. The more specific presentation attributes override the more general ones. In the next example, the border is set to 3 pixel solid blue. We override the border-top (more specific) by setting it to 4 pixel double red. We override the border-left-width (even more specific) by setting it to 5 pixels:

div {
    border: 3px solid blue;
    border-top: 4px double red;
    border-left-width: 5px;
}

Here is a table showing levels of specificity:

Setting Margins and Padding

Similarly, you can set the margin and padding widths in a variety of ways, and a more specific setting will override a less specific setting. (Margins and padding are invisible, so they don’t have a style or color.)

margin: 3px;            /* 3 pixels on all sides */
margin-top: 1em;        /* 1 em on the top */
margin-right: 0.25cm;   /* one-fourth centimeter at right */
margin-bottom: 0.1in;   /* one-tenth inch at bottom */
margin-left: 9pt;       /* 9 points at the left */

There is a shorthand for setting all four margins (or paddings) to different values. You specify a list of four values, separated by whitespace. These will be the top, right, bottom, and left values. The order goes clockwise from the top. Thus, the following are equivalent:

Multiple Selectors

If you want all <h1>, <h2>, and <h3> elements to be italic and teal, you could write this:

h1 { color: teal; font-style: italic; }
h2 { color: teal; font-style: italic; }
h3 { color: teal; font-style: italic; }

Or you could make your life easier by setting them all at once, separating the selectors with commas:

h1, h2, h3 { color: teal; font-style: italic; }

Contextual Selectors

Consider this scenario: you want <strong> elements to stand out, so you make them red. You also want <h3> elements to stand out, and you make them red. Here’s the stylesheet, and some text:

<style type="text/css">
   strong { color: red; }
   h3     { color: red; }
</style>

<p>Remember, do <strong>not</strong> tell anyone your password!</p>

<h3>How Computers <strong>Really</strong> Work</h3>
<p>...more text...</p>

And here is what it looks like:

When the <strong> is inside a paragraph, it stands out nicely. However, if it is inside an <h3>, it doesn’t stand out at all, because the heading is automatically bold, and also red. What we would like is for <strong> to look different depending upon its context, whether it is in a paragraph or a heading. Here is how we specify it:

strong { color: red; }
h3 { color: red; }
h3 strong { color: green; }

The last line says that <strong> nested within <h3> is green. The element names are separated by whitespace. Here is the result:

Please note that h3 strong is very different from h3, strong. The first one describes <strong> nested within <h3> The second one says that both <h3> and <strong> should have the same presentation.

Classes

Consider the following scenario: You are writing an XHTML document that describes an instruction manual for a product. Of the thirty paragraphs in the document, three have warnings to the customer. You want them all to show up in bold red with a yellow background and a red border, like this:

Do not operate the Frob-O-Matic underwater or outdoors in a rainstorm.

If we use an internal stylesheet like this, then all of the paragraphs will show up as warnings.

p {
    background-color: #ffffcc; color: red;
    font-weight: bold;
    border: 1px solid red;
    padding: 0.5em;
    margin-left: 1em; margin-right: 1em;
}

Another choice is to copy all of that information into a style attribute for each of the warning paragraphs. That’s a lot of work, and it makes it hard to update our site consistently.

XHTML lets you define a subclass of an element by adding the class attribute to the starting tag. You can make up any name you want for the class. Thus, we could have several different types of paragraphs in a document:

<p class="warning">Danger, Will Robinson!</p>
<p class="feature">Incredibly Inexpensive!</p>
<p class="fine-print">Except in New Jersey</p>

We can associate each of these classes with a different style specification in the stylesheet:

p.warning {
    background-color: #ffffcc; color: red;
    font-weight: bold;
    border: 1px solid red;
    padding: 0.5em;
    margin-left: 1em; margin-right: 1em;
}

p.feature {
    color: green;
    font-weight: bold; font-style: italic;
}

p.fine-print {
    font-size: 75%;
    text-align: center;
}

Which will produce this display:

Generic Classes

Let’s say you want two classes of <span>: one for highlighted text, and one for dimmed-out text. You might define this:

span.dim { color: #ccc; } /* light gray */

span.highlight { background-color: yellow; }

Then, you decide that you might want an entire paragraph, or a heading, or list item, or a <div> to be dimmed or highlighted. You would, in short, like to be able to say class="dim" or class="highlight" on any element. A class that applies to any element is called a generic class or anonymous class. To make a class generic, just omit the element name. Your selector will then start with a dot:

.dim { color: #ccc; } /* light gray */

.highlight { background-color: yellow; }

“Mix and Match” Classes

Let’s say you have the following classes (for ease of use, we will make them all generic:

div { margin: 0.25em; }
.dim { color: #ccc; }
.highlight { background-color: yellow; }
.fine-print { font-size: 75%; text-align: center; }
.bordered { border: 1px solid black; padding: 0.25em; }

If you want to have something that is both highlighted and bordered, you don't have to create another class that combines the two; instead, just put both class names in the class attribute, separated by whitespace. In fact, you can put in as many class names as you want, in any order. Here are some examples, showing the HTML and the result:

<div class="highlight">Highlighted only</div>
<div class="bordered">Bordered only</div>
<div class="highlight bordered">Bordered and highlighted text</div>
<div class="fine-print dim">Small highlighted text</div>
<div class="bordered dim fine-print">Bordered dim small text</div>