HTML Tutorial

HTML and CSS Tutorial
This work is licensed under a Creative Commons License: Attribution 3.0 Unported.
You are free:
to Share to copy distribute and transmit the work
to Remix to adapt the work
Under the following conditions:
Attribution. !ou must attribute the work in the manner speci"ied by the author or licensor.
#or attribution purposes the U$L to be associated with the work is
http:%%www.&oer.or&%'T(L and the Title and Author o" this work are as "ollows: )The
*ocket 'T(L Tutorial+ Copyri&ht ,0-, by .van /oer.
#or any reuse or distribution you must make clear to others the license terms o" this work. Any o"
these conditions can be waived i" you &et permission "rom the copyri&ht holder.
Your fair use and other rights are in no way affected by the above.
This is a human0readable summary o" the Le&al Code 1the "ull license2.
Chapter : !etting Started
3elcome to the world o" 'T(L4 5" you have never written 'T(L code be"ore you should start
with this section. 5" you6ve written 'T(L be"ore you should "eel "ree to skip ahead to Chapter ,
Markup Basics.
3hen you6re done with this chapter you should be able to:
create and alter a simple web pa&e
e7plain what 'T(L elements and attributes are
use your browser to help you view and reuse code "rom other websites
Section Summaries
The /ettin& 8tarted chapter contains these sections:
-. 9ivin& 5n 9emonstrates basic 'T(L concepts by divin& in and creatin& a simple web
pa&e.
,. 8tructure .7amines document structure: the html element the head the title and
the body.
3. Tinkerin& (akes alterations to the )8imple 3eb *a&e+. 3e6ll add te7t chan&e the
back&round color and e7plore how 'T(L handles whitespace.
:. .lements .7plores elements which are the basic buildin& blocks o" a web pa&e. 3hat are
the components o" a element; 3hat happens i" you misspell a element; And is there a &ood
use "or the blink element; The answer mi&ht surprise you4
<. Attributes .7plores attributes which modi"y the behavior o" a element. 3e6ll look at the
components o" an attribute and talk about attribute whitespace attribute misspellin&s and
other issues.
=. >rowser Tools .7plains how to use key browser "eatures such as viewin& source
viewin& pa&e properties and savin& ima&es.
"iving #n
The "irst thin& we6re &oin& to do is dive in and create a simple webpa&e. 3e6ll e7plore what6s &oin&
on soon but "or now ?ust "ollow the directions as best you can.
To create your web pa&e you need:
A browser 1you6re usin& one ri&ht now2
A plain te7t editor 1you already have one on your machine2
Step : $pen a %ext &ditor
A te7t editor is a pro&ram that edits plain te7t "iles. 3hen authorin& 'T(L do not use 3ord
3ordpad *a&es or any other pro&ram that does not save "iles as plain te7t.
3indows users: open @otepad 1 8tart A *ro&rams A Accessories A @otepad 2
(ac B8 C users: open vi or Te7t.dit 1 Applications A Te7t.dit 2
Linu7 and other U@5C users: open vi or emacs
Un"ortunately @otepad and Te7t.dit are not very &ood te7t editors. >y de"ault @otepad always
tries to save and open "iles with a .txt e7tension. !ou must constantly "i&ht with it to make it save
and open webpa&es 1"iles with a .htm or .html e7tension2. >e stron& and ye shall overcome.
Likewise Te7t.dit does not use plain te7t by de"ault. >e"ore usin& Te7t.dit to edit 'T(L &o into
*re"erences and set the #ormat "or new documents to be *lain Te7t. #or &ood measure you mi&ht
have to convert your e7istin& document to plain te7t 1 #ormat A (ake *lain Te7t 2.
Usin& @otepad to write 'T(L is kind o" like usin& a butter kni"e to cut a birthday cake it6s the
wron& tool "or the ?ob. A better choice would be a more advanced te7t editor such as:
Crimson .ditor 13indows "ree2
8multron 1(ac B8 C "ree2
Te7t(ate 1(ac B8 C not "ree but well worth the money2
?.dit 1Cross0plat"orm "ree2
All o" these editors avoid the problems with "ile e7tensions and plain te7t described above and have
numerous e7tra "eatures "or advanced users. !ou don6t have to download one o" these editors ri&ht
now but i" you continue with web development you6ll need to up&rade your tools.
Step ': Create and Save the (eb )age
Copy0and0paste the te7t in .7ample -.- )A 8imple 3ebpa&e+ into your te7t editor startin& with the
te7t "<html>".
&xample .. A Simple (ebpage
view html view plain print ;
-. DhtmlE
,. DheadE
3. DtitleEA 8imple 3ebpa&eD%titleE
:. D%headE
<. DbodyE
=. This is a simple webpa&e.
F. D%bodyE
G. D%htmlE
To see what this 'T(L code sample looks like as a web pa&e click the view html link above the
code sample.
The words that are surrounded with an&le brackets 1< >2 are called elements. 3e will talk about
what a element is soon but "irst let6s "inish creatin& and displayin& your webpa&e.
Bnce you have copied the te7t over to your te7t editor save the "ile in your home directory or
9esktop as the "ile simple.html.
*ote
@otepad will try to append a .txt e7tension to your "ile name. 9on6t let this happen. 5n the 8ave
As dialo& bo7 set #ile name to simple.html and chan&e 8ave as type "rom Te7t 9ocuments to
All #iles 1H.H2.
Step +: "isplay the (ebpage in Your ,rowser
Bpen the "ile simple.html by typin& Ctrl-$ 1Cmd-$ "or (ac users2 and selectin& the "ile.
5nternet .7plorer users should select >rowse to "ind the "ile.
A"ter selectin& simple.html click Bpen. !our webpa&e should appear in the browser window.
Compare it to .7ample -.-. 9oes it match; 1To compare results click the view html link above
.7ample -.-.2
5" it does con&ratulations4 Let6s move on to the ne7t section where we6ll try to answer the Iuestion
what the heck is &oin& on;
Structure
The previous section demonstrates how to create a simple web pa&e. 5" you haven6t saved this
e7ample on your computer as the "ile simple.html do so now.
&xample .'. A Simple (ebpage
-. DhtmlE
,. DheadE
:. D%headE
<. DbodyE
F. D%bodyE
G. D%htmlE
5" you view simple.html in your browser you will see the words )This is a simple webpa&e+ on
a white or &rey back&round. 3here did everythin& else &o; And what are those words with the
an&le brackets anyway;
A ,rief #ntroduction to &lements
The web pa&e simple.html uses these elements: html head title and body.
.lements are delineated by an&le brackets 1< >2.
.lements are )invisible+J they don6t directly appear in the web pa&e. 5nstead they serve as
instructions to your browser. They can chan&e your te7t6s appearance create a link insert an
ima&e and much more.
An element starts with an openin& ta& 1<element>2 and ends with a closin& ta&
1</element>2. 8ome elements do not reIuire closin& ta&s.
3e6ll discuss the &eneral properties o" elements in some detail in .lements. #or now let6s "ocus on
the particular elements in the )8imple 3ebpa&e+ e7ample.
Structure of the Simple (ebpage
Althou&h the )8imple 3ebpa&e+ doesn6t look like much its elements 1html head title and
body2 are "undamental to the structure o" all 'T(L documents. 'ere6s what these elements mean:
<html>: )'ere be&ins an 'T(L document.+
The html element helps identi"y a "ile as an 'T(L document.
<head>: )'ere be&ins the header.+
The header contains elements that apply to the overall document. #or e7ample it mi&ht
contain elements that are desi&ned "or search en&ines to process or elements that chan&e the
overall appearance o" the webpa&e. 'owever elements in the header do not display directly
as normal webpa&e content.
The reasons you would be concerned about the header are a bit abstract at this sta&e so we
won6t worry about it much until later.
<title>: )'ere be&ins the document title.+ 1(ust be in the header2
5" you view the "ile simple.html in your browser alon& the top o" your browser window
you should see the words )A 8imple 3ebpa&e+. These words appear because o" the title
element.
As an e7ercise chan&e the title o" the simple.html webpa&e to )(y #irst 3ebpa&e+.
8ave your chan&es and view them by clickin& the browser6s Refresh or Reload button.
Titles mi&ht not seem important at "irst &lance but they6re actually Iuite use"ul. #or
e7ample i" a search en&ine displays your pa&e in a list o" search results it will probably
display the title as your pa&e6s title. 5" you omit the title element the search en&ine
will make up one "or you. This is @ot a /ood Thin&.
*ote
!ou mi&ht have noticed that the title element is contained within the head element. 5s
this kosher; Absolutely4 5n "act many elements are desi&ned to contain other elements and
you will be nestin& elements within other elements Iuite "reIuently as you continue.
<body>: )'ere be&ins the body.+
The body is where you put te7t and elements to be displayed in the main browser window.
The reason that the words )This is a simple webpa&e+ appear when you display
simple.html is becaused you placed them in the body.
8o why do we only see )This is a simple webpa&e+ when we display simple.html in a browser;
The answer is a"ter you remove all the elements that are not desi&ned to display in the browser
window the sentence )This is a simple webpa&e+ is the only thin& le"t.
5n the ne7t section we6ll tinker with our e7ample webpa&e ?ust to see what happens. A"ter that
we6ll provide a more "ormal de"inition o" elements and element properties.
%in.ering
Let6s make a "ew alterations to our )8imple 3ebpa&e+ "rom )9ivin& 5n+.
&xample .+. Adding %ext
-. DhtmlE
,. DheadE
:. D%headE
<. DbodyE
F. And 5 mean really simple.
G. D%bodyE
K. D%htmlE
To view this alteration:
-. Add the te7t in bold to your simple.html "ile.
,. 8ave the "ile as adding.html.
3. Bpen the adding.html "ile in your browser.
/%01 and (hitespace
3hat happened here; 3hy are the two sentences on the same line;
'T(L i&nores whitespace 1spaces tabs or carria&e returns2 in the source. 5t replaces all continuous
chunks o" whitespace with a sin&le space: + ). Althou&h it mi&ht take you a while to &et used to this
behavior the advanta&e is that that you can use whitespace to make your code more readable and
the browser can "reely ad?ust line breaks "or each user6s window siLe and "ont siLe.
.7ample -.: )8cattered Te7t+ displays in the browser identically to .7ample -.3 )Addin& Te7t+.
Try it out.
&xample .2. Scattered %ext
-. DhtmlE
,. DheadE
:. D%headE
<. DbodyE
=. This is a
F. simple webpa&e.
G. And 5
K. mean
-0.
--. really simple.
-,.D%bodyE
-3.D%htmlE
*ote
#or brevity subseIuent e7amples will leave out the html head title and body elements
since we6re ?ust chan&in& the body content. 5" the head content becomes important a&ain we6ll
add it back.
B" course 'T(L provides many ways to control whitespace. #or a couple o" simple e7amples
re"er to )*ara&raph >reaks+.
&mphasi3ing %ext
@ow chan&e the te7t o" your simple web pa&e to:
&xample .4. &mphasi3ed %ext
-. This is a simple webpa&e.
,. And 5 mean DemEreallyD%emE simple.
8ave your chan&es and view the "ile in your browser.
As you can see the te7t becomes italic startin& at the and endin& at the . The em
element represents emphasiLed te7t te7t that you would stress when speakin&. The em element is
our "irst e7ample o" an element that can a""ect the physical appearance o" the te7t.
#or more e7amples o" elements that can a""ect the appearance o" te7t re"er to )#ont 8tyles+.
Changing the ,ac.ground Color
Let6s do somethin& a little more dramatic:
&xample .5. ,ac.ground Color
-. DhtmlE
,. DheadE
:. D%headE
<. Dbody styleMNback&round: yellowNE
F. And 5 mean DemEreallyD%emE simple.
G. D%bodyE
K. D%htmlE
A bit &arishO but thin&s could be worse. Try background: red "or e7ample.
This is our "irst e7ample o" an attribute a component o" an element that modi"ies that element6s
behavior. #or some elements like the body element attributes are optional. #or other elements
attributes are essential. 3e6ll discuss attributes at some len&th later in )Attributes+.
Try some other color words: blue teal limegreen papayawhipO 3hat works; 3hat
doesn6t; 15" you6re interested "eel "ree to skip ahead to the section called )Colors+.2
&lements
A"ter all this e7perimentin& with our e7ample webpa&e it6s time to de"ine elements more "ormally.
.lements have three main components:
-. Dname attribute-MNvalue-N attribute,MNvalue,N...E
,. ...1te7t or more elements &o here2...
3. D%nameE
name: 5denti"ies the type o" the element such as body or em element. The name o" an
element can be upper case lower case or anythin& in between. Upper case makes it easier to
di""erentiate elements and te7t when e7aminin& 'T(L source while lower case is a more
modern style and is easier to type. .ither way it6s a matter o" taste: <BOD> <body> and
even <bODy> are all the same element.
attribute: Chan&es the behavior o" an element. #or e7ample the style attribute
enables you to chan&e the appearance o" an element and its content.
value: .nables particular attributes to vary. #or e7ample background: yellow
when present in an element6s style attribute chan&es the back&round o" the element to
yellow.
8ome elements do not reIuire a closin& element to work properly. #or e7ample the br element
creates a line break and should not enclose anythin&. 3e6ll discuss br "urther in )*ara&raph
>reaks+.
8ome elements do not reIuire any attributes. 5n ).7ample -.= >ack&round Color+ the body
element had a style attribute but the body element works ?ust "ine without without it. >y
contrast the a element which creates a hyperlink has an hre! attribute that de"ines the link6s
destination. 5" you don6t include the hre! attribute the link won6t point anywhere.
0isspellings and 0isunderstandings
Pastly simpli"ied a browser processes an 'T(L pa&e somethin& like this:
-. 5denti"y anythin& that is between an&le brackets 1< >2 as a )element+
,. 9etermine whether the browser has any instructions "or usin& the element:
5" yes the element is real "ollow the instructions
5" no the element is &arba&e i&nore it
3hen a browser i&nores a element that means one o" two thin&s:
The element is misspelled or does not e7ist. #or e7ample mxy"ptlk "or e7ample is not
an 'T(L element.
The element means somethin& but that particular browser does not support it. #or e7ample
the blink element works in #ire"o7 but not in 5nternet .7plorer or 8a"ari.
&xample .6. ,lin.ing %ext
-. 3arnin&: DblinkE#or e7ternal use onlyD%blinkE.
,. Avoid contact with eyes.
5" you are usin& #ire"o7 the te7t in the )view html+ bo7 should be blinkin&. 5" you are usin&
5nternet .7plorer or 8a"ari the te7t will not be blinkin&. This is actually a common situation when
composin& web pa&es one browser won6t support a particular "eature or supports it incorrectly.
Caution
(ost people "ind the blink element distractin& and irritatin& and in "act blink is not part o" the
o""icial 'T(L standard. 5n "act 5 am aware o" only one e7ample o" a &ood use o" blink on the
entire 3eb. 3ell maybe two.
A "igression: (hat7s a 8%ag9:
!ou6ll o"ten hear people re"er to )ta&s+ as in )The markup ta&s tell the 3eb browser how to
display the pa&e.+ Almost always they really meant to say )elements.+ Ta&s are not elements they
define the boundaries of an element. The p element be&ins with a open ta& and ends with a
 closin& ta& but it is not a ta& itsel".
