Lecture 4.(Part2 cont.

)
Presentation: Creating the End Product
Attribute Selection

• An attribute selector consists of an element type name immediately followed by

the attribute refinement in square brackets:

planet[atmosphere]

• This selector matches any <planet> element that has an atmosphere

attribute. For example, it selects <planet atmosphere="poisonous"> and
<planet atmosphere="breathable">, but not <planet>.
• You can leave out the element if you are looking only for the attribute.
• So [atmosphere] matches
<planet atmosphere="dense"> and <moon atmosphere="wispy">.
Attribute Selection

planet[atmosphere="breathable"]

• Adding a value makes the selector even more

specific. This selector matches <planet
atmosphere="breathable">, but it doesn't match
<planet atmosphere="poisonous">.

planet[atmosphere~="sweet"]

• If the attribute's value is a space-separated list of strings, you

can match any one of them by using the operator ~= instead
of the equals sign (=).
• This selector matches <planet atmosphere="breathable
sweet dense"> or <planet atmosphere="foggy sweet">,
but it does not match <planet atmosphere="breathable
stinky">.
Attribute Selection

planet[populace|="barbaric"]
• Similar to the previous version, a selector with the operator
|= matches an item in a hyphen-separated value list as long
as the list begins with the value in the selector. This matches
<planet populace="barbaric-hostile">.

• This kind of selector is often used to distinguish between

language types. The value of the XML attribute xml:lang is
a language identifier, a string that looks like this: en-US. The
two-character code "en" stands for "English" and the code
"US" qualifies that as the United States variant.

• To match a <planet> element with an xml:lang attribute

that specifies English, use the selector
planet[language|="en"]. This selects both en-US and en-
UK.
Attribute Selection
planet[atmosphere="breathable"][populace="friendly"]

Selectors can string together multiple attribute requirements.

They were bound with a logical AND operator. The above
selector matches

<planet atmosphere="breathable" populace="friendly">

but not <planet populace="friendly">.
Attribute Selection

planet:lang(en)

• This selector form is used to match elements with a particular

language specified.
• In XML, the attribute is xml:lang. The attribute values are
matched in the same way as the |= operator: a hyphenated
list matches the value given in the selector.
• The xml:lang attribute is an exception to XML's usual rules
of case-sensitivity.
• So in this example the selector matches <planet
lang="en">, <planet xml:lang="EN-us">, or <planet
lang="en-US">, but not <planet xml:lang="jp">.
#mars

This special form is used to match ID attributes. It matches

<planet id="mars"> or <candy-bar id="mars">, but not
<planet id="venus">.

Only one element in the whole document can have an ID

attribute with a given value, so this rule does not match very
often.

planet.uninhabited

An attribute that is frequently used to designate special

categories of an element for stylesheets is class.

The example above matches <planet class="uninhabited">

but it does not match
<planet class="colony">.
2. Contextual Selection

Selectors can also use contextual information to match elements.

This information includes the element's ancestry (its parent, its
parent's parent, etc.) and siblings.

1. Ancestry

You can specify that an element is a child of another element using

the greater-than symbol (>).

For example:

book > title { font-size:

24pt; } chapter > title {
font-size: 20pt; } title {
font-size: 18pt; }
• The element to select here is <title>. If the <title> appears in
a <book>, then the first rule applies. If it appears within a
<chapter>, the second rule is chosen. If the title appears
somewhere else, the last rule is used.

• The > operator works only when there is one level separating
the two elements.
• To reach an element at an arbitrary depth inside another
element, list them in the selector, separated by spaces. For
example:

table para { color:

green } para {
color: black }
• The first rule matches a <para> that occurs somewhere inside a
<table>, like this:

<table>
<title>A plain ol' table</title>
<tgroup>
<tbody>
<row>
<entry>
<para>Hi! I'm a table cell paragraph.</para>
...

• This is useful whenever need to go far back into the ancestry to

gather information.
• The following rules would provide with up to three levels of nested
lists:
 list { indent: 3em }
list > list { indent: 6em }
list > list > list { indent: 9em }

