Styles (2)

Formatting Text

You’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:

This is the heading

This paragraph is indented one em on the first line; you can see the effect when the words wrap to the second, non-indented line.

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.)

diagram showing box model

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:

Least SpecificMore SpecificMost Specific
border border-top border-top-width
border-top-style
border-top-color
border-right border-right-width
border-right-style
border-right-color
border-bottom border-bottom-width
border-bottom-style
border-bottom-color
border-left border-left-width
border-left-style
border-left-color

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:

padding: 1em 2cm 3px 4pt; padding-top: 1em;
padding-right: 2cm;
padding-bottom: 3px;
padding-left: 4pt;

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 you use an internal stylesheet like the following one, 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;
}

HTML 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 (the name must begin with a letter, and consist of only letters, digits, hyphens, and underscores). Thus, you 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>

You can associate each of these classes with a different style specification in the stylesheet. You do this by giving the element name, a dot (.), and then the class name as the selector.

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;
}

The preceding stylesheet will produce this display:

Danger, Will Robinson!

Incredibly Inexpensive!

Except in New Jersey

<div> and <span>

Elements like <p> or <li> or <em> already have some style attached to them. Paragraphs have extra space above and below them, list items are indented with bullets/markers, and emphasized text shows up as italic. What if you would like to have a completely un-styled block element or a completely un-styled range of inline text, sort of a “blank slate” to which you can add any style you like? Luckily, HTML provides those elements for you. The <div> element is the blank slate block element. All it does is start a new line with no indenting, no extra spacing—no nothing. Similarly, <span> is the blank slate inline element. Text inside a <span> don’t have any extra color, size, weight, italicizing—no nothing. This makes <div> and <span> perfect candidates for targets of a class.

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; }

This is dimmed out and this is highlighted to attract attention.

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, they are 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 highlight">Small highlighted text</div>
<div class="bordered dim fine-print">Bordered dim small text</div>

Highlighted only
Bordered only
Bordered and highlighted text
Small highlighted text
Bordered dim small text

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:

Remember, do not tell anyone your password!

How Computers Really Work

...more text...

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:

Remember, do not tell anyone your password!

How Computers Really Work

...more text...

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.

The style attribute

Note: this topic is not covered in the book, as it is considered bad practice.

Sometimes you will need to apply a style to one element to get things to look exactly the way you would like, and you don’t want to create a new class for it. In such a case, you can add a style attribute to the element. The value of the style attribute contains all the specifications that you would ordinarily put within the { and } of an inline style sheet. For example, let’s say you have a highlighted span (using the previously defined class), but you want one word in it to have a white background and green text. You could do this:

<p class="highlight">This has
<span style="background-color: white; color: green">one</span> normal
word in it.</p>