5ncorrect: )!ou can make a new 'T(L para&raph with a ta&4+
Correct: )5t6s a &ood idea to close that open ta&.+
8ometimes you6ll hear people say )alt ta&+ which is even worse. An )alt tag+ is really an alt
attribute. This important attribute provides alternative te7t "or ima&es in case the user can6t see the
ima&e "or some other reason. 3e6ll talk more about this attribute later.
The element vs. ta& con"usion is sort o" understandable: it6s a common mistake even amon&
pro"essionals and they both look like an&le0brackety thin&s a"ter all. >ut attributes are not ta&s not
even close. 5" you hear someone say )alt ta&+ this is a key indication that the speaker does not
understand 'T(L very well. 1!ou probably shouldn6t invite them to your ne7t birthday party.2
Attributes
Attributes modi"y the behavior o" a element. Attributes allow you to chan&e siLes colors speci"y
link locations and much more. They have two main components:
-. Dname attribute-MNvalue-N attribute,MNvalue,N ...E
,. ...1te7t or more elements &o here2...
3. D%nameE
attribute: 9e"ines the attribute that you6re usin&. As with elements case is irrelevant "or
the attribute name. #$%& style and s$y%& all do the same thin&.
value: 8elects a particular kind o" behavior "or the attribute. Case sometimes matters "or
the values inside o" the attribute so be care"ul here.
)Chan&in& the >ack&round Color+ includes an e7ample o" usin& the style attribute to control the
back&round color o" the entire webpa&e. 'ere6s a second e7ample the hre! attribute:
&xample .;. A 1in. to %he *ew Yor. %imes
-. Da hre"MNhttp:%%www.nytimes.comNE&o to nytimes.com4D%aE
The a element 1or )anchor+ element2 creates a link to another web pa&e. The hre! attribute
speci"ies the location which we set to the value http://www.nytimes.com. 5" you view the
results and select the link )&o to nytimes.com4+ you will indeed &o to the @ew !ork Times.
*ote
The style and hre! attributes are very di""erent beasts. The style attribute is optional and
may be applied to nearly any 'T(L element in the body. The hre! attribute is essential "or
speci"yin& a link location and only applies to a narrow set o" elements.
Attribute )roperties
Attributes "ollow these rules:
.lements may have multiple attributes. The order o" the attributes is irrelevant.
.ach element has a list o" permitted attributes. 8ome attributes may be assi&ned to most 1or
even all2 elements. >ut in &eneral you cannot "reely add any attribute to any element.
3hitespace between attributes is irrelevant. !ou may "reely insert spaces tabs or even
carria&e returns between attributes as lon& as you don6t "or&et the closin& an&le bracket at
the end o" the element 1E2. #or e7ample:
-. Da hre"MNhttp:%%www.&utenber&.or&N
,. styleMNback&round: yellowN
3. E>ooks in the public domainD%aE
is per"ectly acceptable. #or elements with many attributes addin& whitespace can sometimes
make your code more readable.
Althou&h upper case and lower case is irrelevant "or attribute names the case can be
important "or attribute values. #or e7ample
-. Da hre"MNhttp:%%www.cnn.com%inde7.htmlNE/o to C@@D%aE
creates a link that takes you to the C@@.com home pa&e while
-. Da hre"MN'TT*:%%333.C@@.CB(%5@9.C.'T(LNE/o to C@@D%aE
is a broken link.
5t is &ood practice to Iuote attribute values althou&h o"ten this is optional. That is
hre!'http://www.yahoo.com is the same as
hre!'"http://www.yahoo.com". 5" the attribute value contains a special character
such as a space or an an&le bracket 1D E2 you must use Iuotes or the browser will interpret
the special character as the end o" the attribute or element.
Caution
Take care to close any open Iuotes you start. Btherwise your attribute value will )continue+
until the ne7t Iuote mark which will badly &arble your pa&e.
As with elements browsers attempt to i&nore incorrect attributes. (isspelled attributes and
attribute values such as hhre! and backgrounde: yellow have no e""ect.
(isspellin& background means that your back&round won6t turn yellow. (isspellin&
hre! means that your link won6t "unction. 'owever i" you misspell
http://www.yahoo.com your link will "unction but it won6t take you to the ri&ht
place.
,rowser %ools
A browser6s primary "unction is to display web pa&es. 'owever "or a web developer browsers are
much more use"ul than that. 3henever you visit a web pa&e your browser "etches a tremendous
amount o" valuable in"ormation such as the 'T(L source o" the pa&e ima&e "iles that appear on
the pa&e and other associated "iles. This section describes how to use your browser to retrieve that
in"ormation.
*ote
8ince browser makers love to chan&e the names and locations o" these "unctions "rom version to
version the instructions below mi&ht not apply i" you6re usin& a di""erent browser version than the
one tested at the time this section was written.
<iew Source
>y "ar the most valuable browser tool is Piew 8ource which displays the 'T(L source o" the
pa&e. Piewin& source is one o" the "astest ways to learn how to code. 5" you6re not sure how some
"eature o" 'T(L works you can view the source o" a site that uses the "eature copy and paste
sections o" code make alterations and see what happens. To view source:
5nternet .7plorer #ire"o7: $i&ht0click on the window and select Piew 8ource.
8a"ari: Ctrl0click on the window and select Piew 8ource.
Bpera: $i&ht0click on the window and select 8ource.
=igure .. <iew Source >=irefox?
Althou&h viewin& the source is incredibly use"ul keep in mind these two caveats:
5t6s okay to copy and alter a site6s source "or learnin& purposes on your home machine but
don6t post any such material on your public website. This &oes "or both the te7t on the site
and the underlyin& code or desi&n.
(ost sites on the web have terrible underlyin& code. Learnin& how to code by randomly
viewin& websites is like learnin& how to compose verse by randomly readin& poetry written
by kids. !ou mi&ht encounter some brilliant stu""O but the odds are pretty low. @ever
assume that ?ust because Big(amous)ebsite.com coded their home pa&e a certain way
that this was the best way to do it.
Save #mages
Another invaluable browser "unction is the ability to save ima&e "iles. .very time your browser
visits a web pa&e it also downloads all the ima&es that display on the pa&e. !ou can save these "iles
and reuse them "or educational purposes. To save an ima&e:
5nternet .7plorer: $i&ht0click on the window and select 8ave *icture AsO
#ire"o7: $i&ht0click on the ima&e and select 8ave 5ma&e AsO to save the ima&e as a "ile
Piew 5ma&e to view the ima&e by itsel" in the browser or *roperties to view the ima&e6s "ile
siLe and other properties.
8a"ari: Ctrl0click on the ima&e and select 8ave 5ma&e to the 9esktop to save the ima&e as a
"ile or Bpen 5ma&e in @ew 3indow to view the ima&e by itsel" in the browser.
Bpera: $i&ht0click on the ima&e and select 8ave 5ma&eO to save the ima&e as a "ile Bpen
5ma&e to view the ima&e by itsel" in the browser or 5ma&e properties to view the ima&e6s
"ile siLe and other properties.
As with Piew 8ource you should never take someone else6s ima&es altered or unaltered and post
them on a public site unless you have permission. There are numerous "ree ima&e repositories all
over the web where you can &et clip art back&rounds and photos that are either in the public
domain or o""ered under reasonably liberal licenses.
<iew )age #nfo
The Piew *a&e 5n"o "unction provides secondary technical in"ormation about the pa&e such as the
pa&e siLe in bytes and the te7t encodin&. This in"ormation mi&ht not seem all that use"ul when
you6re "irst startin& out but it6s invaluable "or more advanced coders. To view pa&e in"o:
5nternet .7plorer: $i&ht0click on the window and select *roperties.
#ire"o7: $i&ht0click on the window and select Piew *a&e 5n"o.
Bpera: 8elect Tools A Appearance A *anels check the 5n"o checkbo7 and click BQ.
=igure .'. <iew )age #nfo >=irefox?
The in"ormation displayed varies "rom browser to browser. #ire"o7 provides more use"ul
in"ormation than 5nternet .7plorer includin& a "ull list o" all ima&es on the pa&e 1with hei&ht
width and siLe in bytes2. Bpera takes an interestin& approach: i" you activate the 5n"o panel you
can view this in"ormation alon&side each pa&e you browse to. Bpera also provides a shortcut 1Ctrl-
@2 "or displayin& all the links on the pa&e.
(ebdev %oolbars
8everal browsers o""er some sort o" )webdev toolbar+: a downloadable set o" menus and options "or
your browser that are speci"ically desi&ned to help understand the structure o" a webpa&e. Toolbars
can o""er a diLLyin& array o" use"ul "unctions but as with Piew *a&e 5n"o they are probably more
use"ul "or e7perienced web developers.
%oolbars
5nternet .7plorer
#ire"o7
Bpera
Chapter ': 0ar.up ,asics
This chapter covers some o" the basic 'T(L elements and attributes in a systematic way. .ach
section displays one or more short webpa&es which we will alter several times to demonstrate how
various elements work. >e"ore proceedin& you should be com"ortable with the idea o" savin&
'T(L to a "ile alterin& it with a plain te7t editor and viewin& the results in your browser. 5" not
please read Chapter - Getting Started and work throu&h the e7amples until you are com"ortable
with these concepts.
3hen you6re done with this section you should be able to:
create a document with headin&s para&raphs and line breaks
chan&e the te7t color and back&round color
use physical styles and lo&ical styles to chan&e the appearance o" your te7t
display ima&es and create links to other web pa&es
understand more comple7 'T(L elements that reIuire nestin& such as lists
Section Summaries
The (arkup >asics chapter contains these sections:
-. *ara&raph >reaks 9escribes the para&raph element and the line break element includin&
a discussion o" correct and incorrect usa&e.
,. 'eadin&s 9escribes the headin& elements. 5n this section we6ll discover why it6s really
important to close your open ta&s properly.
3. #ont 8tyles .7plores elements that help control the "ont. 3e6ll touch on the di""erence
between inline and block elements and compare physical style elements versus lo&ical style
elements.
:. Colors .7plains how to chan&e the back&round and "ore&round color o" an entire pa&e a
para&raph or even a sin&le word. 3e6ll see e7amples o" color names and he7 codes and
we6ll discuss which method is pre"erable.
<. Links >reaks down a U$L into its constituent parts e7plains relative links versus
absolute links and provides e7amples o" how to use 59s to link within pa&es.
=. 5ma&es 9escribes what ima&es are how to embed them in a web pa&e how to stretch and
sIuash them and how to )"loat+ them with respect to the other content on the pa&e.
F. Lists 9escribes ordered lists unordered lists and de"inition lists. This is our "irst e7ample
o" elements that reIuire nestin& to "unction properly.
=igure .+. (ebdev %oolbar >=irefox?
)aragraph ,rea.s
5n Chapter - Getting Started we covered some basic 'T(L concepts includin& the "act that
'T(L i&nores whitespace. This seems a little craLy doesn6t it; 'ow can we do we compose a
readable webpa&e without everythin& collapsin& into a sin&le &iant &lob o" te7t;
Let6s say we want our website to display some lines "rom an obscure playwri&ht:
&xample '.. Unformatted %ext
-. DhtmlE
,. DheadE
3. DtitleE(acbeth: - $eckless !oun&sters: 0D%titleE
:. D%headE
<. DbodyE
=. (AC>.T': (y nameRs (acbeth.
F.
G. !BU@/ 853A$9: The devil himsel" could not pronounce a title
K. (ore hate"ul to mine ear.
-0.
--. (AC>.T': @o nor more "ear"ul.
-,.
-3. !BU@/ 853A$9: Thou liest abhorred tyrantJ with my sword
-:. 5Rll prove the lie thou speakRst.
-<.
-=. SThey "i&ht and youn& 8eward is slain.T
-F.
-G. (AC>.T': Thou wast born o" woman.00
-K. >ut swords 5 smile at weapons lau&h to scorn
,0. >randishRd by man thatRs o" a woman born.
,-. D%bodyE
,,.D%htmlE
@ow this is a per"ectly acceptable web pa&e. The html head title and body elements are all
in the ri&ht places. 5n "act this e7ample is ?ust like the )8imple 3eb *a&e+ "rom 9ivin& 5n e7cept
that the te7t is a little di""erent.
There is one small problem however. 'T(L collapses whitespace which means that all our te7t
will collapse into a sin&le para&raph and look somethin& like this:
(AC>.T': (y name6s (acbeth. !BU@/ 853A$9: The devil himsel" could not
pronounce a title (ore hate"ul to mine ear. (AC>.T': @o nor more "ear"ul. !BU@/
853A$9: Thou liest abhorred tyrantJ with my sword 56ll prove the lie thou speak6st.
SThey "i&ht and youn& 8eward is slain.T (AC>.T': Thou wast born o" woman.U >ut
swords 5 smile at weapons lau&h to scorn >randish6d by man that6s o" a woman born.
This is terrible4 Let6s try to make this pa&e more readable.
%he p &lement
The p element breaks te7t into para&raphs. Any te7t that you surround with a and a closin&
 becomes a separate block. Let6s see how this works. #or brevity we will start to leave o"" the
structural elements: html head and body.
&xample '.'. )aragraphs
-. DpE
,. (AC>.T': (y nameRs (acbeth.
3. D%pE
:. DpE
<. !BU@/ 853A$9: The devil himsel" could not pronounce a title
=. (ore hate"ul to mine ear.
F. D%pE
G. DpE
K. (AC>.T': @o nor more "ear"ul.
-0.D%pE
--.DpE
-,. !BU@/ 853A$9: Thou liest abhorred tyrantJ with my sword
-3. 5Rll prove the lie thou speakRst.
-:.D%pE
-<.DpE
-F.D%pE
-G.DpE
-K. (AC>.T': Thou wast born o" woman.00
,0. >ut swords 5 smile at weapons lau&h to scorn
,-. >randishRd by man thatRs o" a woman born.
,,.D%pE
.ach block is "ollowed by two line breaks. This is a &ood start4
.ach para&raph is surrounded by an openin& ta& and a closin& ta& . The p element is a
block elementJ it )does somethin&+ to a block o" te7t. The browser must identi"y where the block
ends so the open ta& needs a closin& ta& .
Un"ortunately many people take the p element to mean )make a new para&raph here+ or )put two
line breaks here+ rather than )enclose this te7t and make it a para&raph.+ And thus you see a lot o"
code that looks like this:
&xample '.+. #ncorrect p Usage
-. Te7t >lock -: >lah blah blah... DpE
,.
3. Te7t >lock ,: >lah blah blah... DpE
:.
<. Te7t >lock 3: >lah blah blah...
3hat happens; 1Try it.2 Te7t >lock , and 3 are para&raphs 1the browser )inserts+ a closin& D%pE
element ri&ht be"ore each DpE element2. Te7t >lock - is not actually a 'T(L para&raph. 'owever
the pa&e displays with two line breaks between each te7t block which appears to result in the same
thin& as doin& it the proper way.
8o what6s the bi& deal; 3hy not do it the )improper+ way and avoid typin& all those closin&
ta&s; 3ell later we6ll talk about how to use a techniIue called Cascadin& 8tyle 8heets 1C882 to
control the appearance o" all elements o" a particular type. #or e7ample you can use C88 to set all
your para&raphs to be red -,pt Times @ew $oman. >ut i" you6re usin& p incorrectly you6ll be in
"or an unpleasant surprise as many o" your para&raphs 1or rather what you thought were
para&raphs2 won6t &et the proper style applied.
%he br element
3e still need to break up the dialo&ue into lines as they appear in the ori&inal play. @ow we could
do this with the p element but then all lines would be eIually spaced. and so it wouldn6t be clear
which line belon&s with which speaker. 'ow do we &et "iner controlO say one line break;
&xample '.2. 1ine ,rea.s
-. DpE
,. (AC>.T': (y nameRs (acbeth.
3. D%pE
:. DpE
<. !BU@/ 853A$9: The devil himsel" could not pronounce a titleDbrE
=. (ore hate"ul to mine ear.
F. D%pE
G. DpE
K. (AC>.T': @o nor more "ear"ul.
-0.D%pE
--.DpE
-,. !BU@/ 853A$9: Thou liest abhorred tyrantJ with my swordDbrE
-3. 5Rll prove the lie thou speakRst.
-:.D%pE
-<.DpE
-F.D%pE
-G.DpE
-K. (AC>.T': Thou wast born o" woman.00 DbrE
,0. >ut swords 5 smile at weapons lau&h to scornDbrE
,-. >randishRd by man thatRs o" a woman born.
,,.D%pE
Unlike the p element the br element does not enclose any other 'T(L. There is no such thin& as a
closin& element. Also note that we don6t have to put a "inal br element on the last line o"
each dialo&ue e7chan&e. The DpE element will take care o" the last line break "or us. 8o now we6ve
separated each speaker with a new line.
'ow does this look; 1Try it.2 @ow each line o" dialo&ue is on its own line on the pa&e. The lines are
considerably easier to read.
As with the p element many web desi&ners use br incorrectly. !ou6ll o"ten see code that looks like
this:
&xample '.4. #ncorrect br Usage
-. Te7t >lock -: >lah blah blah...
,. DbrEDbrE
3. Te7t >lock ,: >lah blah blah...
:. DbrEDbrE
<. Te7t >lock 3: >lah blah blah...
This code is even worse than the code in .7ample ,.3 )5ncorrect p Usa&e+ . None o" the te7t blocks
are 'T(L para&raphs which makes them di""icult to style. 5" you want para&raphs use p not br.
5n "act there aren6t that many places where you want to "orce a line break with br. The most
common cases are:
8on& lyrics
Lines o" poetry
Lines o" dialo&ue
Aside "rom that there are more ele&ant ways to control line spacin& such as usin& a p element and
ad?ustin& the spacin& usin& C88. >ut that6s a later lesson.
/eadings
8o "ar we6ve covered para&raphs and line breaksO but in a lon& document we probably want more
structure than that. 'ow do we create section headin&s;
%he h &lements
There are si7 levels o" headin& elements: h* h+ h, h- h. and h/. These block elements tell
the browser to set o"" the headin& "rom the rest o" the te7t. The h* headin& level is the most
important headin& while the h/ level is the least important.
(ost browsers display headin&s in bold with h* the lar&est and h/ the smallest.
&xample '.5. /eadings
-. Dh-E'eadin& -D%h-E
,.
3. Dh,E'eadin& ,D%h,E
:.
<. Dh3E'eadin& 3D%h3E
=.
F. Dh:E'eadin& :D%h:E
G.
K. Dh<E'eadin& <D%h<E
-0.
--.Dh=E'eadin& =D%h=E
Like the para&raph element p the headin& elements are block elements. .ach matched set o"
headin& elements creates a new block automatically separated "rom other blocks with line breaks.
0angled /eadings
5n )*ara&raph >reaks+ we discussed the conseIuences o" "ailin& to close your open ta&s. This
is even more important "or headin& elements.
&xample '.6. 0angled /eading and %ext
-. Dh-E8TAP. 5: (A$L.!R8 /'B8T
,.
3. (A$L.! was dead: to be&in with. There is no doubt
:. whatever about that. The re&ister o" his burial was
<. si&ned by the cler&yman the clerk the undertaker
=. and the chie" mourner. 8croo&e si&ned it: and
F. 8croo&eRs name was &ood upon RChan&e "or anythin& he
G. chose to put his hand to. Bld (arley was as dead as a
K. door0nail.
3hoops4 5" you view the resultin& web pa&e youRll see that the h* element6s oversiLed bold "ont
has spilled over onto the rest o" the te7t. The browser has no indication where the h* element is
supposed to end and so it interprets the h* element as enclosin& everythin& else on the pa&e.
Let6s "i7 this by closin& the open <h*> ta&. 3e6ll put the te7t in its own 'T(L para&raph "or &ood
measure:
&xample '.;. )roper /eading and %ext
-. Dh-E8TAP. 5: (A$L.!R8 /'B8TD%h-E
,. DpE
3. (A$L.! was dead: to be&in with. There is no doubt
:. whatever about that. The re&ister o" his burial was
<. si&ned by the cler&yman the clerk the undertaker
=. and the chie" mourner. 8croo&e si&ned it: and
F. 8croo&eRs name was &ood upon RChan&e "or anythin& he
G. chose to put his hand to. Bld (arley was as dead as a
K. door0nail.
-0.D%pE
The headin& and para&raph are now properly separated.
=ont Styles
The style elements provide a strai&ht"orward way to control the "ont. These elements "all into two
cate&ories: physical styles and lo&ical styles. The style elements provide only crude control over the
appearance o" your te7t. #or more sophisticated techniIues re"er to )#ont Control+.
1ogical Styles
A lo&ical style indicates that the enclosed te7t has some sort o" special meanin&. 3e6ve already seen
the em element which indicates that the enclosed te7t should be emphasiLed 1stressed when
spoken2. The list o" available lo&ical style elements includes:
em .mphasiLes te7t. Usually rendered as italic.
-. *lease do DemEnotD%emE "eed the monkeys.
strong 8tron&ly emphasiLes te7t. Usually rendered as bold.
-. Dstron&E3A$@5@/:D%stron&E @ever "eed the monkeys
,. under any circumstances.
cite 5ndicates a citation or re"erence. Usually rendered as italic.
-. #or more in"ormation please re"er to
,. DciteEThe 9an&ers o" (onkey #eedin& Pol ,D%citeE.
d!n 5ndicates the de"inin& instance o" a termJ usually applied when the term "irst
appears. Usually rendered as italic.
-. (onkeys have sharp Dd"nEcaninesD%d"nE sharp pointy
,. teeth to bite you with.
abbr indicates an abbreviation or acronym such as $A9A$ 1$Adio 9etection And
$an&in&2J also provides a title attribute that may contain the "ully0spelled out version.
'overin& your mouse over the abbr>E causes many browsers to display a )tooltip+ with
the contents o" the title attribute. $enderin& is inconsistentJ some browsers display a
dotted underline while others do nothin& special.
-. 5n particular beware o"
,. Dacronym titleMN(onkeys B" Unusual 8iLeNE(BU8D%acronymEes.
code 5ndicates computer code "ra&ments and commands. Usually rendered in a
monospaced "ont.
-. DcodeE-0 *$5@T N5 LBP. (B@Q.! C'B3NDbrE
,. ,0 /BTB -0D%codeE
3ait )Usually rendered as italic;+ 3hat does that mean; 8houldn6t em cite and d!n always
render as italic;
3ell not necessarily.
>y de"ault most browsers render em as italic. 'owever this is only a convention. @othin&
reIuires browsers to use italic and in "act some browsers 1such as an te7t0to0speech
synthesis browser2 mi&ht be completely unable to use italic.
Althou&h the de"ault is italic you can override this usin& C88. #or e7ample you could
speci"y that on your website all em elements render as red and bold.
BkayO but why do em d!n and cite all render the same by de"ault; 5" 5 want italic why
wouldn6t you ?ust use em and "or&et about the rest;
3ell sure you could do that. 'owever usin& a richer set o" elements &ives you "iner control. #or
e7ample you could declare that emphasiLed te7t is red and bold but all citations are &reen and
italic. !ou can also use lo&ical style elements to e7tract more meanin& out o" a website. #or
e7ample i" you knew that a website uses the cite element consistently you could easily write a
pro&ram to e7tract a list o" citations. 1>ut don6t obsess over that pointJ there are better ways to store
and consume this sort o" in"ormation.2
The key point to remember is that a cite element is a citation not a chunk o" italic te7t. The italics
are ?ust a use"ul side e""ect.
#nline vs. ,loc. &lements
Unlike the para&raph and header elements the style elements listed above don6t mark o"" a )block+
o" te7t. The physical style elements are inline elements that per"orm their work without addin& e7tra
line breaks:
&xample '.A. #nline vs. ,loc. &lements
-. DpE
,. -. This is a para&raph with a section o"
3. DemEemphasiLed te7tD%emE inside o" it.
:. D%pE
<.
=. DemE
F. ,. This is a section o" emphasiLed te7t with
G. DpEa para&raphD%pE inside o" it.
K. D%emE
The "irst sentence results in one )block+ with a couple o" emphasiLed words inside. 5n the second
sentence the p element breaks the te7t up into multiple blocks.
)hysical Styles
*hysical style elements speci"y a particular "ont chan&e. #or e7ample to make te7t bold you can
mark it o"" with the b element: bold text. The list o" available physical style elements
includes:
b (akes te7t bold. Appropriate "or product names O
-. Today Uni8tellar9e"enseCorp is proud to announce
,. DbE@eutrinoLonD%bE the only neutrino0based death ray
3. on the market.
i (akes te7t italic. Appropriate "or ship names internal monolo&ues and thou&hts O
-. This e7citin& new product has already been installed on many
,. advanced warships includin& the DiE5.8.8. 'oodD%iE.
sub (akes te7t a subscript. Appropriate "or scienti"ic and mathematical notation O
-. Althou&h the standard electron neutrino 1VDsubEeD%subE2
,. con"i&uration packs plenty o" punch muon neutrino
3. 1VDsubEWD%subE2 up&rades are available on reIuest.
sup (akes te7t a superscript. Appropriate "or "ootnotes scienti"ic and mathematical
notation O
-. 3ith an intensity o" -.F=7-0DsupE=D%supE
,. cmDsupE0,D%supEsDsupE0-D%supE nothin& can repel "irepower
3. o" this ma&nitude4
The physical styles are subtly di""erent "rom the lo&ical styles. The lo&ical style element strong
means )somethin& stron&ly emphasiLed+ while the physical style element b ?ust means )somethin&
that is bold.+
A "igression: )hysical Styles and Semantic 0ar.up
These days you6ll sometimes hear people claim that the physical styles are yucky and bad and
should never be used. This is because lo&ical styles contain small Iuantities o" a rare earth named
)8emanticism+. 8emanticism can be mined and processed into the power source "or "arms o"
spinnin& Academic *aper Turbines which serve to "eed and clothe members o" our society who
would otherwise starve to death.
Althou&h it is true that certain physical styles are obsolete the i b sub and sup elements are
appropriate to use in certain situations. #or e7ample compare these code samples:
-. (y &rand"ather served on the DiEU.8.8. (aineD%iE.
-. (y &rand"ather served on the DemEU.8.8. (aineD%emE.
5n this case i is more appropriate than em unless you think it6s appropriate to always be shoutin&
the )U.8.8. (aine+ part. @ot that i is all that wonder"ul but em is ?ust "latly wron&. (aybe it
would be nice i" we had a 0essel element but 'T(L is a small lan&ua&e and the i element is
the best we can do.
#or a more e7treme e7ample consider the Iuantity ), to the 7 power+ represented in 'T(L as
+x. 5" we take away the superscript this leaves us with +x which is most
emphatically not eIual to ), to the 7 power.+ .ven thou&h the sup element literally means )move
the , above the line+ this physical chan&e to the te7t has actual mathematical meanin&4 1Thanks to
XacIues 9istler "or pointin& this one out.2
Colors
)Chan&in& the >ack&round Color+ brie"ly introduced how to chan&e the back&round color to
yellow. That6s kind o" neat but this ?ust raises more Iuestions. 5" yellow is available what are the
other colors 5 can use; Can 5 chan&e the "ore&round color; Can 5 apply colors to ?ust a small
selection o" te7t;
%ext >=oreground? Color
'ere6s how to chan&e the te7t color:
-. Add an attribute called style to the element. 1<element style'"">2
,. 5nside the style attribute speci"y the color you want by typin& color: "ollowed by the
color you want. 1<element style'"color: red">2
*ote
As with all attributes do not include the style attribute in the closin& ta& .
#or e7ample:
&xample '.B. Red )aragraph
-. DpE
,. The &randmother lived out in the wood hal" a lea&ue "rom the villa&e
3. and ?ust as Little $ed0Cap entered the wood a wol" met her. $ed0Cap
:. did not know what a wicked creature he was and was not at all a"raid
<. o" him.
=. D%pE
F. Dp styleMNcolor: redNE
G. R/ood day Little $ed0CapR said he.
K. D%pE
-0.DpE
--. RThank you kindly wol".R
-,.D%pE
5n the earlier e7ample .7ample -.= )>ack&round Color+ the back&round o" the entire pa&e turned
yellow. >ut in our e7ample above the te7t turns red. A style attribute value o" background:
sets the back&round color while color: sets the "ore&round color.
*ote
The keywords color and background are called C88 properties. C88 1Cascadin& 8tyle 8heets2
is a techniIue "or applyin& style to elements. Chan&in& the element6s color is ?ust one small
e7ample o" what C88 can do. 3e6ll learn a lot more about C88 in Chapter 3 Styling Basics but "or
now let6s "ocus on color speci"ically.
,ac.ground Color
To chan&e the back&round color o" a element you ?ust need to use a di""erent property in the
style attribute: the background property. 5" you apply the back&round to the body element
this chan&es the back&round color o" the entire web pa&e. 13e saw an e7ample o" this in
)Tinkerin&+.2 @ot only can you chan&e an element6s back&round color you can chan&e the te7t
color at the same time:
&xample '.. %ext and ,ac.ground Color
-. Dp styleMNback&round: yellowJ color: purpleNE
,. ThereRs a yellow rose in Te7as That 5 am &oin& to seeDbrE
3. @obody else could miss her @ot hal" as much as me.DbrE
:. 8he cried so when 5 le"t her 5t like to broke my heartDbrE
<. And i" 5 ever "ind her 3e nevermore will part. DbrE
=. D%pE
The para&raph has two properties background and color. 3hen you apply multiple properties
you can add them in any order but you must separate them with a semicolon. 5" you "or&et the
semicolon:
-. Dp styleMNback&round: yellow color: purpleNE
,. ThereRs a yellow rose in Te7as That 5 am &oin& to seeDbrE
3. @obody else could miss her @ot hal" as much as me.DbrE
:. 8he cried so when 5 le"t her 5t like to broke my heartDbrE
<. And i" 5 ever "ind her 3e nevermore will part. DbrE
=. D%pE
then the browser interprets this as settin& the back&round color to the value yellow color:
purple. 8ince yellow color: purple is not a valid color the browser does nothin& 1and
you mi&ht be le"t puLLlin& over why your styles aren6t appearin&2.
The results .7ample ,.-- )Te7t and >ack&round Color+ are particularly &arish and di""icult to
read. This brin&s up an important point: it is very easy to &o wron& when choosin& te7t and
back&round colors. Use the color and back&round properties with caution.
#nline Color Styles
Althou&h so "ar we6ve only applied the color properties to block elements such as body and p you
may apply the color properties to inline elements as well includin& the elements "rom )#ont
8tyles+. #or e7ample
-. DpE
,. Dstron& styleMNcolor: redNE9A@/.$:D%stron&E #lyin& monkeys.
3. D%pE
The red color applies to the strong element but not to the rest o" the para&raph.
5" you ?ust want to chan&e the color o" a selection o" te7t without also makin& it bold or italic there
is a special inline element called the span element. The span element )does nothin&+ by de"ault
and so it is sa"e "or applyin& styles without a""ectin& anythin& else. 3e6ll discuss this element
"urther in the section )9iv and 8pan+.
*ote
Althou&h you may apply the style attribute to a wide array o" elements there are some
e7ceptions. #or e7ample you mi&ht think you can chan&e the color o" the title in your browser6s
titlebar by addin& a style attribute to the title element. 'owever this is invalid 'T(L and
the browser i&nores it.
5n &eneral you may apply style to nearly any element that "alls under body includin& body itsel".
Specifying Colors
5n the previous e7amples we were usin& color keywords such as red green and so on. 3hat
other words are available; The answer it it depends on your browser.
'ere are si7teen color keywords that are nearly universal across all browsers that support color:
=igure '.. Standard Color Ceywords
The numbers a"ter the pound si&n 1Y2 are called he7 codes. 'e7 codes are another way to represent
colors in 'T(L. 5t &ets a little technical a"ter this so han& onO
*ote
Those o" you who &rew up in the -K=0s and e7perienced the )@ew (ath+ mi&ht have a small
advanta&e here. 8ee 5 bet you thou&ht you6d never use that stu"" a&ain4
/ex Codes
.ach o" the si7 numbers in a he7 code is a he7adecimal or base0-= number.
5n the ordinary decimal system each numeral 100K2 represents a power o" ten. !ou need ten
symbols to represent decimal numbers: 0 - , 3 : < = F G and last but not least K.
3ith two decimal numerals the hi&hest number you can make is )KK+. )K+ in the tens place
Z )K+ in the ones place M 1nine 7 ten2 Z 1nine 7 one2 M K0 Z K M KK.
5n a he7adecimal system each numeral represents a power o" si7teen and so you need
si7teen symbols 100K and a b c d e "2. 'ere a M -0 1decimal2 b M -- 1decimal2 and so on
up to " M -< 1decimal2.
3ith two he7adecimal numerals the hi&hest number you can make is )""+ which is ,<< in
decimal notation. )"+ in the si7teens place Z )"+ in the ones place M 1"i"teen 7 si7teen2 Z
1"i"teen 7 one2 M ,:0 Z -< M ,<<.
A color he7 code consists o" three two0di&it he7adecimal numbers. .ach number indicates how
much red &reen and blue the browser should display. The "irst he7 number indicates how much red
to use the second indicates the amount o" &reen and the third speci"ies the blue: $$//>>. 11
means )use none o" this color+ while !! means )use as much o" this color as possible.+
#i&ure ,., )'e7 Code Y""KK33+ demonstrates how this works. The he7 code Y""KK33 provides the
ma7imum amount o" red a middlin& amount o" &reen and a small amount o" blue. (i7in& the three
to&ether results in an oran&e0ish color.
=igure '.'. /ex Code DffAA++
'ere are some more e7amples:
color: 2!!1111 M All red no &reen no blue. $esult: bri&ht red.
color: 211!!!! M @o red all &reen all blue. $esult: bri&ht teal 1or )aIua+2.
color: 2111111 M @o red no &reen no blue. $esult: black.
color: 2!!!!!! M All red all &reen all blue. $esult: white.
color: 2cc33!! M A lot o" red some &reen all blue. $esult: lavender.
'e7 codes can be uppercase or lowercase. Xust don6t "or&et the pound si&n at the be&innin&. There
are actually several more ways to speci"y colors but color names and he7 codes are the most
common.
/ex Codes vs. Color *ames: (hich is ,etter:
'e7 codes are a bit harder to understand than color names particularly i" you6re not used to
he7adecimal notation. 'owever it6s probably better to use he7 codes anyway.
#irst he7 codes provide much more "le7ibility you can speci"y about -= million di""erent
combinations with he7 codes. 1(any computers can6t display that many colors but that6s another
matter.2
8econd he7 codes are more stable and universal. 8imple color names such as )red+ and )black+
will work in ?ust about any browser but support "or "ancy color names 1)papayawhip+;
)e&&shell+;2 is a bit dod&ier. 5t6s best to stick with he7 codes which work universally.
1in.s
3ithout hyperlinks the 3eb wouldn6t be )the 3eb+. This section e7plains how to create links to
other websites 1e7ternal links2 and links within your own website 1internal links2.
%he a &lement
The anchor element a creates links. 'ere6s an e7ample:
&xample '.'. &xternal 1in.s
-. DpE
,. A link to Da hre"MNhttp:%%www.&oo&le.com%NE/oo&leRs
3. home pa&eD%aE.
:. D%pE
<. DpE
=. A link to
F. Da hre"MNhttp:%%www.&oo&le.com%help%basics.htmlNEa
G. pa&e within /oo&leD%aE.
K. D%pE
The synta7 is strai&ht"orward: the hre! attribute indicates where the link should &o and the te7t
between the <a> and </a> ta&s becomes the hi&hli&hted link te7t.
Anchor %itles
The optional title attribute allows you to provide a little e7tra in"ormation about the link. 8ome
older browsers i&nore this attribute but most modern browsers produce a little "loatin& )tooltip+ i"
you hover your mouse over the link.
&xample '.+. %he title Attribute
-. Can physics be
,. Da hre"MNhttp:%%www.dctech.com%physics%humor.phpN
3. titleMNThe most hilarious collection o" physics
:. humor anywhere4NE"unnyD%aE;
<. 5s that a rhetorical Iuestion;
!ou can use the title attribute to indicate where the link is &oin& or provide some other use"ul
in"ormation. 5t6s ni"ty but it doesn6t hurt to leave it out either.
Components of the UR1
To construct links to other websites we need to understand the structure o" the U$L. Let6s take a
closer look at the U$L )http://www.google.com/help/basics.html+:
The protocol 1)http://+2: 8peci"ies that we would like to use the 'TT* 1'yperTe7t
Transport2 protocol. This is the standard protocol "or retrievin& web pa&es althou&h there
are others such as #T* 1#ile Trans"er *rotocol2 and 'TT*8 18ecure 'yperTe7t Transport
*rotocol2. (ost o" the time thou&h you6ll be usin& )http:%%+ to retrieve pa&es "rom e7ternal
sites.
!ou may speci"y the protocol in upper case lower case or anythin& in between but most
people use all lower case.
The website 1)www.google.com+2: This speci"ies that we would like to access a pa&e
"rom &oo&le.com. (ore technically it means:
-. /o to the top0level domain )com+ 1a collection o" many millions o" websites2.
,. 3ithin )com+ "ind the the domain name )&oo&le+.
3. 3ithin )&oo&le+ "ind the the sub0domain named )www+.
#indin& the website is similar to "indin& a mailin& address. The address )-=00 *ennsylvania
Avenue @3 3ashin&ton 9C ,0<00+ means: &o to the Lip code ),0<00+J within ),0<00+
"ind the city )3ashin&ton 9.C.+J within )3ashin&ton 9C+ "ind the buildin& )-=00
*ennsylvania Avenue @3+.
As with the protocol above you may use any case you like "or speci"yin& the website
althou&h most people use all lower case.
The file path 1)/help/basics.html+2: This speci"ies that we would like to access the
"ile basics.html which is inside the directory help/.
Unlike the other components the "ilepath can be case0sensitive. 9ependin& on the website
you6re visitin& the "ile Basics.html mi&ht be di""erent "rom the "ile basics.html.
(aitE (hich =ile (as %hat Again:
This is a little odd in our "irst e7ample )http:%%www.&oo&le.com%+ we didn6t speci"y a "ile or a
directory. 8o what did we ask "or e7actly;
#irst it turns out the directory is speci"ied. The sin&le "orward slash 1)%+2 represents the )root+ or
)top0level+ directory o" the website. 3e6re askin& /oo&le to &ive us a "ile "rom the top directory o"
its website.
Bkay but which "ile are we askin& "or; 3e didn6t speci"y the name o" the "ile e7plicitly we ?ust
asked "or a directory. This means means we6re askin& /oo&le )/ive us the de"ault "ile "or that
directory i" you have one.+ As it turns out /oo&le is &oin& to &ive us a "ile named )inde7.html+
but the e7act name could be anythin&. 5t6s up to /oo&le.
#nternal lin.s
5nternal links are similar to e7ternal links e7cept that you can leave o"" the protocol and website
name. !ou only need to speci"y the "ile path.
#ile paths "or internal links can be absolute or relative. Absolute links always be&in with a "orward
slash. They speci"y a path that starts at the root directory o" your web server. $elative links never
be&in with a "orward slash. They speci"y a path that is relative to the pa&e that the link is on.
.7amples o" absolute links:
hre!'"/": /o to the web root directory and &et the de"ault "ile. 1The home pa&e o"
&oer.or&.2
hre!'"/4$5%/: /o to the web root directory then the 4$5% directory and &et the de"ault
"ile. 1The "irst pa&e o" this tutorial.2
hre!'"/4$5%/basic/links/index.html": /o to the web root directory then the
4$5% directory then the basic directory then the links directory and &et the "ile
index.html 1This pa&e.2
.7amples o" relative links 1relative to this pa&e
http:%%www.&oer.or&%'T(L%basic%links%inde7.html2:
hre!'"index.html": /et the index.html "ile that is in the current directory. 1This
pa&e.2
hre!'"../": /o up one directory "rom the current directory and &et the de"ault "ile. 1The
"irst pa&e o" Chapter ,.2
hre!'"../../introduction/": /o up two directories "rom the current directory
enter the introduction directory and &et the de"ault "ile. 1The "irst pa&e o" Chapter -.2
As the e7amples demonstrate U$Ls can vary in comple7ity while still pointin& to the same
location.
#or pa&es that are )near+ the current pa&e relative links are o"ten simpler. $elative links also work
better i" you are workin& with "iles on your desktop as opposed to a real websever.
>ecause absolute links are the same no matter where you are on the website they6re &ood "or
standard navi&ation links header and "ooter links. 'owever absolute links don6t work as well i"
you are ?ust messin& around with "iles on your desktop. Bn a webserver an absolute link such as
/4$5%/index.html starts with the webserver6s root directory. >ut on your local desktop there
is no )webserver root directory+ and so your computer attempts to "ollow the "ilepath
/4$5%/index.html "rom the root directory o" your hard drive. 5n &eneral this will "ail.
1in.ing (ithin )ages
3e can link to web pa&es in e7ternal websites and internal websites. 3hat about linkin& to a
particular location in a pa&e;
All elements provide this capability throu&h the id attribute. Bnce you6ve assi&ned an id to the
element you can link directly to the location on the pa&e where the element appears:
&xample '.2. 1in.ing to an #"
-. Dh, idMN"ruitbat[mi&ratoryNE
,. (i&ratory *atterns o" the #ruit >at
3. D%h,E
:. ...
<. ...
=. ...
F. DpE
G. Da hre"MNY"ruitbat[mi&ratoryNElink to R(i&ratory *atterns o" the #ruit >atRD%aE.
K. D%pE
-0....
The id6s value is !ruitbat6migratory. #urther down the pa&e we have a link to this 59
speci"ied by hre!'"2!ruitbat6migratory".
!ou can combine named anchors with lon&er U$Ls: "or e7ample
http://www.goer.org/4$5%/basic/links/2parts.
The pound si&n in the U$L makes the link point to the named anchor. 5" we had accidentally written
hre!'"parts" that would have been a relative link to the directory named )parts+.
Caution
@ever &ive two elements the same 59 on the same pa&e.
#mages
Bnce you understand links addin& ima&es is strai&ht"orward.
5ma&es are a little di""erent than the 'T(L headin&s and para&raphs that we6ve seen so "ar. An
ima&e is actually a separate "ile that you embed in your web pa&e usin& the img element. Let6s see
how this works:
&xample '.4. &xample #mage
-. DpE
,. !et more evidence that 5 did not &o to Art 8chool:
3. D%pE
:. Dim& srcMN%ima&es%html%oscope.&i"N altMNa cartoon o" an oscilloscopeNE
To try this e7ample on your own you not only need to copy the 'T(L but you also need to
download the ima&e )oscope.&i"+ to your system. 5" you don6t know how to do this re"er to )8ave
5ma&es+. 8ave the "ile in the same directory as your test pa&e and try it out.
The img element has two reIuired attributes:
The src attribute provides a U$L that points to the ima&e "ile. 5" the U$L is missin& or
incorrect the ima&e won6t appear. The src attribute is very similar to the hre! attribute o"
the a element. 5t6s too bad that they couldn6t both be called )hre"+ because then this would
all be easier to remember.
The alt attribute provides )alternative te7t+ "or the ima&e should the ima&e not be
displayable. This could happen i" the user turns o"" ima&es in their browser or uses a
browser that doesn6t support ima&es 1such as a te7t0only browser or a screen reader2. The
alternative te7t could also appear while the user is waitin& "or the ima&e to download or i"
the link to the ima&e is broken.
8ome browsers display the alt te7t as a )tooltip+ that pops up i" you hover your mouse
over the ima&e. 8trictly speakin& this is incorrect behavior because the alt attribute is "or
when the ima&e cannot be displayed. To provide )e7tra in"ormation+ about an ima&e use the
optional title attribute instead.
An ima&e "ile is not coded in the 'T(L lan&ua&e. 5ma&es have their own "ormats such as /5#
X*./ or *@/. There are several ways to acIuire or create di&ital ima&es:
take a photo with a di&ital camera
use drawin& so"tware to create a di&ital ima&e
download an ima&e o"" the web usin& your browser6s 8ave 5ma&e "unction
*ote
5t6s "ine to mess around with ima&es "or learnin& purposes but please don6t publish someone
else6s ima&es on a website unless you know you have the owner6s permission.
=loating #mages
*ositionin& elements in 'T(L can be tricky and we6ll be talkin& about how to do this in the more
advanced sections o" this tutorial. That said let6s take a sneak preview at one o" the basic concepts
o" positionin&: the !loat property.
&xample '.5. =loating #mages
-. Dh-E@ot !our #atherRs Bscilloscope...D%h-E
,.
3. Dim& srcMN%ima&es%html%oscope.&i"N hei&htMN=:N widthMNK0N
:. altMN$i&ht0"loatin& oscilloscopeN
<. styleMN"loat: ri&htNE
=.
F. DpE
G. The DbE(odel CX0,000D%bE:
K. \uality Iuality Iuality. ThatRs what our bosses
-0.asked "or when we desi&ned the CX0,000 and thatRs
--.what we delivered. Bur competitors claim to deliver
-,.NIualityN... but do they; 8ure they prattle on about
-3.about sample rates picosecond%div sweep rates
-:.#ast #ourier Trans"orms and other technical
-<.mumbo0?umbo. >ut the "act is that the CX0,000 is
-=.li&ht0years ahead o" the competition. #rom the
-F.scratch0resistant chrome case to the innovative
-G.&reen phosophorescent screen only one word should
-K.sprin& to mind when you look at the CX0,000: Iuality.
,0.D%pE
The !loat: right directive does somethin& peculiar: it removes the ima&e "rom the re&ular
"low o" the pa&e and )"loats+ it to the ri&ht. The para&raph "lows around the ima&e. 5" we had
speci"ied !loat: le!t the ima&e would "loat to the le"t o" the para&raph. 1Try it42
Xust like the color and background properties you can actually apply the !loat property to
nearly any element. 3e6ll return to this concept later.
1ists
'T(L provides several ways to display lists o" in"ormation:
unordered lists: bulleted lists 1like this one2
ordered lists: numbered lists procedures "ormal outlines
de"inition lists: lists o" terms and de"initions
Lists are di""erent "rom anythin& we6ve covered so "ar because &eneratin& a list reIuires at least
two elements workin& to&ether.
$rdered 1ists
Brdered lists are contained by an ol element. 3ithin the <ol> and </ol> ta&s each list item is
de"ined by an li element:
&xample '.6. $rdered 1ists
-. Dh3E(y 9ot0com >usiness *lanD%h3E
,.
3. DolE
:. DliE>uy domain nameD%liE
<. DliE*ut up websiteD%liE
=. DliE;;;D%liE
F. DliE*ro"it4D%liE
G. D%olE
The de"ault ordered list uses arabic numerals 1- , 3 O2 but you can easily alter this behavior.
9irectly within the ol element you can only include li elements. 'owever within the li
elements you may place nearly any 'T(L content that you want: te7t para&raphs ima&es even
another list.
&xample '.;. *ested $rdered 1ist
-. Dh3E8chedule "or (ondayD%h3E
,.
3. Dol styleMNlist0style0type: upper0romanNE
:. DliE8uppress /aul
<. Dol styleMNlist0style0type: upper0alphaNE
=. DliETwo more le&ions or three;D%liE
F. DliE3here to put victory arch; #orumRs lookin& crowded...D%liE
G. D%olE
K. D%liE
-0. DliE'ave Cicero killedD%liE
--. DliELunchD%liE
-,. DliE'ead0and0hands0on0pike viewin& at the #orum 1casual dress ok;2D%liE
-3.D%olE
*lacin& one list within another is a nested list. The outer list will use upper0case $oman numerals
and the inner list will start countin& independently usin& upper0case letters. There are a lar&e
number o" available list0style0types "or ordered lists. The most common and well0supported values
are upper7roman lower7roman upper7alpha lower7alpha and the de"ault
decimal. 5" "or some reason the browser doesn6t understand the value you speci"y it ?ust "alls
back to the de"ault 1decimal numbers2.
!ou can use ol "or any list o" items where the order is important. This includes outlines
procedures TB9B lists lists o" ranked items.
Unordered 1ist
Unordered lists are similar to ordered lists e7cept that they do not have a particular order.
Unordered lists even recycle the li element which makes it easy to turn an ordered list into an
unordered list and vice0versa. All you need do is turn your ols into uls:
&xample '.A. Unordered 1ist
-. Dh3E(y 9ot0com >usiness *lanD%h3E
,.
3. Dul styleMNlist0style0type: sIuareJ color: Y00KK00NE
:. DliE>uy domain nameD%liE
<. DliE*ut up websiteD%liE
=. Dli styleMNlist0style0type: discJ color: Y""0000NE;;;D%liE
F. DliE*ro"it4D%liE
G. D%ulE
5n the parent element ul we6ve speci"ied that the list should be &reen and that the bullets should be
sIuares. 3e overrode this behavior in the third bullet point speci"yin& a red circular bullet. @otice
how the style cascades "rom the parent element to the child elements each bullet takes on the
characteristics o" its parent unless we speci"y otherwise.
Brdered and unordered lists indent everythin& enclosed by the ul or ol block. !ou mi&ht be
tempted to use ul to indent any old 'T(L:
<ul>
$his is an indented paragraph.
</ul>
9on6t do this. This is incorrect 'T(L and there are better ways to achieve the same e""ect as we6ll
see in )Ali&n and 5ndent+. 3hile we6re on the sub?ect li elements must always be enclosed by a
ul or ol element. 9on6t put li elements directly in the body o" the documentJ this is also bad
practice.
"efinition 1ists
A de"inition list provides a list o" terms and de"initions. 9e"inition lists reIuire three elements to
construct:
dl: 9enotes the de"inition list itsel". 3ithin the dl you may only include dt and dd
elements.
dt: 9enotes a term within the de"inition list. 3ithin the dt you may only include inline
content such as plain te7t and inline style elements.
dd: 9enotes a de"inition "or a term. 3ithin the dd you may include any block or inline
content: para&raphs other lists whatever you like.
A de"inition list consists o" terms 1dt2 immediately "ollowed by de"initions 1dd2.
&xample '.'B. "efinition 1ist
-. Dh-EThe 9evilRs 9ictionaryD%h-E
,.
3. DdlE
:. DdtEA>8U$95T! n.D%dtE
<. DddEA statement or belie" mani"estly inconsistent with
=. oneRs own opinion.D%ddE
F.
G. DdtEACA9.(. n.D%dtE
K. DddEAn ancient school where morality and philosophy were
-0. tau&ht.D%ddE
--.
-,. DdtEACA9.(! n.D%dtE
-3. DddES"rom ACA9.(.T A modern school where "ootball is
-:. tau&ht.D%ddE
-<.
-=. DdtEACC59.@T n.D%dtE
-F. DddEAn inevitable occurrence due to the action o" immutable
-G. natural laws.D%ddE
-K.D%dlE
!ou may provide multiple de"initions "or a term or even multiple de"initions and multiple terms
althou&h this is less common. 8ome people also use de"inition lists to mark up screenplays and
other e7chan&es o" dialo&ue: the speaker is a dt and their dialo&ue is a dd. 5" you6re writin&
technical manuals you can use de"inition lists to document variables inter"ace components and
more. 9e"inition lists are &ood "or any )listed in"ormation that comes in pairs.+
Con&ratulations you6ve "inished the basic section4 5n the ne7t section we learn about advanced "ont
stylin& ali&nment mar&ins and borders. $ead on "or moreO
Chapter +: Styling ,asics
8o "ar we6ve learned some basic 'T(L constructs: para&raphs headin&s and lists. That6s all very
nice but by themselves these elements are kind o" li"eless. An h* is ?ust like any other h* out
thereO ri&ht;
#ortunately no. 3e can customiLe the appearance o" our h*s 1and any other element2 usin& a
lan&ua&e called Cascadin& 8tyle 8heets 1C882. 3e already saw a hint o" what style sheets can do
when we were muckin& around with the "ore&round color and back&round color. >ut C88 can do
much more than this.
As an e7ample o" what C88 can do take a walk throu&h the C88 ]en /arden. .ach pa&e in the
C88 ]en /arden has e7actly the same te7t and markup. The only di""erence is the C88 but each
pa&e appears radically di""erent.
#irst we6re &oin& to learn a new method "or applyin& styles that is much more e""icient than what
we6ve been doin& in the previous chapters. At "irst we6ll only be chan&in& the color because color
is simple and &ets the point across. >ut by the end o" this chapter you6ll have e7panded your style
vocabulary dramatically.
Create a style sheet "or your web pa&e or "or your entire web site.
Create named reusable styles usin& classes and 59s.
Apply sophisticated "ont chan&es to any 'T(L element.
Chan&e the paddin& mar&ins and borders.
Ali&n and indent your te7t.
Section Summaries
The 8tylin& >asics chapter contains these sections:
-. The style Attribute 9escribes the basic problem that style sheets are desi&ned to solve.
,. 8tyle 8heets 9escribes style sheets which provide a convenient method "or collectin&
stylin& rules in one place and applyin& them to an entire website. 3e6ll cover C88 rule
synta7 and the basics o" cascadin&.
3. Classes and 59s .7plains how to create more specialiLed C88 rules by usin& C88 classes
and 59s.
:. 9iv and 8pan 9escribes the )&eneric+ 'T(L elements di0 and span which provide a
way to apply styles to any &iven swath o" 'T(L.
<. #ont Control *rovides more sophisticated methods "or controllin& a document6s "ont. 3e
e7amine how to chan&e the "ont "amily "ont siLe and "ont stylin&. 3e6ll also take a look at a
stylesheet that is a bit more comple7 than the ones we6ve seen in earlier sections.
=. >orders .7plains how to set border properties such as color and thickness how to set
di""erent borders on all "our sides and how to use border shorthand notation.
F. (ar&ins and *addin& 9escribes paddin& 1e7tra space inside an element6s border2 and
mar&ins 1e7tra space outside an element6s border2.
G. Ali&n and 5ndent 9escribes te7t indentation and ali&nment. 3e6ll learn how to create
han&in& indents and ali&n te7t horiLontally. 1Ali&nin& blocks will come later in the sections
on positionin&.2
%he style Attribute
8o "ar we6ve dealt with two ma?or components to our web pa&es: the elements which de"ine the
basic structure o" the pa&e and the stylin& which "urther re"ines how the pa&e should look. 3e saw
the e""ects o" stylin& in )Colors+:
&xample +.. Red )aragraph >Redux?
-. DpE
,. The &randmother lived out in the wood hal" a lea&ue "rom the villa&e
3. and ?ust as Little $ed0Cap entered the wood a wol" met her. $ed0Cap
:. did not know what a wicked creature he was and was not at all a"raid
<. o" him.
=. D%pE
F. Dp styleMNcolor: redNE
G. R/ood day Little $ed0CapR said he.
K. D%pE
-0.DpE
--. RThank you kindly wol".R
-,.D%pE
@ow it6s nice that we can make a sin&le para&raph red but what i" we wanted all para&raphs to be
red; Br what i" we wanted to do somethin& more than ?ust chan&in& the para&raph6s color;
5n the early -KK0s the only way to do control the color siLe and "ont o" your te7t was the !ont
element. 8o people wrote a lot o" 'T(L that looked like this:
&xample +.'. %he font &lement
-. D>ED5ED#B@T 8iLeMNZ,NE
,. D#B@T #AC.MN*alatino Arial 'elveticaNE
3. D#B@T colorMNY""0000NE
:. Qneel >e"ore the *ower o" the #ont .lement4
<. D%#B@TE
=. D%"ontED%#ontED%iED%>E
F.
G. DpED#B@T 8iLeMN0-NE
K. D#B@T #AC.MNArial 'elvetica sans0seri"NE
-0.D#B@T colorMNY-,3:<=NE
--.Bw4 The bad 'T(L code4 5t burns us burns us precious4
-,.D%"ontED%"ontED%#o@tED%pE
This was a tremendous pain "or many reasons. !ou had to keep typin& this kind o" markup all over
the pa&e and i" your boss told you later on to chan&e the "ont siLe you had to redo all this code
a&ain.
The style attribute is an improvement over the !ont element but it still su""ers "rom the same
basic problem: it isn6t reusable. !ou don6t want to have to add a style element to every element
on the pa&e. #ortunately there is a much better way to do all o" this. These days you should never
use the !ont element and the style attribute only sparin&ly i" at all. 5n the ne7t section we6ll
look at a much better way to do this.
Style Sheets
.very time we6ve speci"ied style'"8something9" we6ve actually created a C88 rule.
Althou&h C88 1Cascadin& 8tyle 8heets2 is a di""erent lan&ua&e "rom 'T(L proper it is an
indispensable tool "or controllin& the appearance o" your website. Think o" each webpa&e as havin&
three components:
Structure: The markup is like the pa&e6s skeleton. 5t provides the basic structure "or the
pa&e: headin&s sections para&raphs lists and more. 3ithout structure your web pa&e
would ?ust be an undi""erentiated blob o" te7t.
Content: The content 1te7t ima&es and even audio or video2 is like the pa&e6s flesh. This is
the )meat+ o" the pa&e. 3ithout content there6s nothin& to read and no reason to visit the
pa&e in the "irst place.
)resentation: The C88 is the pa&e6s skin, hair, clothes, and makeup. 3ithout presentation
your pa&e mi&ht be readable but it won6t be very attractive.
8o "ar we6ve only been workin& with individual styles applied to individual elements. Althou&h this
works it is not the most e""icient way to apply our styles. A "ar better techniIue is to collect all our
C88 rules in one place a style sheet and then apply the style sheet to every sin&le element on the
pa&eO or "or that matter every sin&le element throu&hout the entire website. Let6s see how this
works.
&mbedded Style Sheets
An embedded style sheet a""ects every element on the pa&e. 5n order to create an embedded style
sheet we need to &o to the head o" the document. 1$emember the head element ; #inally here6s
somethin& else that &oes there besides the title element.2
'ere6s an e7ample o" an embedded style sheet 1please "or&ive the &arish &reen0on0yellow2:
&xample +.+. All !reen )aragraphs
-. DhtmlE
,. DheadE
3. DtitleE3hen 5rish .yes Are 8milin&D%titleE
:. Dstyle typeMNte7t%cssNE
<. p ^color: Y00G000J back&round: Y""""00_
=. D%styleE
F. D%headE
G. DbodyE
K. Dh-E3hen DemE5rish .yesD%emE Are 8milin&D%h-E
-0. DpE
--. 'ereRs how the chorus &oes:
-,. D%pE
-3. DpE
-:. 3hen 5rish eyes are smilin&DbrE
-<. DemE8ure Rtis like the morn in 8prin&.D%emEDbrE
-=. 5n the lilt o" 5rish lau&hterDbrE
-F. DemE!ou can hear the an&els sin&.D%emEDbrE
-G. 3hen 5rish hearts are happyDbrE
-K. DemEAll the world seems bri&ht and &ay.D%emEDbrE
,0. And when 5rish eyes are smilin&DbrE
,-. DemE8ure they steal your heart away.D%emE
,,. D%pE
,3.D%bodyE
,:.D%htmlE
The synta7 is a little di""erent "rom what we are used to but the core idea 1the C88 rule2 should
look "amiliar. Let6s e7amine the style sheet6s components:
<style type'"text/css">: The style element indicates the be&innin& o" the style
sheet. 5t must &o inside the head. The type attribute speci"ies that you are usin& a C88
style sheet as opposed to usin& some other yet0to0be0invented style sheet lan&ua&e. 5t6s a bit
silly but the 'T(L speci"ication reIuires it so &o ahead and add it.
p: The C88 selector. This says )do somethin& to all p elements.+
:color: 211;111< background: 2!!!!11=: The C88 declarations. 3e6ve seen
these be"ore in the style element althou&h without the curly braces. To&ether with the
selector p the declarations constitute a C88 rule: )make all para&raphs &reen te7t with a
bri&ht yellow back&round.+ As mentioned in )>ack&round Color+ you must separate
multiple declarations with a semicolon.
*ote
!ou will sometimes see people wrap their embedded C88 rules in an 'T(L comment like so:
<style><>77 p :color: 211;111<= 77></style>. This is a trick that hides your C88
rules "rom e7tremely ancient browsers that cannot process C88 at all namely (osaic and @etscape
@avi&ator -.0. #ortunately these browsers are lon&0dead and there is no need to do this anymore.
@ow we could have achieved the same e""ect by addin& these declarations to the style attribute
o" each para&raph. The key di""erence is that the style sheet a""ects all para&raphs. The selector
enables us to speci"y the declarations once and the browser then applies them to all elements that
match the selector.
0ultiple CSS Rules and Selectors
!ou may speci"y as many rules as you like in a style sheet. Consider the "ollowin&:
&xample +.2. !reen )aragraphsE Red ,ody
-. DhtmlE
,. DheadE
:. DstyleE
<. body ^back&round: Y""0000_
=. p ^color: Y00G000J back&round: Y""""00_
F. D%styleE
G. D%headE
K. DbodyE
-0. Dh-E3hen DemE5rish .yesD%emE Are 8milin&D%h-E
--. DpE
-,. 'ereRs how the chorus &oes:
-3. D%pE
-:. DpE
-<. 3hen 5rish eyes are smilin&DbrE
-=. DemE8ure Rtis like the morn in 8prin&.D%emEDbrE
-F. 5n the lilt o" 5rish lau&hterDbrE
-G. DemE!ou can hear the an&els sin&.D%emEDbrE
-K. 3hen 5rish hearts are happyDbrE
,0. DemEAll the world seems bri&ht and &ay.D%emEDbrE
,-. And when 5rish eyes are smilin&DbrE
,,. DemE8ure they steal your heart away.D%emE
,3. D%pE
,:.D%bodyE
,<.D%htmlE
'ere we6ve speci"ied that the body o" the pa&e should have a red back&round while all para&raphs
should have a yellow back&round with &reen te7t. This color combination is so aw"ul that 5 am
loathe to discuss this e7ample "urther. Let6s move on.
The key "eature o" C88 rules is that they are reusable. 3e6ve already seen that we can use them to
apply a set o" C88 declarations to say all p elements. >ut it &ets better we can also &ive a rule
with multiple selectors. Xust separate the selectors with commas:
element1? element2 : declarations =
This applies the declarations to both element1 and element2. #or e7ample:
&xample +.4. !reen )aragraphs and /eadings
-. DhtmlE
,. DheadE
:. DstyleE
<. p h- ^color: Y00G000J back&round: Y""""00_
=. D%styleE
F. D%headE
G. DbodyE
-0. DpE
-,. D%pE
-3. DpE
,,. D%pE
,3.D%bodyE
,:.D%htmlE
@ow the &reen te7t and yellow back&round applies to para&raphs and level - headin&s.
8o "ar we6ve only seen simple selectors that ?ust select a sin&le element. 'owever you can desi&n
selectors to be more )choosy+ than this. Bne o" the most use"ul variations is:
element1 element2 : declarations =
This looks similar to .7ample 3.< )/reen *ara&raphs and 'eadin&s+ but notice there is no comma
between the elements. That one little comma makes a bi& di""erence. This rule applies its
declarations only to element+s that are contained within element*s. Let6s see how this works:
&xample +.5. !reen paragraphsE ,lue ems
-. DhtmlE
,. DheadE
:. DstyleE
=. h- em ^ color: Y0000"" _
F. D%styleE
G. D%headE
K. DbodyE
-0. Dh-E3hen DemE5rish .yesD%emE Are 8milin&D%h-E
--. DpE
-,. 'ereRs how the chorus &oes:
-3. D%pE
-:. DpE
-<. 3hen 5rish eyes are smilin&DbrE
-=. DemE8ure Rtis like the morn in 8prin&.D%emEDbrE
-F. 5n the lilt o" 5rish lau&hterDbrE
-G. DemE!ou can hear the an&els sin&.D%emEDbrE
-K. 3hen 5rish hearts are happyDbrE
,0. DemEAll the world seems bri&ht and &ay.D%emEDbrE
,-. And when 5rish eyes are smilin&DbrE
,,. DemE8ure they steal your heart away.D%emE
,3. D%pE
,:.D%bodyE
,<.D%htmlE
This speci"ies em elements to be blue if and only if they are contained within an h*. The em in the
h* at the top o" the pa&e turns blue but the ems in the para&raphs below are una""ected.
3e6ll see a couple more e7amples o" use"ul selectors in )Classes and 59s+. #or a complete list o"
selector synta7 re"er to the o""icial C88 speci"ication.
Style Sheet Cascading
3hat happens when C88 rules con"lict; 'ere6s where the )Cascadin&+ part o" Cascadin& 8tyle
8heets comes in. The o""icial rules are complicated but they basically boil down to )whichever C88
rule is `nearer6 or `more speci"ic6 wins.+
$eturnin& to our son& lyric e7ample let6s say we didn6t want the "irst para&raph to be in &reen te7t:
&xample +.6. $ne !reen )aragraph
-. DhtmlE
,. DheadE
=. D%styleE
F. D%headE
G. DbodyE
-0. Dp styleMNcolor: Y000000NE
-,. D%pE
-3. DpE
,,. D%pE
,3.D%bodyE
,:.D%htmlE
The "irst para&raph has black te7t. Bur style attribute is more speci"ic than the &eneral pa&e0level
C88 and so the black0te7t rule overrides the &reen0te7t rule. 'owever the para&raph still has a
yellow back&round. The yellow0back&round rule cascades down to this para&raph because we
didn6t speci"y anythin& about it.
Another important cascadin& rule is that parent elements apply their style to their children 1enclosed
elements2. $ules applied to the body element cascade down to enclosed p elements rules applied
to p elements cascade down to enclosed em elements and so on. 5n "act we saw this "orm o"
cascadin& in .7ample 3.: )/reen *ara&raphs $ed >ody+. The back&round o" the pa&e is red and
any child elements also have a red back&roundO e7cept "or para&raphs which speci"ically override
this rule.
Reusable Style Sheets
3hat6s better than applyin& styles to an entire pa&e; Applyin& it to an entire website.
C88 enables you to place your style sheet in a separate "ile. The stylesheet then becomes a central
repository o" C88 rules that you can apply to any pa&e in a site. There are two ways to )call+ a
&lobal style sheet into a &iven pa&e:
&xample +.;. !lobal Style Sheets: %he 8lin.9 0ethod
-. DhtmlE
,. DheadE
:. Dlink relMNstylesheetN hre"MN%css%style-.cssN typeMNte7t%cssNE
<. Dlink relMNstylesheetN hre"MN%css%style,.cssN typeMNte7t%cssNE
=. DstyleE
F. p ^color: Y00G000J back&round: Y""""00_
G. D%styleE
K. D%headE
&xample +.A. !lobal Style Sheets: %he 8Fimport9 0ethod
-. DhtmlE
,. DheadE
:. DstyleE
<. aimport url1N%css%styles3.cssN2J
=. aimport url1N%morecss%styles:.cssN2J
F. body ^back&round: Y""0000_
G. p ^color: Y00G000J back&round: Y""""00_
K. D%styleE
-0.D%headE
The two methods have biLarrely di""erent synta7 but "unctionally they are similar. They both allow
you to speci"y multiple stylesheet "iles and you may use them both in con?unction with an
embedded style sheet.
A linked style sheet also a""ects the rules "or cascadin&:
A rule in a linked style sheet has low priority.
A rule in an embedded style sheet has medium priority.
A declaration in a style attribute has hi&h priority.
This means you can speci"y a style in a linked style sheet override that style "or a particular pa&e
and then override it again "or a particular element. #or e7ample i" we have the pa&e:
-. DhtmlE
,. DheadE
3. DtitleE3hat is your "avorite color;D%titleE
:. Dlink relMNstylesheetN hre"MN%css%style.cssN typeMNte7t%cssNE
<. DstyleE
=. em ^color: yellow_
F. D%styleE
G. D%headE
K. DbodyE
-0. (y "avorite color is Dem styleMNcolor: blueNEblueD%emE.
--.D%bodyE
and the linked stylesheet )style.css+ contains:
em :color: blue=
then the browser uses the "ollowin& lo&ic to color the em:
-. The linked style sheet speci"ies the em to be blue.
,. The embedded style sheet speci"ies the em to be yellow overridin& the linked style sheet.
3. The style attribute speci"ies the em to be blue a&ain overridin& the embedded style sheet.
8o the resultin& color is )blue+. 3hew.
Classes and #"s
The last section demonstrated how a style sheet can apply a style to all elements in a web pa&e. 5"
we want all our para&raphs to be red we ?ust need to speci"y p :color: red= in the style sheet.
.asy we6re done.
>ut what i" we want only some para&raphs to be red; 3e could override our )red0te7t+ rule by
makin& copious use o" the style attribute: . 'owever as )The
style Attribute+ points out this is not a &ood solution in the lon& term.
#ortunately there is a way to )name+ a style and re0use it over and over. This method is called a
style sheet class.
Style Sheet Classes
5n .7ample 3.-0 )Two C88 Classes+ we have an e7chan&e o" dialo&ue between two characters.
3e6ll di""erentiate each character6s lines by applyin& a uniIue style. 5t would be tedious and
counterproductive to write out the "ull style in each p element so instead we6ll de"ine each style
once in the style sheet and use a class to call it multiple times.
&xample +.B. %wo CSS Classes
-. DhtmlE
,. DheadE
3. DtitleEAn 5deal 'usbandD%titleE
<. p ^color: Y000000_
=. p.&orin& ^color: Y""0000_
F. p.phipps ^color: Y00G000_
G. D%styleE
K. D%headE
-0.DbodyE
--. Dp classMN&orin&NE
-,. LB$9 /B$5@/. STakin& out old buttonhole.T !ou see *hipps #ashion
-3. is what one wears onesel". 3hat is un"ashionable is what other
-:. people wear.
-<. D%pE
-=. Dp classMNphippsNE
-F. *'5**8. !es my lord.
-G. D%pE
-K. Dp classMN&orin&NE
,0. LB$9 /B$5@/. Xust as vul&arity is simply the conduct o" other
,-. people.
,,. D%pE
,3. Dp classMNphippsNE
,:. *'5**8. !es my lord.
,<. D%pE
,=. Dp classMN&orin&NE
,F. LB$9 /B$5@/. S*uttin& in a new buttonhole.T And "alsehoods the
,G. truths o" other people.
,K. Dp classMNphippsNE
30. *'5**8. !es my lord.
3-. D%pE
3,. Dp classMN&orin&NE
33. LB$9 /B$5@/. Bther people are Iuite dread"ul. The only possible
3:. society is onesel".
3<. D%pE
3=. Dp classMNphippsNE
3F. *'5**8. !es my lord.
3G. D%pE
3K. Dp classMN&orin&NE
:0. LB$9 /B$5@/. To love onesel" is the be&innin& o" a li"elon& romance
:-. *hipps.
:,. D%pE
:3. Dp classMNphippsNE
::. *'5**8. !es my lord.
:<. D%pE
:=.D%bodyE
:F.D%htmlE
#or each character we6ve de"ined a class goring and phipps. @ote that we6ve introduced a
brand0new C88 selector: instead o"
element : declarations =
3e have
element.class : declarations =
Bnce we de"ine the selectors p.goring and p.phipps we can apply them to any para&raph
throu&h the class attribute. !ou may add the class attribute to any element that can take the
style element 1in other words most o" them2. The class attribute is usually much better to use
than the style attribute because it6s much easier to chan&e what a class means later on.
5n .7ample 3.-0 )Two C88 Classes+ the classes only work with the p element. Applyin& them to
some other element as in would "ail. To make the selector )&eneric+
so that it works with any element ?ust leave o"" the element name:
.goring :color: 2!!1111=
UniGue #"s
Another method "or assi&nin& styles is to use an 59. An 59 is a uniIue identi"ier "or a element on a
pa&e. 59s are di""erent "rom classes in a couple o" key ways:
59s are uniIue. !ou may only use a particular 59 once on a pa&e.
!ou can use 59s to create a link to a speci"ic location within a pa&e as discussed in )Linkin&
3ithin *a&es+.
To apply a style to an 59 the synta7 should look "amiliar. 5nstead o" usin& a period use a hash mark
1Y2:
p2goring :color: 2!!1111=
That6s it. 5n order to apply the style you would ?ust write as opposed to .
The only problem here is that you may only apply id'"goring" once on the entire web pa&e. 5n
other words we are presumin& that Lord /orin& is speakin& only once. /iven what we know o"
Lord /orin& this is probably a bad assumption.
5" you use 59s in your style sheets make sure that they are "or uniIue elements. 59s are ideal "or
navi&ation bars headers "ooters and other elements that appear only once on the pa&e.
"iv and Span
As we6ve seen in previous sections usin& C88 is strai&ht"orward. *rovide a selector 1+select all p
elements+2 provide a rule 1+make their te7t red+2 and we6re done. >oth the selectors and the rules
can be much more complicated but this is the core o" it.
Let6s take a look at another component o" our style sheet toolbo7: the )&eneric+ elements di0 and
span. These elements are desi&ned to help you mark o"" arbitrary chunks o" 'T(L "or stylin&.
%he span &lement
The span element is the &eneric inline element. Let6s see this element in action:
&xample +.. &mpty span
-. DpE
,. Towards thee 5 roll thou all0destroyin& but
3. unconIuerin& whaleJ DspanEto the
:. last 5 &rapple with theeJ "rom hellRs heart 5 stab
<. at theeJ "or hateRs sake 5 spit my last breath at
=. thee.D%spanE 8ink all co""ins and all
F. hearses to one common pool4 and since neither can
G. be mine let me then tow to pieces while still
K. chasin& thee thou&h tied to thee thou damned
-0. whale4 Thus 5 &ive up the spear4
--.D%pE
5" you view the results it looks likeO the span didn6t do anythin&. And that6s the point: by de"ault
the span element isn6t supposed to do anythin&. 5t serves as a placeholder or markin& point "or
be&innin& and endin& a style.
Let6s make a minor chan&e. 3e6ll create a class "or our span element and apply that class to our
selection "rom (oby09ick.
&xample +.'. Red span
-. DhtmlE
,. DheadE
3. DtitleE(oby09ickD%titleE
<. span.khan ^color: Y""0000_
=. D%styleE
F. D%headE
G. DbodyE
K. DpE
-0. Towards thee 5 roll thou all0destroyin& but
--. unconIuerin& whaleJ
-,. Dspan classMNkhanNEto the last 5
-3. &rapple with theeJ "rom hellRs heart 5 stab at
-:. theeJ "or hateRs sake 5 spit my last breath at thee.
-<. D%spanE 8ink all co""ins and all
-=. hearses to one common pool4 and since neither
-F. can be mine let me then tow to pieces while
-G. still chasin& thee thou&h tied to thee thou
-K. damned whale4 Thus 5 &ive up the spear4
,0. D%pE
,-.D%bodyE
,,.D%htmlE
@ow we have an inline element that can make any inline selection o"
'T(L red.
%ip
>e"ore usin& the &eneric span element try usin& an em strong code or other lo&ical style. 5"
possible itRs better to start with an element that has some intrinsic meanin&.
%he div &lement
The di0 element is the &eneric block element. !ou can use di0 to apply styles to lar&e sections o"
'T(L such as multiple para&raphs. Like all block elements the di0 element de"ines a )bo7+ o"
'T(L.
&xample +.+. Red div
-. DhtmlE
,. DheadE
3. DtitleE*roduct >rochureD%titleE
<. div.important ^color: Y""0000_
=. D%styleE
F. D%headE
G. DbodyE
K. DpE
-0. Con&ratulations on the purchase o" your sword4
--. Usin& a sword is "un and easy. Xust be
-,. sure to "ollow these important sa"ety tips.
-3. D%pE
-:. Ddiv classMNimportantNE
-<. DpE
-=. DemE@everD%emE hold your sword by the pointy end.
-F. D%pE
-G. DpE
-K. DemEAlwaysD%emE be sure to stick the pointy end
,0. into the other &uy be"ore he does the same to you.
,-. D%pE
,,. D%divE
,3. DpE
,:. And remember i" you or your survivin& kins"olk are
,<. not "ully satis"ied we have a money0back &uarantee4
,=. D%bodyE
,F.D%htmlE
The di0 element applies the style to the second and third para&raphs. @ote that even thou&h the
di0 element is a )block+ element it does not create e7tra line breaks between para&raphs - and ,
or para&raphs 3 and :. 'owever i" we had tried to insert the di0 inside one o" the para&raphs we
would have created a new te7t block. 1Try it.2
=ont Control
5n our earlier section about "ont styles we looked at the e""ects o" the em and strong elements on
te7t. 3hile these elements enable you to apply some simple "ont chan&es 1italic bold2 it would be
nice to have more options.
@ow that we6ve covered the basics o" style sheets it6s time to e7amine more sophisticated methods
o" "ont control. C88 "ont control is divided into three main components:
!ont7!amily : 3hat is the name o" the "ont;
!ont7si"e : 'ow bi& is the "ont;
!ont7weight : 5s the "ont bold;
!ont7style : 5s the "ont italic;
text7decoration : 5s the "ont underlined struck throu&h O;
3e6ll tackle each o" these properties one0at0a0time.
%he font-family )roperty
The !ont7!amily property selects the name o" the "ont you wish to use. This component is
pretty strai&ht"orward:
body : !ont7!amily: times new roman =
This C88 rule speci"ies that all te7t in the body should be in Times @ew $oman. Times @ew
$oman isn6t necessarily a &reat "ont to use on the web but it should be "amiliar to anyone who uses
a word processor.
Specifying 0ultiple =onts
Bne o" the unavoidable issues o" web desi&n is that you can6t count on any particular browser
renderin& your pa&e e7actly the way you want it to be. #onts are no e7ception. !ou mi&ht want your
te7t to use some "ancy "ont but what i" your reader6s browser doesn6t have that "ont available;
To resolve this issue !ont7!amily enables you to speci"y multiple "onts. 'ere6s an e7ample:
body : !ont7!amily: georgia? palatino? times new roman? seri! =
The list o" "onts proceeds in descendin& order o" importance. The browser "irst tries to display the
"ont /eor&ia. 5" /eor&ia is not available it will try *alatinoJ "ailin& that Times @ew $omanJ and i"
all hope is lost a &eneric seri" "ont.
There are some "onts that are usually available on on most people6s browsers. These include Times
@ew $oman /eor&ia *alatino Lucida 5mpact Trebuchet (8 Perdana Comic 8ans (8 Arial
Courier @ew and Courier. 'owever even this impoverished selection is not always available.
3orse some o" these )canonical+ "onts are ill0suited "or readin& on a computer screen. (any
websites declare their "onts to be )Arial 'elvetica sans0seri"+. >ut as accessibility e7pert Xoe Clark
says in his book >uildin& Accessible 3ebsites:
)9on6t use 'elvetica. Typo&raphic neophytes think 'elvetica is )le&ible.+ Try runnin& a
"ew tests with con"usable characters like 5l-i4bcA 0B\ aeso 8<=G or Iuotation marks.
$elated &rotesk type"aces like Univers su""er similarly. 1Bne more time: 9on6t use
Arial. 5t6s a bastardiLed variant o" 'elvetica it6s u&ly it bespeaks unsophistication and
it sticks you with all the same con"usable characters as other &rotesks.2+
!eneric =onts
5" you speci"y the keyword )sans0seri"+ at the end o" a list o" "onts this directs the browser to use
some "orm o" sans0seri". 8peci"yin& a &eneric "ont keyword is always a last resort to be used i"
none o" the "onts you name in your list are available.
There are "ive varieties o" &eneric "onts but only the "irst three are all that important.
sans7seri!: lacks decoration or "larin& at the end o" each stroke.
.7amples include Perdana Arial and /eneva.
seri!: has decoration or "larin& at the end o" some o" its strokes.
.7amples include Times @ew $oman /aramond and /eor&ia. *rinted materials o"ten use
seri" "onts because the seri"s make the characters easier to distin&uish and thus easier to
read. 'owever on the web the reverse can be true. Bn paper the little complicated seri"s are
sharp and easy to distin&uish but on a "uLLy computer screen it6s o"ten easier on the eyes to
use sans0seri".
monospace: uses the same width "or each character o"ten used to represent computer code
or terminal te7t.
.7amples include Courier Courier @ew (onaco and Andale (ono. The most well0
supported monospace "onts are Courier and Courier @ew.
cursi0e: desi&ned to mimic handwritin&.
.7amples include >rush 8cript (T Aristocrat L.T and Comic 8ans (8. The most well0
supported cursive "ont is Comic 8ans (8 a cartoony "ont desi&ned to resemble a child6s
writin&. (ost other cursive "onts are not well0supported.
!antasy: hi&hly decorative.
.7amples include 5mpact and Copperplate. (ost "antasy "onts are not well0supported.
%he font-si3e )roperty
The !ont7si"e property enables you to speci"y your "ont siLe in a number o" absolute and
relative ways:
points 1+!ont7si"e: *+pt)2: (easured in )points+ 1units o" -%F, o" an inch2.
pi7els 1+!ont7si"e: *-px)2: (easured in screen pi7els.
percenta&es 1+!ont7si"e: *.1@)2: (easured relative to the de"ault "ont or the parent
element6s "ont. A "ont siLe o" )A.@+ would shrink the "ont by a "actor o" 3%:.
em0widths 1+*.+em)2: 1@ot to be con"used with the em element.2 (easured relative to the
de"ault "ont or the parent element6s "ont. The value )*.1em+ is the same as multiplyin& by
one.
absolute keywords 1+x7large)2: 8peci"ies one o" seven siLes: xx7small x7small
small medium large x7large and xx7large. The e7act interpretation o" what
constitutes )medium+ or )x7large+ varies "rom browser to browser.
relative keywords 1+larger)2: >umps the "ont up one siLe or down one siLe "rom its
de"ault or inherited siLe. The options are larger and smaller.
*ote
Always keep in mind that people can and will override your "ont siLe settin&s. All browsers provide
a te7t0Loom "unction and people with weak eyesi&ht 1think )people over thirty+2 are Iuick to make
use o" it.
(odern browsers handle these ways o" speci"yin& the "ont siLe reasonably well althou&h there are
some inconsistencies. >ut in the older browsers "ont siLe handlin& is spotty at best. #or e7ample:
Bld versions o" 5nternet .7plorer used a de"ault "ont siLe o" small instead o" medium.
#or the siLe keywords @etscape : used a huge scalin& "actor between the di""erent siLe
keywords. Usin& xx7small or x7small o"ten made the te7t unreadable x7large and
xx7large were a si&ht to behold.
The only way to &et consistent "ont siLes across all the old browsers was to use pi7els 1px2.
'owever due to a bu& in old versions o" 5nternet .7plorer usin& pi7els disabled 5nternet
.7plorer6s ability to resiLe the te7t4 That6s why you6ll see some websites with )te7t resiLe
buttons+ even thou&h these buttons shouldn6t be necessary.
Althou&h these issues are &enerally improvin& over time it can be Iuite a stru&&le to &et your "ont
siLes lookin& consistent and resiLin& properly even in the newer browsers.
%ip
The !ahoo4 User 5nter"ace team provides a "ree !onts.css "ile that solves many o" these
consistency and resiLin& problems "or you.
Additional font-styling
>eyond speci"yin& the "ont name and its siLe you can "urther alter the "ont6s appearance. 3e6ve
already covered how to chan&e the te7t color in )Colors+. #urther alterations include makin& the
te7t bold 1darker2 italic 1slanted2 and much more.
font-weight >boldness?
The !ont7weight component speci"ies how thick the "ont6s strokes should be. The important
values to know are normal and bold.
!ou may also speci"y bolder lighter or a number "rom -00 to K00. 1:00 corresponds to
normal and F00 to bold.2 'owever these variations don6t do much even in the newer browsers.
5n &eneral everythin& <00 and above is ?ust bold. There isn6t any such thin& as really bold at least
not yet.
The normal option removes any boldness that has already been applied. #or e7ample most
browsers display strong as bold te7t. 5" you wanted to take this e""ect away you could write
strong :!ont7weight: normal=J in your style sheet.
font-style >italic?
The !ont7style component speci"ies whether or not the "ont is slanted 1italic2. The most
commonly0used value is italic.
As with !ont7weight there is also a value o" normal that enable you to un0italiciLe somethin&
that would ordinarily be italiciLed. #or a demonstration re"er to )An .7ample: 8tylin& the em
.lement+.
text-decoration >underlines and more?
8adly text7decoration doesn6t have a sensible consistent name 1such as )"ont0decoration+2.
>ut its purpose is similar to the components we6ve already discussed. text7decoration
provides "ive options:
none: cancels all te7t0decoration.
underline: creates underlined te7t.
o0erline: creates overlined te7t.
line7through: creates line0throu&h 1+strike0throu&h+2 te7t.
blink: creates blinkin& te7t.
Caution
Avoid usin& blink. (ost people hate blinkin& te7t and many browsers don6t implement this
option anyway.
Take care usin& underline. (ost people associated underlined te7t with hyperlinks. Avoid
underlinin& your 1non0link2 te7t unless absolutely necessary.
An &xample: Styling the em &lement
3hile most browsers display em as simply italic there6s no intrinsic reason why this should be so
it ?ust happens to be the convention. Let6s say that instead we want our em elements to be bold
red and lar&er than our de"ault "ont siLe. 'ow would we do this;
&xample +.2. Styled &lements
-. DhtmlE
,. DheadE
3. DtitleEBh >etter #ar to Live and 9ieD%titleE
<. p ^
=. "ont0"amily: courier monospaceJ
F. "ont0siLe: -,ptJ
G. _
K. em ^
-0. "ont0style: normalJ
--. "ont0wei&ht: boldJ
-,. "ont0siLe: -:ptJ
-3. color: Y""0000J
-:. _
-<. D%styleE
-=.D%headE
-F.DbodyE
-G. DpE
-K. Q5@/:DbrE
,0. #or... 5 DemEamD%emE a *irate DemEQin&4D%emEDbrE
,-. And it is it is a &lorious thin&DbrE
,,. To be a *irate Qin&4DbrE
,3. #or 5 am a *irate DemEQin&4D%emE
,:. D%pE
,<. DpE
,=. ALL:DbrE
,F. !ou are4 DbrE
,G. DemE'urrahD%emE "or the *irate Qin&4
,K. D%pE
30. DpE
3-. Q5@/:DbrE
3,. And it is it is a &lorious thin& DbrE
33. To be a *irate Qin&.
3:. D%pE
3<.D%bodyE
3=.D%htmlE
3e6ve de"ined a de"ault style "or our para&raphs and the em element style overrides it. @otice that
we don6t have to speci"y the "ont0style "or our para&raphs: the de"ault value is normal 1non0italic2
and presumably we6re happy with that.
The "ont stylin& that we apply to the p element cascades down to the em element. Let6s take a look
at what6s happenin& step0by0step.
-. !ont7!amily:
p element: set to courier? monospace. 5" the browser can display Courier it
willJ otherwise it will serve up a &eneric monospace "ont.
em element: inherits its "ont0"amily "rom the parent element p.
,. !ont7si"e:
p element: set to *+pt.
em element: set to *-pt overridin& its parent.
3. !ont7weight:
p element: not setJ takes on the de"ault value o" normal.
em element: set to bold overridin& the de"ault em value o" normal.
:. !ont7style:
p element: not setJ takes on the de"ault value o" normal.
em element: set to normal overridin& the de"ault em value o" italic.
<. color:
p element: not setJ takes on the de"ault value o" 2111111.
em element: set to 2!!1111 overridin& the de"ault em value o" 2111111.
=ont Shorthand *otation
Typin& !ont7!amily !ont7si"e and !ont7style over and over a&ain can &et
cumbersome. #ortunately there is a shorthand "or all o" these properties with a simple name !ont.
!ou need merely place the desired values in the proper order. This shorthand only encompasses the
properties that be&in with )"ont0+ so i" you want to do somethin& else such as underlinin& te7t you
still need to use the appropriate property text7decoration.
'ere is the order o" the properties:
-. !ont7style or !ont7weight or both
,. !ont7si"e
3. !ont7!amily
!ou may leave out any o" these properties e7cept "or the !ont7!amily as lon& as everythin& is
in the proper order. Let6s take a look at an e7ample o" some para&raph classes.
&xample +.4. %he font )roperty
-. p ^
,. "ont: verdana sans0seri"J
3. _
:. p.styled ^
<. "ont: -,pt verdana sans0seri"J
=. _
F. p.reallystyled ^
G. "ont: bold italic Kpt verdana sans0seri"J
K. te7t0decoration: underlineJ
-0. color: Y00G000J
--._
The de"ault para&raph is ?ust Perdana in whatever "ont siLe the pa&e de"ault is currently in. The
standard class styled is -,pt Perdana. The second class reallystyled is Kpt bold italic
underlined &reen Perdana.
The !ont property makes thin&s a bit more ele&ant but keep in mind that some browsers will
display styles that are not properly ordered while others are more strict about "ollowin& the rules.
To be sa"e always veri"y that that your !ont declarations are in the proper order be"ore
proceedin&.
,ox 0odel: ,orders
The C88 bo7 model is a collection o" C88 properties that apply to all visual 'T(L elements. As
#i&ure 3.- )The >o7 (odel+ indicates any 'T(L element such as:
$he Buick brown !ox Cumped o0er the la"y dog.
is nested inside three bo7es:
=igure +.. %he ,ox 0odel
The mar&in encloses the border which encloses the paddin& which encloses the content. !ou can
use C88 to style all three o" these independently.
,order (idthsE StylesE and Colors
The easiest component o" the bo7 model to understand is the border because it can be so visually
strikin&. (ost elements do not have borders by de"ault but they6re easy enou&h to add with these
C88 properties:
border7width: A len&th such as ,px or 1.+em. (ost web desi&ners speci"y their
borders in pi7els.
border7color: A color such as green or 2!!1111. The de"ault color is usually black.
border7style: A keyword that indicates how to draw the border6s lines. The basic style
is solid but there are "ancier options available such as dashed dotted double
groo0e inset outset and ridge. There is also a none option that suppresses
borders. 5" a browsers does not support a particular )"ancy+ border style it usually replaces
that style with solid.
!ou can apply borders to any visible element you like: divs lists and so on. 5n the "ollowin&
e7ample we create &eneric classes and apply them to p elements.
&xample +.5. =our ,order &xamples
-. DhtmlE
,. DheadE
3. DstyleE
:. .thickline ^
<. border0width: -0p7J
=. border0style: solidJ
F. _
G.
K. .thinblueline ^
-0. border0width: -p7J
--. border0color: Y0000""J
-,. border0style: solidJ
-3. _
-:.
-<. .&reenrid&e ^
-=. border0width: <p7J
-F. border0color: &reenJ
-G. border0style: rid&eJ
-K. _
,0.
,-. .empurpledash ^
,,. border0width: 0.<emJ
,3. border0color: YG000G0J
,:. border0style: dashedJ
,<. _
,=. D%styleE
,F.D%headE
,G.DbodyE
,K. Dp classMNthicklineNE
30. N-st The man0mountain shall not depart "rom our
3-. dominions without our license under our &reat seal.
3,. D%pE
33. Dp classMNthinbluelineNE
3:. ,d 'e shall not presume to come into our metropolis
3<. without our e7press orderJ at which time the inhabitants
3=. shall have two hours warnin& to keep within doors.
3F. D%pE
3G. Dp classMN&reenrid&eNE
3K. 3d The said man0mountain shall con"ine his walks
:0. to our principal hi&h roads and not o""er to walk or
:-. lie down in a meadow or "ield o" corn.
:,. D%pE
:3. Dp classMNempurpledashNE
::. :th As he walks the said roads he shall take the
:<. utmost care not to trample upon the bodies o" any
:=. o" our lovin& sub?ects their horses or carria&es nor
:F. take any o" our sub?ects into his hands without their
:G. own consent.
:K. D%pE
<0.D%bodyE
<-.D%htmlE
The "irst three borders are speci"ed in pi7els. The last is in em which means that i" we chan&e the
p6s "ont siLe the border thickness should scale with it.
=our "ifferent Sides
To apply a di""erent border to each side you must break down border7width border7
color and border7style into their constituent components:
border7width becomes: border7top7width border7bottom7width
border7right7width and border7le!t7width.
border7color becomes: border7top7color border7bottom7color
border7right7color and border7le!t7color.
border7style becomes: border7top7style border7bottom7style
border7right7style and border7le!t7style.
'ere6s an admittedly silly e7ample with "our di""erent borders:
&xample +.6. =our "ifferent Sides
-. DhtmlE
,. DheadE
3. DstyleE
:. p."ourborders ^
<. border0top0width: <p7J
=. border0top0color: Y""0000J
F. border0top0style: dashedJ
G.
K. border0bottom0width: -0p7J
-0. border0bottom0color: Y33==00J
--. border0bottom0style: &rooveJ
-,.
-3. border0ri&ht0width: ,0p7J
-:. border0ri&ht0color: Y0000G0J
-<. border0ri&ht0style: solidJ
-=.
-F. border0le"t0width: -0p7J
-G. border0le"t0color: YCCKK00J
-K. border0le"t0style: solidJ
,0. _
,-.D%styleE
,,.D%headE
,3.
,:.DbodyE
,<. Dp classMN"ourbordersNE
,=. N>ut 5 thou&ht all witches were wickedN said the &irl who
,F. was hal" "ri&htened at "acin& a real witch. NBh no that is a
,G. &reat mistake. There were only "our witches in all the Land o"
,K. BL and two o" them those who live in the @orth and the 8outh
30. are &ood witches. 5 know this is true "or 5 am one o" them
3-. mysel" and cannot be mistaken. Those who dwelt in the .ast and
3,. the 3est were indeed wicked witchesJ but now that you have
33. killed one o" them there is but one 3icked 3itch in all the Land
3:. o" BL00the one who lives in the 3est.N
3<. D%pE
3=.D%bodyE
3F.D%htmlE
,order Shorthand *otation
As with the !ont7 properties there is a shorthand notation named border. Unlike !ont you
may speci"y the border properties in any order.
>elow is a version o" .7ample 3.-G )#our >order .7amples+ re"ormulated to use the shorter
notation. The properties appear in essentially random order but the results are the same as be"ore.
&xample +.;. =our 0ore ,order &xamples
-. DhtmlE
,. DheadE
3. DstyleE
:. .thickline ^
<. border: -0p7 solidJ
=. _
F.
G. .thinblueline ^
K. border: -p7 Y0000"" solidJ
-0. _
--.
-,. .&reenrid&e ^
-3. border: rid&e <p7 &reenJ
-:. _
-<.
-=. .empurpledash ^
-F. border: YG000G0 0.<em dashedJ
-G. _
-K. D%styleE
,0.D%headE
,-.DbodyE
,,. Dp classMNthicklineNE
,3. N-st The man0mountain shall not depart "rom our
,:. dominions without our license under our &reat seal.
,<. D%pE
,=. Dp classMNthinbluelineNE
,F. ,d 'e shall not presume to come into our metropolis
,G. without our e7press orderJ at which time the inhabitants
,K. shall have two hours warnin& to keep within doors.
30. D%pE
3-. Dp classMN&reenrid&eNE
3,. 3d The said man0mountain shall con"ine his walks
33. to our principal hi&h roads and not o""er to walk or
3:. lie down in a meadow or "ield o" corn.
3<. D%pE
3=. Dp classMNempurpledashNE
3F. :th As he walks the said roads he shall take the
3G. utmost care not to trample upon the bodies o" any
3K. o" our lovin& sub?ects their horses or carria&es nor
:0. take any o" our sub?ects into his hands without their
:-. own consent.
:,. D%pE
:3.D%bodyE
::.DhtmlE
This shorthand is convenient but keep in mind that the border property can only set the same
border on all "our sides. #ortunately there are yet "our more shorthand properties that apply the
border6s width color and style to ?ust one side at a time: border7top border7right
border7bottom and border7le!t. #or e7ample i" you wanted to apply the &reen rid&e
border to ?ust the le"t side o" an element the code:
-. .&reenrid&e ^
,. border0le"t: rid&e <p7 &reenJ
3. _
would do the trick.
,ox 0odel: 0argins and )adding
@ow that we6ve covered borders let6s return to our e7amination o" the bo7 model.
=igure +.'. %he ,ox 0odel >Again?
)adding
5n )>orders+ you mi&ht have noticed that in all border e7amples the te7t and the borders were
rather close to&ether.
An element6s paddin& is the element6s )e7tra space inside the border+. There are "our paddin&
properties: padding7top padding7bottom padding7le!t and padding7right. !ou
may set these values to px em percenta&es or any other valid len&th unit.
Let6s take a look at an e7ample. .7ample 3.-K )@on0uni"orm *addin&+ speci"ies two C88 rules:
The "irst rule applies to all di0 elements and chan&es the back&round the te7t color and
the "ont "amily. The &ray back&round is necessary so that we can easily see paddin& "or all
divs while the other two properties are purely cosmetic.
The second rule applies only to di0 elements with a class o" padded. Any di0 with this
class will have special non0uni"orm paddin&.
&xample +.A. *on-uniform )adding
-. DhtmlE
,. DheadE
3. DstyleE
:. div ^
<. back&round: Y:::J
=. color: whiteJ
F. _
G.
K. div.padded ^
-0. paddin&0top: -0p7J
--. paddin&0ri&ht: 0p7J
-,. paddin&0bottom: 0.,<inJ
-3. paddin&0le"t: <emJ
-:. _
-<. D%styleE
-=.D%headE
-F.DbodyE
-G. DdivE
-K. @o paddin& 1but some style added2
,0. D%divE
,-. DbrE
,,. Ddiv classMNpaddedNE
,3. *addedDbrE
,:. Top: -0p7J bottom: 0p7DbrE
,<. Le"t: <emJ ri&ht: 0p7
,=. D%divE
,F.D%bodyE
,G.D%htmlE
The e7ample includes a padded div "ollowed an ordinary div "or comparison. The padded div has
paddin& that varies "or each side o" te7t as we speci"ied. 5t turns out that <em 1+"ive m0widths+2 is
considerably lar&er than -0p7 so the te7t looks shoved over to the ri&ht. As "or the ordinary div we
didn6t speci"y any paddin& rules "or it so it takes the browser de"ault paddin&: 0p7 on all sides.
)adding Shorthand *otation
There is also a shorthand property padding. This property allows you to speci"y all your paddin&
on one line:
padding: +1px *addin& "or all "our sides is ,0 pi7els.
padding: +1px ;1px *addin& "or the top and bottom is ,0 pi7els the le"t and ri&ht
is G0 pi7els.
padding: +1px ;1px *1px *addin& "or the top is ,0 pi7els the le"t and ri&ht is G0
pi7els and the bottom is -0 pi7els.
padding: +1px ;1px *1px -1px *addin& "or the top is ,0 pi7els the ri&ht is G0
pi7els the bottom is -0 pi7els and the le"t is :0 pi7els.
As with the previous e7ample .7ample 3.,0 )8horthand *addin&+ provides basic stylin& "or all
di0s and then uses classes to chan&e the paddin& "or speci"ic di0s. #or additional decoration
we6ve also added a dark red border to each div.
&xample +.'B. Shorthand )adding
-. DhtmlE
,. DheadE
3. DstyleE
:. div ^
<. back&round: Y:::J
=. color: whiteJ
F. border: Y=00 =p7 rid&eJ
G. _
K.
-0. div.one ^
--. paddin&: ,0p7J
-,. _
-3.
-:. div.two ^
-<. paddin&: ,0p7 G0p7J
-=. _
-F.
-G. div.three ^
-K. paddin&: ,0p7 G0p7 -0p7J
,0. _
,-.
,,. div."our ^
,3. paddin&: ,0p7 G0p7 -0p7 :0p7J
,:. _
,<. D%styleE
,=.D%headE
,F.DbodyE
,G. Ddiv classMNoneNE
,K. paddin&: ,0p7 1all2
30. D%divE
3-. DbrE
3,. Ddiv classMNtwoNE
33. paddin&: ,0p7 :0p7 1top%bottom ri&ht%le"t2
3:. D%divE
3<. DbrE
3=. Ddiv classMNthreeNE
3F. paddin&: ,0p7 :0p7 -0p7 1top ri&ht%le"t bottom2
3G. D%divE
3K. DbrE
:0. Ddiv classMN"ourNE
:-. paddin&: ,0p7 :0p7 -0p7 30p7 1top ri&ht bottom le"t2
:,. D%divE
:3.D%bodyE
::.D%htmlE
The paddin& is completely contained within the borders. #or e7ample the inside ed&e o" the "irst
di06s border is ,0p7 "rom the "ar le"t ed&e o" the te7t. Try chan&in& the siLe o" the borders. .ven i"
you make the border very thick the paddin& stays the same thickness.
B" these "our notations the "irst 1same paddin& "or all sides2 is the most commonly used and the
easiest to remember. 'owever i" you want to ba""le and impress your web desi&ner "riends you
should memoriLe all "our.
0argins
(ar&ins are similar to paddin&. There are "our mar&in properties: margin7top margin7
bottom margin7le!t and margin7right. There is also a shorthand property margin
which uses the same synta7 as the padding property .
The key di""erence between mar&ins and paddin& is that paddin& adds e7tra space inside the border
while mar&ins add e7tra space outside the border:
&xample +.'. %wo 0argin ,loc.s
-. DhtmlE
,. DheadE
3. DstyleE
:. div.even ^
<. back&round: Yc"cJ
=. border: -p7 solidJ
F. paddin&: <p7J
G. mar&in: :0p7J
K. _
-0.
--. div.uneven ^
-,. back&round: Y"c"J
-3. border: -p7 solidJ
-:. paddin&: <p7J
-<. mar&in0top: ,0p7J
-=. mar&in0ri&ht: -0p7J
-F. mar&in0bottom: :0p7J
-G. mar&in0le"t: G0p7J
-K. _
,0. D%styleE
,-.D%headE
,,.DbodyE
,3. Ddiv classMNevenNE
,:. mar&in: :0p7 1all2DbrE
,<. paddin&: <p7 1all2
,=. D%divE
,F. Ddiv classMNunevenNE
,G. mar&in0top: :0p7DbrE
,K. mar&in0ri&ht: 30p7DbrE
30. mar&in0le"t: ,0p7DbrE
3-. mar&in0bottom: -0p7DbrE
3,. paddin&: <p7 1all2
33. D%divE
3:.D%bodyE
3<.D%htmlE
3e6ve set the paddin& to a uni"orm <p7 and we6ve set the back&round color to provide a little
contrast. The "irst bo76s mar&in is set to a uni"orm :0p7. The second bo76s mar&in is set to "our
di""erent values. 1The eIuivalent shorthand settin& is )margin: +1px *1px -1px ;1px+.2
Collapsing 0argins
3ithout a border it6s hard to tell the di""erence between the paddin& and the mar&in. Bne key
di""erence is that the element6s back&round color applies to the paddin& but not the mar&in. Another
key di""erence is that vertical mar&ins collapse.
At "irst &lance you mi&ht &uess that in .7ample 3.,- )Two (ar&in >locks+ the vertical separation
between the two inner blocks would be =0p7: :0p7 "or the bottom mar&in o" the "irst block plus
,0p7 "or the top mar&in o" the second block. 'owever the mar&ins collapse to :0p7.
To simpli"y thin&s &reatly mar&in collapse occurs when:
the mar&ins are vertical 1horiLontal mar&ins never collapse2
and:
the blocks are directly adjacent 1i" there is anythin& between the blocks the mar&ins
do not collapse2
or the blocks are nested and the parent block has no vertical borders or paddin& 1i"
the parent block has vertical borders or paddin& the mar&ins do not collapse. #or an
e7ample re"er to )#ancier >lockIuotes+2
and the blocks are le"t in the normal )"low+ o" the pa&e 1somethin& you only need to worry
about when usin& C88 "or more advanced thin&s such as pa&e layout2
(ar&in collapsin& sounds pretty complicated and it is. !ou mi&ht be wonderin& why it6s there in
the "irst place.
8uppose we lived in a world where there is no such thin& as mar&in collapsin&. 5" we had a
seIuence o" "ive para&raphs and we want even spacin& o" say -0p7 between each para&raph how
would we achieve this e7actly; 5n short you6re not &oin& to &et nice spacin& without a lot o" hand0
tweakin&.
5" each para&raph has a top and bottom mar&in o" -0p7 then the mar&in at the top and
bottom o" the &roup o" para&raphs would be -0p7 1&ood2 but the spacin& in between each
para&raph would be ,0p7 1bad2.
Bkay what i" we ?ust speci"y margin7bottom as -0p7 and leave margin7top as 0p7;
That6s better but we still would have a problem at the very top where the "irst para&raph
butts up a&ainst the top o" the pa&e 1or whatever is above the para&raph2.
8peci"yin& margin7top as -0p7 creates a similar problem: there would be no spacin&
between the bottom o" the last para&raph and the top o" the ne7t element.
>ack in the real world mar&in collapsin& is in e""ect and so the a"orementioned problem doesn6t
e7ist. 5" you write a bunch o" para&raphs in a row the browser ?ust )does the ri&ht thin&+ collapsin&
mar&ins so that even thou&h each para&raph de"ines a top and bottom mar&in the space between
para&raphs doesn6t &et doubled.
Styling with the ,ox 0odel
@ow that we6ve covered the components o" the bo7 model you mi&ht be thinkin& )8ure it6s nice
that you can surround every para&raph with a bri&ht lavender rid&ed border but is that really all that
practical;+ Let6s step throu&h a couple o" more real0world e7amples.
%ext "ecoration with ,orders
8elective borders enable you to add stylin& to inline te7t that you couldn6t ordinarily apply. As an
e7ample one popular convention on the 3eb is to style abbr with a dotted underline. 5t would be
nice i" we could use text7decoration to simulate this e""ect. Creatin& a dotted underline usin&
text7decoration mi&ht be possible in the "uture but at the time o" this writin& this C88
"eature is still in dra"t status. 'owever we can use borders to work around this problem:
&xample +.''. "otted Underline
-. DhtmlE
,. DheadE
3. DstyleE
:. abbr ^
<. border0bottom: -p7 Y000000 dottedJ
=. _
F. D%styleE
G. D%headE
K. DbodyE
-0. DpE
--. 3hen my
-,. Dabbr
-3. titleMN*erson o" Bpposite 8e7 8harin& Livin& \uartersN
-:. E*B88L\D%abbrE
-<. and 5 went
-=. Dabbr
-F. titleMN8el"0Contained Underwater >reathin& ApparatusN
-G. E8CU>AD%abbrE
-K. divin& yesterday we were attacked by
,0. Dabbr
,-. titleMN@orth Atlantic Treaty Br&aniLationNE@ATBD%abbrE0controlled
,,. sharks with "rickinR
,3. Dabbr
,:. titleMNLi&ht Ampli"ication by 8timulated .mission o" $adiationN
,<. ELA8.$D%abbrE
,=. beams attached to their heads.
,F. D%pE
,G.D%bodyE
,K.D%htmlE
Bnce the latest C88 speci"ication solidi"ies the browsers will be able to "ollow suit and implement
true dotted underlines and the recipe above will become obsolete.
=ancier ,loc.Guotes
The blockBuote element is "or Iuoted te7t that consists o" one or more "ull para&raphs. >y
de"ault blockIuote indents everythin& to the ri&ht. 5n the past people abused blockBuote 1and
ul and ol2 to simply indent te7t. >ut there are much better ways to indent te7t and so it6s best to
use blockBuote "or its ori&inal purpose: Iuotin& para&raphs o" te7t.
Let6s say that simply indentin& the te7t is too plain. 3e6d like to add some color. 5n .7ample 3.,3
)>lockIuotes+ we chan&e the appearance o" the blockBuote element step0by0step until we
achieve the desired e""ect.
&xample +.'+. ,loc.Guotes
-. DhtmlE
,. DheadE
3. DstyleE
:. blockIuote ^ back&round: Ycccc""J _
<. blockIuote.padded ^ paddin&: 3p7J _
=. blockIuote.bordered ^ paddin&: 3p7J border0le"t: 3p7 Y0000cc solidJ _
F. blockIuote.bordered p ^ mar&in: -0p7J _
G. D%styleE
K. D%headE
-0.DbodyE
--. DblockIuoteE
-,. DpEN5 also have a paper a"loat with an electroma&netic theory o" li&ht
-3. which till 5 am convinced to the contrary 5 hold to be &reat &uns.ND%pE
-:. D%blockIuoteE
-<. DpE0 Xames Clerk (a7wellD%pE
-=.
-F. DblockIuote classMNpaddedNE
-G. DpENAn e7pert is a person who has made all the mistakes that
-K. can be made in a very narrow "ield.ND%pE
,0. DpEN!our theory is craLy but itRs not craLy enou&h to be true.N
,-. D%blockIuoteE
,,. DpE0 @iels >ohrD%pE
,3.
,:. DblockIuote classMNborderedNE
,<. DpESAs a student attendin& a lecture by .insteinT
,=. N!ou know what (r. .instein said is not so stupid...ND%pE
,F. DpESBn his wi"e leavin& him "or a chemistT
,G. N'ad she taken a bull"i&hter 5 would have understood but an
,K. ordinary chemist...ND%pE
30. D%blockIuoteE
3-. DpE0 3ol"&an& *auliD%pE
3,.D%bodyE
33.D%htmlE
-. blockBuote : background: 2cccc!!< =
#irst we try settin& the back&round to pale blue. Un"ortunately since the blockIuote has no
padding the colored space looks crowded.
,. blockBuote.padded : padding: ,px< =
@e7t we6ll try "i7in& this up by creatin& a new class padded. This class inherits the
back&round color assi&ned to all blockBuotes and includes a little e7tra paddin& so that
the child para&raphs don6t look so crowded. 3hoops4 A whole lot o" e7tra space appears
above and below the para&raphs. This looks even worse. 3hat happened;
Addin& paddin& to blockBuote has tri&&ered an interestin& side0e""ect o" the rules "or
collapsin& mar&ins. As soon as you add paddin& or borders to the parent blockBuote
element mar&in collapsin& &oes away. This causes the para&raph6s mar&ins to suddenly push
out the blockBuote above and below.
3. blockBuote.bordered : padding: ,px< border7le!t: ,px 21111cc
solid< =
Let6s try one more time. 3e6ll create another class bordered that includes the paddin&
and adds a decorative dark blue border to the le"t side o" the blockIuote.
:. blockBuote.bordered p : margin: *1px< =
#inally we6ll try to account "or the problem introduced by the paddin&. The selector
blockBuote.bordered p directs the browser to )apply this style to all p elements that
are inside a blockBuote with a class o" bordered.+ As a Iuick "i7 we6ll assi&n these
para&raphs a uni"orm mar&in o" -0p7. This pushes the para&raphs out to the ri&ht and
provides a more uni"orm spacin& around each para&raph. The spacin& between each
para&raph is -0p7 while the spacin& between the blockBuote and the para&raphs is -3p7.
To make the spacin& even more uni"orm you could reduce the blockBuote paddin& to
-p7 or play a "ew more tricks with mar&ins and paddin& but let6s move on.
Align and #ndent
!ou6ve probably noticed that most o" your 'T(L para&raphs don6t have an initial indentation. !ou
can use margin or padding to push para&raphs to the ri&ht but that a""ects the entire para&raph
not ?ust the "irst line. #urthermore te7t is always le"t0ali&ned. 'ow do we make centered te7t or
ri&ht0ali&ned te7t;
As we saw in the )>orders+ section the bo7 model controls the area around the te7t. This section
shows how to move the te7t around inside the bo7 itsel".
#ndenting %ext
To indent te7t use the handily0named text7indent property. The "ollowin& C88 snippet adds a
,.0 em indent to all para&raphs:
&xample +.'2. #ndented )aragraphs
-. DhtmlE
,. DheadE
3. DstyleE
:. p ^
<. te7t0indent: ,.0emJ
=. _
F. D%styleE
G. D%headE
K. DbodyE
-0. DpE
--. NBn the contraryN said 'olmes Iuietly N5 have every reason
-,. to believe that 5 will succeed in discoverin& (r. 'osmer An&el.N
-3. D%pE
-:. DpE
-<. (r. 3indibank &ave a violent start and dropped his &loves.
-=. N5 am deli&hted to hear itN he said.
-F. D%pE
-G. DpE
-K. N5t is a curious thin&N remarked 'olmes Nthat a typewriter
,0. has really Iuite as much individuality as a manRs handwritin&.
,-. Unless they are Iuite new no two o" them write e7actly alike.
,,. 8ome letters &et more worn than others and some wear only on
,3. one side. @ow you remark in this note o" yours (r. 3indibank
,:. that in every case there is some little slurrin& over the e and
,<. a sli&ht de"ect in the tail o" the r. There are "ourteen other
,=. characteristics but those are the more obvious.N
,F. D%pE
,G.D%bodyE
,K.D%htmlE
5" you enter a ne&ative value "or text7indent the "irst line o" the te7t will shi"t to the le"t. This
is use"ul "or creatin& )han&in& indents+ "or headin&s and the like. The only trick is that you must set
the paddin& o" containin& block accordin&ly.
&xample +.'4. /anging #ndent
-. DhtmlE
,. DheadE
3. DstyleE
:. div ^
<. paddin&0top: <p7J
=. paddin&0bottom: <p7J
F. paddin&0ri&ht: <p7J
G. paddin&0le"t: 30p7J
K. border: 3p7 solidJ
-0. _
--. h, ^
-,. te7t0indent: 0,<p7J
-3. _
-:. D%styleE
-<.D%headE
-=.DbodyE
-F. DdivE
-G. Dh,EThe $ed0'eaded Lea&ueD%h,E
-K. DpE
,0. 5 had called upon my "riend (r. 8herlock 'olmes one
,-. day in the autumn o" last year and "ound him in deep
,,. conversation with a very stout "lorid0"aced elderly
,3. &entleman with "iery red hair. 3ith an apolo&y "or my
,:. intrusion 5 was about to withdraw when 'olmes pulled
,<. me abruptly into the room and closed the door behind me.
,=. D%pE
,F. D%divE
,G.D%bodyE
,K.D%htmlE
The )container+ di0 has a uni"orm paddin& o" <p7 all around e7cept "or the le"t paddin& which is
30p7. The h+ element has its te7t0indent set to ne&ative ,<p7. The result is that the h+ shi"ts 30p7
to the ri&ht due to the paddin& and then shi"ts ,<p7 back to the le"t due to the ne&ative text7
indent. All other elements are 30p7 "rom the le"t ed&e. The result is a ,<p7 han&in& indent.
/ori3ontal Alignment
The text7align property allows you to ali&n te7t to the ri&ht le"t or center within its containin&
block. The "our options are:
le!t: Ali&ns the te7t alon& the le"t ed&e o" the bo7 leavin& a ra&&ed ed&e to the ri&ht. This
is the de"ault.
center: Centers the te7t within the bo7.
right: Ali&ns the te7t alon& the ri&ht ed&e o" the bo7 leavin& a ra&&ed ed&e to the le"t.
Custi!y: Ali&ns the te7t alon& both the ri&ht and le"t ed&es o" the bo7. This can cause the
word spacin& in the line to become uneven. The Custi!y option isn6t as well0supported in
some older browsers.
Let6s take a look at all "our options:
&xample +.'5. 1eftE CenterE RightE and @ustified
-. DhtmlE
,. DheadE
3. DstyleE
:. div ^ border: 3p7 solidJ paddin&: <p7J _
<. div.le"t ^ te7t0ali&n: le"tJ back&round: Y""ccccJ _
=. div.center ^ te7t0ali&n: centerJ back&round: Ycc""ccJ _
F. div.ri&ht ^ te7t0ali&n: ri&htJ back&round: Ycccc""J _
G. div.?usti"y ^ te7t0ali&n: ?usti"yJ back&round: Y""""ccJ _
K. D%styleE
-0.D%headE
--.
-,.DbodyE
-3. Ddiv classMNle"tNEDemELe"t0ali&ned te7t.D%emED%divE
-:.
-<. Ddiv classMNcenterNEDemECentered te7t.D%emED%divE
-=.
-F. Ddiv classMNri&htNEDemE$i&ht0ali&ned te7t.D%emED%divE
-G.
-K. Ddiv classMN?usti"yNEDemEXusti"ied te7t.D%emE Upon this a Iuestion
,0. arises: whether it be better to be loved than "eared or "eared than
,-. loved; 5t may be answered that one should wish to be both but because
,,. it is di""icult to unite them in one person it is much sa"er to be
,3. "eared than loved when o" the two either must be dispensed with.
,:. >ecause this is to be asserted in &eneral o" men that they are
,<. un&rate"ul "ickle "alse cowardly covetous and as lon& as you
,=. succeed they are yours entirelyJ they will o""er you their blood
,F. property li"e and children as is said above when the need is "ar
,G. distantJ but when it approaches they turn a&ainst you.D%divE
,K.D%bodyE
30.D%htmlE
Qeep in mind that text7align ali&ns te7t and other inline content within bo7es. 5t does not a""ect
blocks themselves. #or e7ample you can6t use text7align: center to center a smaller bo7
within a lar&er bo7. This sort o" thin& is part o" a more advanced concept called C88 positionin&.
%ables
Tables enable you to arran&e 'T(L elements in a &rid. .7amples o" tabular data include calendars
pro?ect resource assi&nments scienti"ic data sets and other types o" data that make sense to display
in rows and columns.
*ote
8ince tables can arran&e 'T(L elements in a &rid one obvious usa&e "or tables is to de"ine the
layout o" a web pa&e. This ancient layout techniIue is now superseded by C880based layouts. #or
brevity this tutorial only "ocuses on tables that display tabular data.
Create a basic table with cells containin& tabular data
Add captions and summaries
Chan&e the paddin& mar&ins and borders o" table cells usin& C88
9e"ine more structured tables with column &roups "ooters and headers
Section Summaries
The Tables chapter contains these sections:
Table 8tructure .7plains how to construct a simple table by addin& rows columns and
captions.
Cellpaddin& and Cellspacin& .7plains how to control the borders and spacin& around
table cells usin& the border cellpadding and cellspacing attributes.
Tables and C88 .7plains how to control the borders and spacin& around table cells usin&
C88.
%able Structure
.ven a simple table involves several levels o" nested elements. A table6s basic structure is:
The table element de"ines the table itsel".
3ithin the table are one or more tr elements that de"ine table rows.
3ithin the tr elements are one or more th or td elements. These elements de"ine table
header cells and table data cells respectively.
'ere6s a simple e7ample o" a table with one row and two columns. To better illustrate the structure
o" the table we6ve added a snippet o" C88 to provide each table cell with a border.
&xample 2.. H' %able
-. DhtmlE
,. DheadE
3. DtitleE-7, TableD%titleE
:. DstyleE
<. td ^ border: -p7 solid Y000000J _
=. D%styleE
F. D%headE
G. DbodyE
K. DtableE
-0. DtrE
--. DtdECali"orniaD%tdE
-,. DtdE(ichi&anD%tdE
-3. D%trE
-:. D%tableE
-<.D%bodyE
-=.D%htmlE
Adding Rows and Columns
A tr element represents a row. To add another row ?ust add another tr element with the same
number o" tds 1columns2 as the rest o" the table:
&xample 2.'. 'H' %able
-. DtableE
,. DtrE
3. DtdECali"orniaD%tdE
:. DtdE(ichi&anD%tdE
<. D%trE
=. DtrE
F. DtdE@evadaD%tdE
G. DtdEBhioD%tdE
K. D%trE
-0.D%tableE
A td represents a table data cell. To add another column add another td element to each tr in the
table:
&xample 2.+. 'H+ %able
-. DtableE
,. DtrE
3. DtdECali"orniaD%tdE
:. DtdE(ichi&anD%tdE
<. DtdE(ississippi
=. D%trE
F. DtrE
G. DtdE@evadaD%tdE
K. DtdEBhioD%tdE
-0. DtdEAlabamaD%tdE
--. D%trE
-,.D%tableE
Adding /eaders
8o "ar we6ve seen table rows containin& td 1table data2 elements. 'owever rows can also contain
th 1table header2 elements. Table headers label a row or column. >y de"ault most browsers render
table headers as bold.
&xample 2.2. %able with /eaders
-. DtableE
,. DtrE
3. DthE3estD%thE
:. DthE(idwestD%thE
<. DthE8outhD%thE
=. D%trE
F. DtrE
G. DtdECali"orniaD%tdE
K. DtdE(ichi&anD%tdE
-0. DtdE(ississippi
--. D%trE
-,. DtrE
-3. DtdE@evadaD%tdE
-:. DtdEBhioD%tdE
-<. DtdEAlabamaD%tdE
-=. D%trE
-F.D%tableE
%ip
5" you leave any table data or table header empty 1<td></td>2 the cell will collapse and look
unattractive. To prevent this "rom happenin& you can place a special )non0breakin& space+ entity
Dnbsp< in the cell. This inserts an invisible character that "orces the browser to draw the borders
o" the cell.
Adding Captions and Summaries
!ou can provide additional in"ormation about a table by &ivin& it a caption or a summary.
The table element6s summary attribute provides a short te7t summary o" the table. (ost
browsers do not display the summary directly but screen readers and te7t0only browsers can
provide this te7t to their users. 5" you hover your mouse over the table some browsers will display
the summary te7t as a tooltip.
The caption element which must immediately "ollow the <table> open ta& provides the
table6s title. >y de"ault the caption appears directly above the table. 8ome browsers display the
caption centered above the table others display it le"t0ali&ned. !ou may use C88 to ali&n and style
the caption accordin&ly.
%able RowsE CellsE and /eaders
Bnce you have placed the 1optional2 <caption> it6s time to start constructin& the actual table.
Tables are composed o" table rows 1<tr>2. .ach pairin& <tr>...</tr> de"ines a row.
3ithin each table row are one or more cells which are either table data 1<td>2 or table headers
1<th>2. Table header cells are supposed to contain )header+ in"ormation such as the title o" a row
or colum. Table data cells are supposed to contain the data. @ote that i" you leave any table cell
completely empty 1+<td></td>)2 the cell will collapse and look unattractive. 5t6s best to put
somethin& in a blank cell even i" it6s ?ust a element.
Let6s take a look at an e7ample that incorporates all o" these elements. The previous table had one
row and two columns. The "ollowin& table has "our rows and "our columns.
&xample 2.4. 2H2 %able
-. Dtable cellpaddin&MN<N borderMN,N
,. summaryMNAll -, months or&aniLed by seasonNE
3. DcaptionEThe #our 8easonsD%captionE
:. DtrE
<. DthE8prin&D%thE
=. DthE8ummerD%thE
F. DthE#allD%thE
G. DthE3interD%thE
K. D%trE
-0. DtrE
--. DtdE(archD%tdE
-,. DtdEXuneD%tdE
-3. DtdE8eptemberD%tdE
-:. DtdE9ecemberD%tdE
-<. D%trE
-=. DtrE
-F. DtdEAprilD%tdE
-G. DtdEXulyD%tdE
-K. DtdEBctoberD%tdE
,0. DtdEXanuaryD%tdE
,-. D%trE
,,. DtrE
,3. DtdE(ayD%tdE
,:. DtdEAu&ustD%tdE
,<. DtdE@ovemberD%tdE
,=. DtdE#ebruaryD%tdE
,F. D%trE
,G.D%tableE
As you can see even a simple :d: table takes a "air amount o" codin&.
A "ew thin&s to consider:
Look care"ully back and "orth between the code and the results and make sure that you
understand how each month ends up in the proper row and column. 9o you understand why
there is one row o" seasons and three rows o" months; 9o you understand why each column
o" months lines up the way it does;
The <th> te7t is bold while the <td> is plain. This is the de"ault "ont wei&ht "or these
elements althou&h o" course you can chan&e this with style sheets.
The summary attribute does not appear anywhere on the screen. 5t6s really meant "or non0
&raphical browsers but we6ll keep bein& a &ood citiLen and continue to put it in.
Cellpadding and Cellspacing
The <table> element has three attributes that provide some basic control over the spacin& around
table cells: border cellpadding and cellspacing. These three table attributes are similar
to the C88 properties border padding and margin. Let6s see how they work.
#irst we6ll create a table with no borders cellpaddin& or cellspacin&. 5n order to make thin&s easier
to see we6ll use C88 to color the back&round o" the table 1&reen2 and the individual table cells
1yellow2.
&xample 2.5. %able: *o Spacing
-. DhtmlE
,. DheadE
3. DstyleE
:. table ^ back&round: Y00KK00J _
<. td ^ back&round: Y""""00J _
=. D%styleE
F. D%headE
G. DbodyE
K. Dtable
-0. borderMN0N cellpaddin&MN0N cellspacin&MN0N
--. summaryMN@o paddin& spacin& or bordersNE
-,. DtrE
-3. DtdELe"t CellD%tdE
-:. DtdE(iddle CellD%tdE
-<. DtdE$i&ht CellD%tdE
-=. D%trE
-F. D%tableE
-G.D%bodyE
-K.D%htmlE
3ith no border cellspacin& or cellpaddin& our three cells are so cramped that we can6t see the
&reen back&round o" the table ?ust the yellow back&round o" the individual cells. Let6s try settin&
each o" these attributes to "." "ive pi7els2 separately. 3e6ll maintain the same &reen and yellow
colorin& scheme.
&xample 2.6. %able: 4px Spacing
-. DhtmlE
,. DheadE
3. DstyleE
:. table ^ back&round: Y00KK00J _
=. D%styleE
F. D%headE
G. DbodyE
K.
-0. Dh:E<p7 >orderD%h:E
--. Dtable
-,. borderMN<N cellpaddin&MN0N cellspacin&MN0N
-3. summaryMNTable with a <p7 borderNE
-:. DtrE
-<. DtdELe"t CellD%tdE
-=. DtdE(iddle CellD%tdE
-F. DtdE$i&ht CellD%tdE
-G. D%trE
-K. D%tableE
,0.
,-. Dh:E<p7 Cellpaddin&D%h:E
,,. Dtable
,3. borderMN0N cellpaddin&MN<N cellspacin&MN0N
,:. summaryMNTable with <p7 cellpaddin&NE
,<. DtrE
,=. DtdELe"t CellD%tdE
,F. DtdE(iddle CellD%tdE
,G. DtdE$i&ht CellD%tdE
,K. D%trE
30. D%tableE
3-.
3,. Dh:E<p7 Cellspacin&D%h:E
33. Dtable
3:. borderMN0N cellpaddin&MN0N cellspacin&MN<N
3<. summaryMNTable with <p7 cellspacin&NE
3=. DtrE
3F. DtdELe"t CellD%tdE
3G. DtdE(iddle CellD%tdE
3K. DtdE$i&ht CellD%tdE
:0. D%trE
:-. D%tableE
:,.
:3.D%bodyE
::.D%htmlE
3hat are the results;
5n the "irst table border'".". 3e see a "ive0pi7el border around the ed&e o" the table.
5n the second table cellpadding'".". The siLe o" each cell has e7panded by "ive pi7els
in every direction.
5n the third table cellspacing'".". .ach cell is separated "rom its nei&hbors by "ive
pi7els. This spacin& enables us to see the &reen back&round o" the table itsel".
#inally let6s set all three attributes. 3e6ll set the border to <p7 the cellspacin& to -0p7 and the
cellpaddin& to ,0p7.
&xample 2.;. %able: <ariable Spacing
-. DhtmlE
,. DheadE
3. DstyleE
:. table ^ back&round: Y00KK00J_
=. D%styleE
F. D%headE
G. DbodyE
K. Dtable
-0. borderMN<N cellpaddin&MN,0N cellspacin&MN-0N
--. summaryMNTable with a <p7 border
-,. ,0p7 cellpaddin& and -0p7 cellspacin&NE
-3. DtrE
-:. DtdELe"t CellD%tdE
-<. DtdE(iddle CellD%tdE
-=. DtdE$i&ht CellD%tdE
-F. D%trE
-G. D%tableE
-K.D%bodyE
,0.D%htmlE
The rid&ed border around the table is "ive pi7els wide the cells are ten pi7els apart and the cells
themselves have twenty pi7els o" paddin&. 8ome browsers will display the border colored with the
back&round color &reenJ others will leave the rid&ed border colorless.
%ables and CSS
#or more sophisticated control over borders spacin& and paddin& you can and should use C88
rather than the border cellspacing and cellpadding attributes. The C88 properties are
as "ollows:
The padding C88 property corresponds to the cellpadding table attribute.
The border7spacing C88 property corresponds to the cellspacing table attribute.
The border C88 property corresponds to the border table attribute.
The C88 properties allow us to use any valid C88 len&th: px are okay as are em pt and so on.
3e6ll stick with pi7els "or our e7ample below.
&xample 2.A. %able: CSS ,orders
-. DhtmlE
,. DheadE
3. DstyleE
:. table ^
<. back&round: Y00KK00J
=. border: :p7 Y""00"" rid&eJ
F. border0spacin&: <p7J
G. _
K. td ^
-0. back&round: Y""""00J
--. paddin&: -0p7J
-,. border: ,p7 Y0000"" dottedJ
-3. _
-:. td.middle ^
-<. border: ,p7 Y""0000 solidJ
-=. paddin&0ri&ht: ,<p7J
-F. _
-G. D%styleE
-K.D%headE
,0.DbodyE
,-. Dtable
,,. borderMN0N cellpaddin&MN0N cellspacin&MN0N
,3. summaryMNTable with C88 bordersNE
,:. DtrE
,<. DtdELe"t CellD%tdE
,=. Dtd classMNmiddleNE(iddle CellD%tdE
,F. DtdE$i&ht CellD%tdE
,G. D%trE
,K. D%tableE
30.D%bodyE
3-.D%htmlE
The overall table has a &reen back&round and a rid&ed lavender border. The result is &arish to say
the leastO presumably your tables will be "ar more subdued and taste"ul.
Brdinary table cells have a yellow back&round ten pi7els o" paddin& "ive pi7els o" border0spacin&
1i.e. cellspacin&2 and a blue dotted border.
Table cells with class'"middle" have an e7tra "i"teen pi7els o" paddin& to the ri&ht and a red
solid border.
@ote that some modern browsers still don6t support the border7spacing attribute. 5" you6re
usin& one o" these browsers all three cells will be ad?acent to each other and you will not see the
&reen back&round o" the table itsel". Bne workaround is to use C88 to do your primary stylin& and
the border table attribute "or backup.
Look out for more great tutorial downloads at: WebmasterJuice.com

HTML Tutorial

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorial

Uploaded by

Copyright:

Available Formats

HTML and CSS Tutorial

You might also like