• An asterisk (also called the universal selector) is a special wildcard

character that can substitute for any element name. It can be
used anywhere in the hierarchy. For example, given this content:

<chapter><title>Classification of Bosses</title>
<sect1><title>Meddling
Types</title>
<sect2>
<title>Micromanagers
</title>
...
• You can match the last two <title> elements with this selector:

chapter * title

• The first <title> is not selected, since the universal selector

requires at least one element to sit between
<chapter> and <title>.
 Position
• To treat the first paragraph of a chapter differently from the rest,
by making it all uppercase perhaps.
• To do this, add a special suffix to the element selector like this:
para:first-child { font-variant: uppercase; }

• para:first-child matches only a <para> that is the first child of

an element. A colon (:) followed by a keyword like first-child is
called a pseudo-class in CSS. There are several other pseudo-
classes to modify the selector.

• Another way to examine the context of an element is to look its

siblings. The sibling selector matches an element immediately
following another. For example:

title + para { text-indent: 0 }

Position

• matches every <para> that follows a <title> and turns off its
initial indent. This works only for elements that are right next to
each other; there may be text in between, but no other elements.

• Select parts of an element's content with pseudo-element

selectors. :first-line applies to the first line of an element.

• This rule transforms the first line of the first <para> of a

<chapter> to all capitals:

chapter > para:first-

child:first-line { text-
transform: uppercase }
Position

• In a similar fashion, :first-letter operates solely on the first

letter in an element's content. This is useful for drop caps and
raised capitals:

body > p:first-

child:first-letter {
font-size: 300%;
font-color: red }
• With the pseudo-classes :before and :after, we can select a
point just before or just after an element. It is for adding
generated text: character data not present in the XML document.
Figure below illustrates the following example:

warning > *:first-

child:before { content:
"WARNING!";
font-weight: bold;
color: red }

Auto-generated text in an admonition object

When Multiple Rules Match

• Any conflicting property settings are resolved by comparing rule

selectors to find the "best" match. Consider this stylesheet:
* {font-family: "ITC
Garamond"} h1 { font-
size: 24pt }
h2 { font-size:
18pt } h1, h2 {
color: blue }

• The <h1> element matches three of these rules. The net effect is
to render it with the font ITC Garamond at 24- point size in the
color blue.
• What if there's a conflict between two or more values for the
same property? For example, there might be another rule in
this stylesheet that says:
h1:first-child {
color: red
}
When Multiple Rules Match

• An <h1> that is the first child of its parent would have conflicting
values for the color property.
• CSS has well-defined rules for resolving such conflicts. The basic
principle is that more specific selectors override more general
selectors. The following list outlines the decision process:

• More attribute selectors and pseudo-classes are stronger

than fewer. This means that para:first- child is more
specific than title + para, and that
*[role="powerful"][class="mighty"] overrides
para:first-child.
When Multiple Rules Match

• More specific genealogical descriptions win over less specific

chains. So chapter > para has precedence over para, but not
over title + para. Pseudo-elements don't count here.
• If the selectors are still in a dead heat, there's a tie-breaking
rule: the one that appears later in the stylesheet wins out.

• Property value conflicts are resolved one property at a time. One

rule might be more specific than another, but set only one
property; other properties may be set by a less specific rule,
even though one of the rule's properties has been overridden.

• So in our earlier example, the first <h1> in an element gets the

color blue, not red.
Properties

• When a rule matches an element, the processor applies the

property declarations to its content.
• Properties are formatting attributes such as font settings and
color.
• There are so many of them—over 120 in CSS2—that we can't
address them all here.
1. Inheriting Properties

• Elements inherit certain properties from their ancestors.

• For example, using an HTML document as an analogy, the <body>

contains all the content elements to put default settings.

• Each of its child has the option to override the defaults if

necessary. In a DocBook document we might place such settings
in the <book> element.

• In Figure below, a <para> inherits some properties from a

<section>, which in turn inherits from an <article>.

• Some of the properties font-size in <section> and font-

