Notes 8

Notes 8
— print (last updated: Jul 6, 2009) — print

Selectors within selectors

The CSS style rules give us the capability of applying a rule, defined by a selector, only within the occurrence of another selector. For example, if we define the rule:

div.m  h3  { text-align: right; }

then this rule applies to all h3 elements within the start and end tags:

<div class="m">

  <h3> ... </h3>

</div>

You have to be careful not to confuse this notation with the following which has a similar appearance:

div.m, h3  { text-align: right; }

which has the effect described in the previous section.

Example in lists

A particularly useful application of a style rule within a selector is to set the top and bottom margins for list items. For example, consider this list:

Here is my list
<ul>
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
<li>DDDDDD</li>
<li>EEEEEE</li>
<li>FFFFFF</li>
</ul>

which has the appearance:

Here is my list

AAAAAA
BBBBBB
CCCCCC
DDDDDD
EEEEEE
FFFFFF

Suppose we want to set wider margins on the li elements in this particular list, for example set margin-top and margin-bottom to be 20px. If we create a rule:

li { margin-top: 20px; margin-bottom: 20px; }

then all li elements in the entire document would be affected. We can avoid such general behavior by creating the rule:

ul.big  li { margin-top: 20px; margin-bottom: 20px; }

and then rewrite the list as:

Here is my list
<ul class="big">
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
<li>DDDDDD</li>
<li>EEEEEE</li>
<li>FFFFFF</li>
</ul>

which has the desired behavior:

Here is my list

AAAAAA
BBBBBB
CCCCCC
DDDDDD
EEEEEE
FFFFFF

Table-related style properties

Many of the style properties can apply to tables and replace the table attributes:

padding: apply it to the cells; this is more general than cellpadding
width: apply to the table and/or cells
border: can replace frame and/or rules; we'll see an example of this in the next set of notes
text-align: replace the align attribute
vertical-align: replace the valign attribute

For example, using the table from Notes 4:

1990	2000	type
5.31	4.2	percent increase
$30,333	$46,576	hardware and software

If we set

<table class="special" summary="" border="1">

in conjunction with the rules:

table.special {
  width: 400px;
}
table.special th {
  text-align: left;
}
table.special td {
  padding: 0px 10px 0px 10px;
  vertical-align: bottom;
}

we get

1990	2000	type
5.31	4.2	percent increase
$30,333	$46,576	hardware and software

External stylesheets

Suppose that I want to apply a set of style rules to multiple documents in my website. Instead of having to embed these into style sections of multiple documents, I can have the documents access the rules as an external file, called a stylesheet. A stylesheet is simply a file consisting of style rules only. Although not enforced, stylesheets conventionally use the .css extension.

A stylesheet can be accessed within an HTML document either by using the link element or by use of an @import statement in the beginning of the style section. For example, suppose the HTML file mydoc.html wants to import the rules in the stylesheet mystyle.css. Assuming that the files are at the same directory level, they would appear like this:

mydoc.html		mystyle.css
<html> <head> <title></title> <link rel="stylesheet" href="mystyle.css" /> <style> /* other local style rules / </style> </head> or <html> <head> <title></title> <style> @import url(mystyle.css); / other local style rules */ </style> </head>		h2 { text-align:center; } h3 { color:red; }

mydoc.html

mystyle.css

<html>
<head>
<title></title>
<link rel="stylesheet" 
      href="mystyle.css" />
<style>
/* other local style rules */
</style>
</head>

<html>
<head>
<title></title>
<style>
@import url(mystyle.css);
/* other local style rules */
</style>
</head>

h2 { text-align:center; }
h3 { color:red; }

Three ways to deliver style properties

Style properties can be delivered to an HTML document in one of three ways:

by using inline style properties within individual elements using the style attribute
by using embedded style rules within document head using the style element
by linking to or importing an external style sheet

This multiple-delivery mechanism is key to the notion of cascading style sheets. In Notes 8 we discussed how conflicting applicable properties are resolved.

Generally, an external stylesheet is preferred over embedded style rules for these reasons:

a style sheet can be shared across a number of documents and sites.
a style property can be changed in mulitiple HTML documents without without having to edit any of them.

Creating a style rule and placing it into an external stylesheet is usually motivated by a "bottom-up" construction according to these steps:

You first create a style change to a specific element through an inline style property setting via the style attribute.
Later, you discover that you would like to apply this style change in more than one place and so you make an embedded style rule and apply the rule through the class attribute.
Still later, you discover that this style rule could be applied in multiple documents and so you place this rule into a external stylesheet which is linked to or imported into your document.

Measurement Units

