shown. Many design ers prefer pixels because it is easy to align objects whose lengths
are expressed in pixels and because everything that is a pixel or a m ultiple of a p ixel
wide is guaranteed to look sharp. Apart from that, a pixel in CSS is considered by
some to be an absolute value measuring approximately 1/100 of an inch (0.25 mm).
For example, to specify the font size of 18 pixels for paragraphs, you declare:
p {
font-size: 18px;
}
Incidenta lly, if you do not specify a font size, the default base font size in most
browsers is 16 px. The base font size is the o ne used for normal text, like paragraphs.
Don’t rely on a browser’s default settings like that, though. To stay on the safe side,
it’s a lways a goo d idea to set all sizes by yourself.
3.7 Homework
Professor: For homework, I have prepa red fo r you the following HTML documen t:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>English Fairy Tales by Joseph Jacobs</title>
<link href="/styles/fairytales.css" rel="stylesheet">
</head>
<body>
<article>
<h1>English Fairy Tales by Joseph Jacobs</h1>
<h2>The Rose-Tree</h2>
<p>
There was once upon a time a good man who had two children: a
girl by a first wife, and a boy by the second. The girl was
as white as milk, and her lips were like cherries. Her hair
was like golden silk, and it hung to the ground. Her brother
loved her dearly, but her wicked stepmother hated her.
<q>Child,</q> said the stepmother one day, <q>go to the
grocer’s shop and buy me a pound of candles.</q> She gave her
the money; and the little girl went, bought the candles, and
started on her return. There was a stile to cross. She put
down the candles whilst she got over the stile. Up came a dog
and ran off with the candles.
</p>
<p>
She went back to the grocer’s, and she got a second bunch.
She came to the stile, set down the candles, and proceeded to
climb over. Up came the dog and ran off with the candles.
</p>
48 Meeting 3. Presentation
<p>
She went again to the grocer’s, and she got a third bunch;
and just the same happened. Then she came to her stepmother
crying, for she had spent all the money and had lost three
bunches of candles.
</p>
<p><a href="#">Continue...</a></p>
<footer>
From the e-book English Fairy Tales, collected and
edited by Joseph Jacobs. Belongs to the public domain.
Source: www.authorama.com
</footer>
</article>
</body>
</html>
Your job is to produce the following output, but y ou are only allowed to use CSS r ules
and put them into a file named
fairytales.css.
I sugg est that you browse th rough the CSS reference at the end of this book to find
suitable properties and values to complete the job.
Mike: I have a question. The fairy tale doesn’t end on the page but you alr eady closed
the <article> element. How does that influence the document outline?
Professor: You’re right, that is a problem. However, there is presently no better
solution. The current general agreement in the web community is that, when an article
3.7. Homework 49
is split over many web pages, each par t should b e contained in its own <article>
element, even if it is not complete and self-contained. This com promise illustrates
how in pra ctice sema ntics and presentational aspects of the Web don’t always quite go
hand in hand.
Before we leave, I shouldn ’t forget the list of today’s keywords:
In this meet ing: server, client, developme nt server, production server, WAMP,
index.html, CSS, style sheet language, declaration, property, value, rule, style, in-
line CSS, selector, internal CSS, embedded CSS, <style>, external CSS, <link>,
spaces, CSS validator, keywords, data types, <integer>, <number>, <length>,
< percentage>, <url>, <color>, RGB, hexadecimal, RGBA, alpha channel, trans-
parency, shorth and properties, units, pixel
50 Meeting 3. Presentation
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.