family in <para> are overridden in each descendant.
 Element-inheriting properties
Some properties cannot be inherited because it wouldn't make sense. For example, the background-image
property, which causes an image to be loaded and displayed in the background, is not inherited. If every element
did inherit this property, the result would be a complete mess, with every paragraph and inline element trying to
display its own copy of the image in its rectangular area. It looks much better if only one element has this
property and its children don't.
2. Units of Measurement

• Many properties involve some kind of measurement: the width of

a rule, a font size, or a distance to indent.

• Absolute measurements use units that have a predefined size,

such as inches, points, or picas.

• Relative measurements use percentages and fractions of some

variable distance, such as the height of the current font.

• We can measure an absolute length with a ruler because the units

never change.
• Absolute units used in CSS include millimeters (mm), centimeters
(cm), and inches (in), as well as units specific to the world of
print, such as points (pt) and picas (pc).
2. Units of Measurement

• Relative units are unfixed.

• For example, an em is defined as the size of the current font. If
that font happens to be 12 points, then an em is 12 points.
• Another relative unit is ex, defined to be the x-height of a font
(the height of a lowercase "x").
• Relative measurements can also be expressed as percentages.
This type of measurement relies on another element's property
of the same type. For example:
b { font-size: 200% }

• means that the <b> element has a font size that is twice its
parent's.
2. Units of Measurement

• In general, relative measurements are better than absolute.

• Relative units don't have to be rewritten when you adjust the
default properties.
• It's much easier to write a stylesheet for multiple scenarios when
you define the base size in only one place, and everything else is
relative.
3. The display Property

• Most elements fit into one of three categories of formatting:

block, inline, or invisible.
• These designations govern how the content is packaged in the
formatted document:

block

• A block is a rectangular region of text isolated from the

content preceding and following it by spacing.
• It begins on a new line, often after some whitespace, and it
has boundaries (called margins) that keep the text in the
rectangular shape.
• Blocks can contain other, smaller blocks, as well as inlines.
Examples of blocks in traditional documents are paragraphs,
titles, and sections.
3. The display Property

inline
• An inline is content that doesn't interrupt the flow of text in a
block.
• It can set properties that don't affect the flow, such as font-
family and color, but cannot have properties related to
blocks, such as margins and padding.
• Examples of inlines are emphasis, keywords, and hypertext
links.

invisible

• This category is for elements that should not be included in

the formatted document.
• The CSS processor skips over these elements. Examples of
invisible elements are metadata, index terms, and link
anchors.
3. The display Property

• There are other kinds of display objects, such as tables and

certain lists.
• Every element is assigned a display property that tells the CSS
processor how to format it. If display is set to block, the
element begins on its own line.
• If it's set to inline, the element begins on the line that the
previous element or character data finished on. The value none
indicates that the element is invisible.
• This property is inherited in only one situation.
• When an element is declared to be display: none, all its children
inherit that property even if they explicitly override that setting.
This allows you to "turn off" large parts of a document.
4 Properties for Block Elements

• Every block has an invisible box that shapes its content, keeps it a
healthy distance from its neighbors, and defines a canvas on which
to paint.
• Figure below shows all the parts of this box model. Immediately
surrounding the content of the block is a rectangular buffer of
space called the bounding box.
• Its distance from the content is known as padding. The perimeter
of this region, called the boundary, is sometimes displayed as a
rule or border on one, two, three, or all four sides.
• The thickness of these rules is measured outward. Outside the
boundary is another envelope of space, defined by four widths
called margins.
4 Properties for Block Elements

Figure 4.10, The CSS box model

• A block's boundaries hold content while separating the block from sibling blocks. Any
background image or color is confined to the area within the boundary, while text and
nested boxes are confined to an even smaller area, the rectangle determined by boundary
minus padding. If the boundary is not displayed, the padding is often set to zero. Margins
demarcate a rectangular region outside the box that keeps other boxes away.
1. Margins