The most basic unit of measure is the pixel. Pixels are considered a relative measurement unit because the actual size will depend on the display resolution. Another relative unit that we've used is percent (%). In contrast to these and other relative units are absolute units which will be equal under all display situations.

Absolute units are especially useful for printing on standard-size paper. Generally you should avoid very large absolute sizes of objects because they may not fit in the display. Keep in mind that you may want your web site to be viewable on a hand-held device!

Absolute units

in inches

cm centimeters

mm millimeters

pt point = 1/72 of an inch

pc pica = 12 pt

Relative units

px pixel size (on display monitor)

% percentage relative to base font

em width of capital "M" in current font

ex height of lower case "x" in current font

If no unit is given the default is pixels (px).

Font Style Properties

The primary CSS font properties are these:

font-family: a single font, or a list of fonts
font-size: any measurement unit
font-weight: normal, bold
font-style: normal, italic, oblique
font-variant: normal, small-caps

The font-family property

This property allows you to choose a font to be used for your choice of HTML elements. Generally it is better to choose one or two fonts and use them consistently throughout a web site in order to present a certain continuity to the user. Keep in mind that if you choose some unusual font a browser may not have it and will print a default font. If you're trying to create some artistic effect by using many fonts, then it's better to create a graphical image.

The font-family property selects the font. This can be a single font or a comma-separated list of fonts in case a system doesn't support the first choices. Examples of common fonts used are Times, Courier, Helvetica, Arial, Verdana. It's also possible to use generic fonts such as Monospace, Serif, Sans-Serif. Here are some examples:

<div style="font-family: Times">
   Times: The quick brown fox jumps over the lazy dog.</div>

<div style="font-family: Arial">
   Arial: The quick brown fox jumps over the lazy dogs.</div>

<div style="font-family: Verdana">
   Verdana: The quick brown fox jumps over the lazy dog.</div>

<div style="font-family: Serif">
   Serif: The quick brown fox jumps over the lazy dog.</div>

<div style="font-family: Sans-serif">
   Sans-serif: The quick brown fox jumps over the lazy dog.</div>

<div style="font-family: Monospace">
   Monospace: The quick brown fox jumps over the lazy dog.</div>

and here is the result:

Times: The quick brown fox jumps over the lazy dog.

Arial: The quick brown fox jumps over the lazy dog.

Verdana: The quick brown fox jumps over the lazy dog.

Serif: The quick brown fox jumps over the lazy dog.

Sans-serif: The quick brown fox jumps over the lazy dog.

Monospace: The quick brown fox jumps over the lazy dog.

As mentioned above, it is common to allow multiple font choices, separated by commas. The system tries to satisfy the choices in the order presented and, if none exist, it uses the system default font. For example, although the verdana font is common on Microsoft platforms, it is not so on Linux. Thus it would be better to make a font choice like this:

font-family: verdana, sans-serif;

so that sans-serif could be used as a fallback in case verdana isn't present.

The font-size property

The value of the font-size property can be any valid measurement unit. You can also use these built-in named sizes:

xx-small, x-small, small, medium, large, x-large, xx-large

as in this example

 <div style="font-size: xx-small">using font-size: xx-small </div>
 <div style="font-size: x-small">using font-size: x-small </div>
 <div style="font-size: small">using font-size: small </div>
 <div style="font-size: medium">using font-size: medim </div>
 <div style="font-size: large">using font-size: large </div>
 <div style="font-size: x-large">using font-size: x-large </div>
 <div style="font-size: xx-large">using font-size: xx-large </div>

which looks like this:

using font-size: xx-small

using font-size: x-small

using font-size: small

using font-size: medim

using font-size: large

using font-size: x-large

using font-size: xx-large

Other common usages

Other common usages are to give replacements for bold and italic. For example, replace

<b><i>a special section of text</i></b>

by using the style rule:

.special {
  font-weight:bold;
  font-style:italic;
}

applied to

<span class="special">a special section of text</span>

Although the former rendition is simpler, the latter has the advantage of generality.

Property Inheritance

An HTML documents presents the elements in a heirarchical fashion. Normally we think of the body element as the top of the heirarchy. In this heirarchy a style property of a parent element is often used, or, inherited by the child element. In some cases this is not so. Here is an illustrative example:

<div style="color:red; background-color:yellow; font-size:x-large">
Outside child elements
<table border="1">
<tr><td>Inside table</td></tr>
</table>
<p>Inside paragraph</p> 
</div>

which looks like this:

Outside child elements

Inside table

Inside paragraph

The div element is considered to be the parent of the enclosed table and p elements. We see that of the three style properties: color, background-color and font-size, only background-color is inherited by the table element. In contrast the p element inherits all properties.

Style property conflicts

A style property can be delivered to an element in a number of different ways:

inherited from the parent element
applied by an element-only rule (i.e., no class name)
applied by a class-only rule (i.e., no specific element)
applied by an element-class rule (i.e. element.class_name)
applied by an inline style property (i.e., through the style attribute)

Here we illustrate some points about how a property delivered at one level can be overriden by another.

Inline overrides rule

An inline style property (delivered through the style attribute) always overrides a property from a style rule. For example, if we use the style rules:

h3 { text-align:center; color: red; }
div.big { width: 200; height: 200; padding: 10px; margin: 10px; }

Then the following element:

<h3 style="color:green">Some header</h3>

retains the center text alignment, but sets the foreground color to green instead of red. Similarly the following element:

<div class="big" style="margin:0px">Some block</div>

retains all the properties of div.big except for the margin being reset to 0.

Later overrides earlier

If two rules are of the same type (element-only, class-only, element-class), the properties from the later rule override the earlier one. For example, if we use the style rules:

h2 { color: red; font-family: monospace; }
h2 { color: magenta; }

then the following h2 element

<h2>Testing</h2>

retains the font-family property set be the earlier one, but the color will be magenta, not red.

Normally this situation occurs when the earlier rule is introduced through an external style sheet and is overridden in the particular document.

Class rule overrides element rule

For example, if we use the style rules:

.x { color: red; }
h2 { color: magenta; }

Then the following h2 element will have color red, not magenta:

<h2 class="x">Testing</h2>

despite the fact that the h2 rule is later.

Element-class rule overrides class-only rule

For example, if we use the style rules:

h2.x { color: blue; }
.x { color: red; }

Then the following h2 element will have color blue, not red:

<h2 class="x">Testing</h2>

despite the fact that the ".x" rule is later.

Aligning block elements

The text-align style property is intended for aligning text or inline content (images as well) within a block element. It is not meant to apply to aligning a block elements within another block elements. Below we explore a common situation of trying to center a table within the body of a document.

Deprecated centering

The easiest ways to do centering are, unfortunately, deprecated. They involve the center element and the align attribute (the align attribute is deprecated for usage other than internal table elements: tr, td, th, tbody). Here are the two usages:

<center>
<table border="1">
<tr><td>table<br />in a center element</td></tr>
</table>
</center>

table
in a center element

<table align="center" border="1">
<tr><td>table<br />with align="center"</td></tr>
</table>

table
with align="center"

Using style properties only

Unfortunately, using style properties alone to create centering of block elements is tricky.

Although the text-align property is not meant to be applied to aligning block elements, this code will center the table in Internet Explorer but not Firefox:

<div style="text-align:center" >
<table border="1">
<tr><td>
center this table<br />
in div with text-align:center
</td></tr>
</table>
</div>

center this table
in div with text-align:center

In contrast, the following setting will work in Firefox but not Internet Explorer:

<table style="margin:auto" border="1">
<tr><td>
center this table<br />
with margin:auto style setting
</td></tr>
</table>

center this table
with margin:auto style setting

And so, at the cost of simplicity, we achieve CSS nirvana with respect to block centering by combining the above two half-baked solutions:

<div style="text-align:center" >
<table style="margin:auto" border="1" >
<tr><td>
center this table <br />
with margin:auto style setting<br />
in div with text-align:center
</td></tr>
</table>
</div>

center this table
with margin:auto style setting
in div with text-align:center

Note that the following is not at all what we want here since it centers the text in the table cells, not centering the table:

<table style="text-align:center" border="1">
<tr><td>
table <br />
with text-align:center style setting
</td></tr>
</table>

table
with text-align:center style setting

Using the center element

Consider the following example:

<center>
<div style="background-color:yellow; width:200px;">
Here is some text which I want to keep left-aligned.
</div>
</center>

which looks like this:

Here is some text which I want to keep left-aligned.

When I center the div, unlike the case of the table, the inner text is inadvertently centered as well. In order to correct this behavior, I must explicitly set the text-align property in the div:

<center>
<div style="text-align:left; background-color:yellow; width:200px;">
Here is some text which I want to keep left-aligned.
</div>
</center>

getting the fix:

Here is some text which I want to keep left-aligned.

Notes 8 — print (last updated: Jul 6, 2009) — print

Selectors within selectors

Example in lists

Table-related style properties

External stylesheets

Three ways to deliver style properties

Measurement Units

Font Style Properties

The font-family property

The font-size property

Other common usages

Property Inheritance

Style property conflicts

Inline overrides rule

Later overrides earlier

Class rule overrides element rule

Element-class rule overrides class-only rule

Aligning block elements

Deprecated centering

Using style properties only

Using the center element

Notes 8
— print (last updated: Jul 6, 2009) — print