• A margin is the distance between the bounding box of an element and that of
any neighboring (or containing) element. The four sides of a box have their
own margin property: margin-left, margin-right, margin-top, and margin-
bottom.
• The value can be a length or a percentage of the containing element's width.
• The margin property is shorthand for defining all four sides of the margin. Its
value is a space-separated list containing between one and four lengths or
percentages.
• If only one value is specified, that value applies to all four sides. If there are
two values, the first sets the top and bottom margins and the second sets the
left and right margins.
• If there are three values, the first assigns the top margin, the second assigns
both the left and right margins, and the third assigns the bottom margin.
• Finally, if four values are specified, they correspond to the top, right, bottom,
and left margins, respectively.
1. Margins

• Unspecified margins default to zero. Thus the following rules are equivalent:
para { margin-left: 10em; margin-right:
10em; margin-top: 5% } para { margin: 5%
10em 0 }

• In both cases, the <para> element is defined with left and right margins of 10
em, a top margin of 5% of the containing element's size in the vertical
dimension (i.e., its height), and no bottom margin.
• Negative values are acceptable. The result of a negative margin is to push the
bounding box outside its container's box by that amount.
• To create the effect of text spilling outside a colored region, we use this
stylesheet for an HTML file:
body { background-color:
silver } p { right-margin:
-15% }
2. Borders

• It's often appealing to surround an element with a rectangular

outline to make it stand out. With the border property, we can
create many kinds of effects, from dotted lines encircling a block
to rules on any side.

• It takes three parameters to define the border you want. The

width can be an absolute or relative measurement, or one of
three preset values:

thin
medium (the default)
thick
2. Borders

• The next parameter is style. Eight styles are provided in CSS2:

solid dashed
dotted groove
ridge double
inset outset

• The final parameter is color. Put all the parameters together

in a space-separated list, in any order. Some examples:

border: thin solid

green; border: red
groove thick; border:
inset blue 12pt;
3 Padding

• The padding property lines the inside of the border with space to
compact the text and keep the border from colliding into it.
• The value of this property is a space-separated list of between one
and four length measurements.
• The application of lengths to sides is the same as it is with the
margin property.
Let's expand on our previous warning example by giving it a border,
warning { display: block;
border: thick solid gray;
}
warning:before {
content: "WARNING!";
font-weight: bold;
color: red }
warning
Figure 4.11, A warning inside a border
4 Alignment and indentation

• text-align is a property that defines the alignment or

justification of lines in a paragraph. The following values are
supported:

left
Align text with the left border (ragged right).
right
Align text with the right border (ragged left).
center
Center each line within the block (ragged left and right).
justify
Expand each line to reach both left and right borders of the
block.
4 Alignment and indentation

• Left justification is used by default in most CSS processors.

left and right are absolute and independent of text
direction.
• The text-indent property indents the first line of a block.
• A positive or negative absolute length can be specified, or the
indent can be given as a percentage of the width of the block.
5. Text Properties

• This section lists some properties for controlling how character

data looks and behaves, such as font types, font styles, and
color.
1. Font family
• A typeface has several parameters that control its appearance,
such as size, weight, and style. The most important is the font
family (e.g., Courier, Helvetica, Times).
• Each family comes in different styles and weights, such as italic,
bold, and heavy.
• The font-family property is declared with a comma-separated
list of font preferences, starting with the most specific and
desirable, and finishing with the most generic. This list provides
a series of alternatives in case the user agent doesn't have
access to the specific font we request. Some generic font classes
are:
serif
Fonts that have decorative appendages, or serifs, fit in this
category. Some common serif fonts include Palatino, Times,
and Garamond.
sans-serif
These fonts, lacking serifs, are relatively plain in comparison
to the serif fonts. Helvetica and Avant- Garde are in this
group.
monospace
These are fonts in which each character occupies the same
amount of space, unlike most fonts, where letters are packed
together in varying widths. This font type is typically used to
render computer programs, teletype simulations, and ASCII
art.11 Examples of monospace fonts are Courier and Monaco.
cursive
Fonts that connect characters in a simulation of calligraphy
or handwriting fall in this group. Such typefaces are often
used on wedding invitations and diplomas. Since this is not
a standard font category on most systems, you should use
it rarely, if ever.
fantasy

This collects all the oddball fonts like Comic Strip, Ransom
Note, and Wild West.

Examples of these fonts are shown in Figure below.

3. Line height and font size adjustment

font-size determines the size of characters being displayed.

The line-height property affects the total height of the font plus
the whitespace above it.

If the line-height is greater than the font-size, the difference is

made up by adding space evenly to the top and bottom of each line.
This makes the block look either looser or more condensed.

In the following example, we have specified single-space, double-

space, and one-and-one-half space between lines:

para1 { line-height: 1 }
para2 { line-height: 2 }
para3 { line-height: 1.5
}
4. Font style and weight

Font families contain variants that allow an author to add emphasis

or meaning to parts of the text. There are two kinds of variants:
font style (italic, oblique) and font weight (light, bold).

The font-style property has four possible settings:

normal
The traditional, upright version of the font.

italic
An italic version of the font, if available, or the oblique version.

oblique
The oblique version, if available, or the normal font with a slight
slant effect.
4. Font style and weight

inherit
Whatever setting the parent element has.

The CSS specification is not clear on the effect of italic on languages

without a tradition of italics; as a result, it is probably best to specify
an alternate typeface for other languages:

em { font-style: italic }
em:lang(ja) { font-family:
...;
font-style: normal }
• The font-weight property controls how bold or light a font is. The
following keyword values are defined:

light
A light and airy version of the font, if available. Otherwise,
the user's system may generate one automatically.

normal
The standard variant of the font.

bold
A darker, heavier version of the font, if available. Otherwise,
the user's system may generate one automatically.
• There are also relative keywords, which decrease or increase the
weight with respect to the parent's property:

lighter
Decreases the weight by one increment.

bolder
Increases the weight by one increment.

• Nine weight increments are available, so lighter and bolder can

fine-tune weight by 1/9 of the range.
• Alternately, a numeric value can be used, ranging from 100 to 900
(in steps of 100).
Figure 4.14 shows some font styles and weights.

Figure 4.14, Font styles and weights

5 Color

• Color is an important feature for text. Text has two color

properties: color for the foreground, and background-color for
the background.

• Acolor can be specified using a three- number code where the

numbers correspond to values for red, green, and blue (RGB).

• These numbers can be percentages, integers from 0-255, or

hexadecimal values from #000000 to #ffffff. Some examples
are given in Table 4.1.
 Table 4.1, Color Selections
Preset Name Percentages Integers Hexadecimal
Aqua rgb(0%,65%,65%) rgb(0,160,160) #00a0a0
black rgb(0%,0%,0%) rgb(0,0,0) #000000
blue rgb(0%,32%,100%) rgb(0,80,255) #0050ff
fuchsia rgb(100%,0%,65%) rgb(255,0,160) #ff00a0
gray rgb(65%,65%,65%) rgb(160,160,160) #a0a0a0
green rgb(0%,100%,0%) rgb(0,255,0) #00ff00
lime rgb(0%,65%,0%) rgb(0,160,0) #00a000
maroon rgb(70%,0%,32%) rgb(176,0,80) #b00050
navy rgb(0%,0%,65%) rgb(0,0,160) #0000a0
olive rgb(65%,65%,0%) rgb(160,160,0) #a0a000
purple rgb(65%,0%,65%) rgb(160,0,160) #a000a0
Red rgb(100%,0%,32%) rgb(255,0,80) #ff0050
Silver rgb(90%,90%,90%) rgb(225,225,255) #d0d0d0
Teal rgb(0%,65%,100%) rgb(0,160,255) #00a0ff
White rgb(100%,100%,100%)rgb(255,255,255) #ffffff
yellow rgb(100%,100%,0%) rgb(255,255,0) #ffff00
6 Generated Text

• Forexample where a warning sidebar was created with an

automatically generated "WARNING!" header. The general form
of a text- generating property is:
content: string1 string2 ...
• Each string is either a quoted value (like "WARNING!") or a
function that creates text.
• Some of these text-creating functions are:
url(locator)
• This function opens a file at a URL given by locator and
inserts the contents of the file at that point in the text. This is
useful for including boilerplate text.
attr(attname)
• This function inserts the value of an attribute with name
attname.
counter(name)
• This useful function reads the value of an internal counter
with the label name and converts it to text.
7 Counters

• Counters in CSS are variables hold the numeric values.

• They are used for chapter numbers, ordered lists, and anything else that needs
to be labeled with a number.
• To use a counter, we have to give it a name and tell CSS when to increment it
using the property counter-increment.
• We can get the value of the counter any time with the counter() function.
• For example:
chapter { counter-increment: chapnum }
chapter > title:before { content: "Chapter " counter(chapnum) ". " }
• Here, we create a counter called chapnum and increment it every time the CSS
processor sees a new <chapter>. The <title> element is rendered with this
number just before it, like this:
Chapter 3. Sonic the Hedgehog

• counter-reset: It sets the counter value back to zero when the element is
processed.
1. Counters

numberedlist { counter-reset:
list_item_number; } listitem {
counter-increment:
list_item_number; }
listitem:before { content: counter(list_item_number) ". ";
}
Now, each list will start counting
at 1: First list:
1.Alpha
2.Bravo
3.Charlie
4.Delta
Second list:
1.Fee
2.Fi
3.Fo
4.Fum
 Quiz-6

Q1: How can we effectively apply CSS to an XHTML document

while avoiding inline styles, ensuring better scalability and
maintainability, and utilizing <div> elements with class attributes
to enhance the document’s structure and styling?

Q2: create a stylesheet for given XHTML Document

A Practical Example

• Before creating the stylesheet, let's make some changes to the XHTML file from
previous slide to help it take full advantage of CSS's capabilities. First, we'll add
some <div> elements to act as section containers. Since HTML suffers from a
lack of block containers, <div> was added to the specification as a general-
purpose division element. However, since it's so generic, we'll have to use a
class attribute with it to differentiate its roles. So we will also be adding class
attributes to other elements, increasing the number of things that can be
assigned unique styles.
Example 4.1, The Revised XHTML Document
<?xml version="1.0"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Evil Science Institute</title>
<link rel="stylesheet" href="style1.css"/>
</head>
<body>
<h1>The Evil Science Institute</h1>
<p class="bigp"><em>Welcome</em> to Dr. Indigo
Riceway's <span class="inst">Institute for
Evil Science!</span></p>
<div class="toc">
<h2>Table of Contents</h2>
<ol>
<li><a href="#staff">Meet Our Staff</a></li>
<li><a href="#courses">Exciting Courses</a></li>
<li><a href="#research">Groundbreaking Research</a></li>
<li><a href="#contact">Contact Us</a></li>
</ol>
Example 4.1, The Revised XHTML Document
<a name="staff" />
<div class="section" id="staff">
<h2>Meet Our Staff</h2>
<dl>
<dt><span class="person"><a
href="riceway.html">Dr. Indigo
Riceway</a></span></dt>
<dd>
<img src="images/riceway.gif" width="60"
height="80" /> Founder of the <span
class="inst">Institute</span>, inventor of the
moon magnet and the metal-eating termite,
three-time winner of Most Evil Genius award.
Teaches Death Rays 101, Physics, Astronomy,
and Criminal Schemes.
</dd>
<dt><span class="person"><a
href="grzinsky.html">Dr. Ruth "Ruthless"
Grzinsky</a></span></dt>
<dd>
Example 4.1, The Revised XHTML Document
<img src="images/grzinsky.gif" width="60"
height="80" /> Mastermind of the Fort Knox
nano-robot heist of 2002.
Teaches Computer Science, Nanotechnology, and
Foiling Security Systems.
</dd>
<dt><span class="person"><a
href="zucav.html">Dr. Sebastian
Zucav</a></span></dt>
<dd>
<img src="images/zucav.gif" width="60"
height="80" /> A man of supreme mystery
and devastating intellect.
Teaches Chemistry, Poisons, Explosives, Gambling, and Economics
of Extortion.
</dd>
</dl>
</div>
<a name="courses" />
<div class="section" id="courses">
<h2>Exciting Courses</h2>
<p>Choose from such intriguing subjects as...</p>
<ul>
<li>Training Cobras to Kill</li>
<li>Care and Feeding of Mutant Beasts</li>
<li>Superheros and Their Weaknesses</li>
<li>The Wonderful World of Money</li>
<li>Hijacking: From Studebakers to Supertankers</li>
</ul>
</div>
<a name="research" />
<div class="section" id="research">
<h2>Groundbreaking Research</h2>
<p>Indigo's <span class="inst">Evil Institute</span> is a world-
class research facility. Ongoing projects include:</p>
<h3 class="projectname">Blot Out The Sky</h3>
<p class="projdesc">A diabolical scheme to fill the sky with garish
neon advertisements unless the governments of the world agree to
pay us one hundred billion dollars. <span class="laughter">Mha ha
ha ha ha!</span></p>
<h3 class="projectname">Killer Pigeons</h3>
<p class="projdesc">A merciless plan to mutate and train pigeons to
 become efficient assassins, whereby we can command <em>huge
bounties</em> by blackmailing the public not to set them loose.
<span class="laughter">Mha ha ha ha ha!</span></p>
<h3 class="projectname">Horror From Below</h3>
<p class="projdesc">A sinister plot so horrendous and terrifying,
we dare not reveal it to any but 3rd year students and above. We
shall only say that it will be the most evil of our projects to
date! <span class="laughter">Mha ha ha ha ha!</span></p>
</div>
<a name="contact" />
<div class="section" id="contact">
<h2>Contact Us</h2>
<p>If you think you have what it takes to be an Evil Scientist,
including unbounded intellect, inhumane cruelty and a sincere
loathing of your fellow man, contact us for an application. Send
a self-addressed, stamped envelope to:
</p>
<address>The Evil Science Institute, Office of
Admissions,
10 Clover Lane,
Death Island,
Mine Infested Waters off the Coast of Sri Lanka</address>
</div>
Example 4.2, A Stylesheet for an XHTML Document

/*
SECTIONS
*/ (1)
body { (2)
color: black;
background-color: silver;
}

.section { (3) margin: .5em; padding: .5em;

border: thick solid gray; background-color: white;
}
.toc {
margin: .5em; padding: .5em;
border: thick solid gray; background-color: white;
}
/*
HEADS
*/
Example 4.2, A Stylesheet for an XHTML Document
body > h1 { (4) color: black; font-size: 3em;
font-family: sans-serif;
}
.section > h2 { color: green; font-size: 2em;
}

.toc > h2 { color: blue; font-size: 2em;

}

.projectname { color: navy; font-size: 1.5em;

font-style: italic;
font-family: sans-serif;
}
/*
BLOCKS
*/
p {
font-size: 1.2em;
}
p.bigp {
font-size: 1.5em;
}
Example 4.2, A Stylesheet for an XHTML Document

p.projdesc { margin: .25em;

}
address { color: black;
white-space: normal; font-size: 2em;
font-family: monospace;
}

div li { (5)
font-size: 1.4em;
font-family: sans-serif;
}
dd {
color: black; font-size: 1.2em; margin: 1em;
}
*/ ------INLINES -----*/

em {
font-style: italic;
font-weight: bold;
}
.laughter { color:
purple;
font-style: italic;
font-weight: bold;
}
.person {
font-weight: bold;
}
.inst {
font-style: italic;
}
(1)Comments can be helpful in making stylesheets more readable.

(2)The <body> element is a good place to put declarations that are

general to the whole document.

(3)The selector can .section match any element that has the
attribute class="section". Here, we use it only with <div>
elements, so it's okay to leave out the element name.

(4)Notice the hierarchical context selector using the greater-than

symbol (>). Heads and titles are often formatted differently
depending on where they appear.

(5)This is another kind of context selector, one where the two space-
separated elements must lie in the same ancestral chain.