A Beginner’s Palette of Styling Options
We’velookedatsomeexamplesofstylesthatcanbeappliedtoyourwebpages
throughCSS,butthey’vebeenamixedbag,anddeliberatelyso.Therearesomany
morefromwhichyoucanpickandchoose—toomanypossibilities,infact,tolist
themallhere.Still,thissectionlistssomeofthebasicpropertiesandvalueswith
whichyoumightliketoexperiment.FeelfreetotryanyoftheseinyourCSSfile.
Notethatwe’lladdtothislistinsubsequentchapters;it’sbynomeansexhaustive!
color
Aswe’veseen,boththesepropertiescantakecolorkeywords,
suchas
red
,
blue
,or
green
,orcantakehexadecimalcolor
specifications,suchas
#ff0000
.
background-color
font-family
Thispropertytakesalistoffontsthatyouchooseinorder
ofpreference.Besuretoprovideoptionsthatusersarelikely
tohaveontheircomputers(forexample,Arial,Verdana).
ThislistshouldendusingoneofthegenericCSSfonts,such
as
serif
or
sans-serif
,thatanybrowserthatsupportsCSS
willrecognize.
font-size
Thispropertycanbeanyoneofthefollowing:
fontsizekeywords
xx-small
x-small
small
medium
large
x-large
xx-large
relativefontsizes
apercentage(forexample,
140%
)
emunits(forexample,
1.2em
;
1em
isequaltothe
heightoftheMfontcharacter)
fixedfontsizes
pixels(forexample,
20px
)
points(forexample,
12pt
)
Build Your Own Website The Right Way Using HTML & CSS
94
Pdf reader with bookmarks - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
bookmarks pdf file; how to create bookmark in pdf automatically
Pdf reader with bookmarks - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
create bookmarks in pdf from excel; create pdf bookmarks from word
Fixedfontsizesusedtobemoreproblematic,asthey
couldn’tbescaledupordowntosuitthereader’sneeds
inInternetExplorer6;ifyoustatedafontsizeof10
pixels,itdidn’tmatteriftheuserchosemaximumfont
size,itwouldstubbornlystayat10pixels!Fortunately,
subsequentversionsofIEfixedthisproblem.Formost
browsers,thedefaultbehaviorwhenscalingapageisto
zoomthewholepageproportionally.So,justbearitin
mindifyouknowthatyouraudienceisstillusingIE6.
8
font-weight
bold
or
normal
font-style
normal
or
italic
text-decoration
none
,
underline
,
overline
,or
line-through
Backing It Up!
BeforeyouexperimentusingtheCSSpropertiesabove,itmightbeanideatomake
abackupofyourCSSfile,incaseyourunintodifficulties.Remember,youcan
downloadtheexamplesusedinthischapterfromthecodearchiveifyouaccident-
allymangleyourCSSfile.Ifthishappens,don’tworry!It’sallpartofthelearning
process,andyoucanbesurethatnoanimalswillbeharmedintheprocess.
Recap: the Style Story so Far
Let’sallowourselvesamomenttoreflect.OursitenowboastsaCSSfileusinga
selectionofattractivestyles.We’reintheenviablepositionofbeingabletochange
thesiteatwhimbyalteringjustthatoneCSSfile.Nowwe’lltrystylingsomemore
elementsonourwebpages.
Changing the Emphasis
1.Open
about.html
inyourtexteditor.
8
You’llinevitablyhearhorrorstoriesfrombattle-wearywebdeveloperswhostillhavetosupportthis
ageing,problematic,andoftenexcruciatingbrowser.Ohyeah,I’vebeenthereandhavethescarstoprove
it!
95
Adding Some Style
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
document file. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. Also a preview
bookmark pdf acrobat; adding bookmarks in pdf
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
creating bookmarks in pdf files; split pdf by bookmark
2.Findtheparagraphaboutmeetingupinalocalpub,andaddanemphasiselement
asshownhere:
chapter3/website_files/08_emphasis_italics/about.html
(excerpt)
<p>And when we're not diving, we often meet up in a local pub
to talk about our recent adventures (<em>any</em> excuse,
eh?).</p>
3.Savethepage,andthenviewitinyourwebbrowser;itshouldappearasshown
inFigure3.8.Asyoucansee,emphasiselementsappearinitalicsbydefault.
We’regoingtouseCSStochangethatdefaultstyle.
Figure 3.8. Using emphasis to set type to italics by default
4.Open
style1.css
(ifyouhaven’talreadyopeneditforediting)andaddthefollowing
rulebelowtheothers:
chapter3/website_files/09_emphasis_capitals/style1.css
(excerpt)
em {
font-style: normal;
text-transform: uppercase;
}
Build Your Own Website The Right Way Using HTML & CSS
96
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Demo Code in VB.NET. The following VB.NET codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
bookmarks pdf documents; add bookmark to pdf reader
C# PDF File Compress Library: Compress reduce PDF size in C#.net
NET framework. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. C# class demo
creating bookmarks in pdf documents; bookmarks pdf reader
5.SavetheCSSfile,andrefreshyourbrowser’sviewoftheAboutUspage.Does
yourpagelooklikeFigure3.9?
Figure 3.9. Changing the emphasis to capitalized text from italics
Now,wheneveryouaddan
em
elementtoanywebpageofyoursite(assumingthat
pageislinkedto
style1.css
),theemphasizedtextwillappearincapitalletters,not
italics.Butthisraisesaninterestingpoint:whenshouldyouoverrideabrowser’s
defaultstyleforoneofyourownchoosing?Presumably,thedefaultstylesthat
browsersusewereselectedcarefully;howcanyoubesurethatredefiningthestyles
isagoodidea?Surelyitalicsareasuitablestyleforemphasis?Theyprobablyare.
AstheysayintheSpider-Manfilm,“Withgreatpowercomesgreatresponsibility,”
sobesuretoexercisecaution.Justbecauseyoucanchangeadefaultstyle,doesn’t
alwaysmeanyoushould.
97
Adding Some Style
.NET PDF SDK | Read & Processing PDF files
Include extraction of text, hyperlinks, bookmarks and metadata; Advanced document and Pricing. RasterEdge provides royalty-free .NET Imaging PDF Reader SDK of
export excel to pdf with bookmarks; convert excel to pdf with bookmarks
.NET PDF SDK - Description of All PDF Processing Control Feastures
Fully featured PDF Viewer in HTML5; Outstanding rendering of PDF documents; Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display;
excel hyperlink to pdf bookmark; export pdf bookmarks
Perhapsacompromiseisinorder.Let’schangetheemphasissothatit’sstillitalic,
butalsoappearsinuppercaseletters.Allweneedtodoisremovethe
font-style
declaration;the
em
elementwillthenreverttoitsdefaultitalicizedappearance,as
depictedinFigure3.10:
chapter3/website_files/10_emphasis_capitals_italics/style1.css
(excerpt)
em {
text-transform: uppercase;
}
Figure 3.10. Emphasis displayed as uppercase italics
Emphasis or Italics? Strong or Bold?
Youmightwellbeaskingyourself,“IfIwantanitalicfont,can’tIuseanitalicele-
ment?”Infact,HTMLprovidesan
i
elementforjustthispurpose,butitsuseisn’t
perhapsobvioustoanewcomer.Whynot?Well,markingtextas
i
saysnothing
aboutitsmeaning;
i
onlycommunicateshowitshouldbepresentedonthescreen,
notitsemphasisintone.Accordingtothespec,it“representsaspanoftextinan
alternatevoiceormood,orotherwiseoffsetfromthenormalprose.”Soyoushould
use
<em></em>
foremphasis,butyou’dbebetteroffusing
<i></i>
foratechnical
term,anidiomaticphrase,orthenameofaboat:
Build Your Own Website The Right Way Using HTML & CSS
98
XDoc.Word for .NET, Advanced .NET Word Processing Features
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. Word Create. Create Word from PDF; Create Word
how to create bookmark in pdf with; pdf bookmark editor
XDoc.PowerPoint for .NET, All Mature Features Introductions
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. PowerPoint Convert. Convert PowerPoint to PDF; Convert
how to add a bookmark in pdf; how to add bookmarks to pdf files
<p>We went for a jolly on the <i>QE2</i>, hurrah!</p> 
<p>I bet that had a certain <i>je ne sais quoi</i>, eh?</p> 
Likewise,the
b
element(forbold),anotheroldHTMLelement,shouldn’tbeused
forstressingimportance.Thecorrectelementtouseforthatis
strong
or,ifyoujust
wanttodisplayheadingsinbold,properheadingelements(
h1
,
h2
,andsoon),and
stylethemasyouchoosewithCSS.(It’sanall-too-commonfaultwherebypeople
boldaparagraphtomakeitappearlikeaheading—sopleasedon’t.)Youwoulduse
the
b
elementwhereyouneedtodifferentiateawordorphrasefromitssurrounding
text,forexample:
<p>Each of the barrels were stamped <b>FRAGILE</b> and were ready 
to ship.</p>
Whyisitimportanttoknowthedifferencebetween
i/em
and
b/strong
?Itmight
seemlikenobigdealasyoulookattheitalicizedtextinyourwebbrowser.Imagine,
though,ifyouwereblind,andyouusedsoftwarethatreadwebpagesaloudtoyou,
insteadofdisplayingthemonthescreen.Thisprogram(calledascreenreader)
mightreadtextmarkedupwithan
em
elementusingslightemphasis,andtext
markedupwith
strong
inamorepowerfulvoice(thoughthis,ofcourse,depends
onthescreenreaderbeingused).Butwhatwoulditdowithtextmarkedupwith
i
or
b
?Becausetheseelementsindicatenothingaboutthesignificanceofthetext,
screenreaderswouldn’ttreattheminanyspecialway—thuspotentiallylosingthe
meaningthatyouweretryingtoconvey.Asearchengine(forexample,Google,
Yahoo)mayalsoplacemoreimportanceonauser’ssearchtermsthatappearwithin
a
strong
elementthana
b
element(thoughthesearchenginecompaniesnevergive
anythingsolidawayabouthowtheirsearchalgorithmswork!).
Anotherpresentationaltagthatyoumightseeothersuse,butshouldnevercopy,is
the
u
element.Wrapthisaroundsometext,andneedlessunderliningoccursthat
onlyservestobaffleusers.Thisisbecauseinwebpagesunderlinedtextnormally
signifiesalink—whichthe
u
elementmostdefinitelyisn’t!
Looking at Elements in Context
Here’sariddleforyou:whichoftheseitemsisbigger?Apenorasheep?Well,the
answeriseither,dependingonthecontext.Ifyouwereafarmer,you’dswearthat
thepenisbigger.Afterall,youspendmanyhoursaweekroundingupherdsof
99
Adding Some Style
sheepintoabig,solidpen.If,however,you’reanofficeworker,you’doptforthe
sheepbeingthelargerofthetwo—afterall,it’saloteasiertopickupapenandflip
itaroundyourfingers.
Contextcanchangeasituationquitedrastically,andwecanusecontexttoourad-
vantageinCSS.Wecanstyleanelementinanumberofways,dependingonits
position.Withthatinmind,let’sheadbacktoourexamplesiteforanotherlesson.
Don’tbesheepish,now!
Currently,we’vestyledparagraphssothattheyappearinanavysans-seriffont
(Verdana,specifically),asdoesalmosteverythingelseonthepage:
chapter3/website_files/10_emphasis_capitals_italics/style1.css
(excerpt)
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
p {
font-size: small;
color: navy;
}
Thisisallwellandgood,butthere’soneparagraphonoursitethatdiffersfromthe
othersintermsofitspurpose.Canyouspotwhichoneitis?It’sourfirstparagraph,
theoneinthetagline.Here’stheHTMLforthatsection:
index.html
(excerpt)
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash!</p>
</div>
It’sdistinctfromtheactualdocumentcontent,soitmightbenefitfromsomealternate
styling.Thatthisparticularparagraphiscontainedwithinaspecific
div
element
—withan
id
attributeof
tagline
—canbeuseful.Becauseit’swithinitsown
div
,
wecansetaruleforthisparagraphandthisparagraphonly.
1.OpentheCSSfileforediting,andaddthefollowingafterthefirstparagraphrule:
Build Your Own Website The Right Way Using HTML & CSS
100
chapter3/website_files/11_styled_tagline/style1.css
(excerpt)
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
}
2.Savethefile,andrefreshtheAboutUspage(oranyofthethree,forthatmatter)
inyourbrowser.YourpageshouldlooksimilartotheoneinFigure3.11.
Figure 3.11. Putting the tagline in italics
What’shappeninghere?Perhapsatranslationisrequired.ThisCSSrulemeans,
“Foranyparagraphelementthatoccursinsideanelementthathasan
id
of
tagline
,
setthetexttoitalicsandthefonttoGeorgia,Times,oranotherseriffontifyoudon’t
haveeitherofthose.”
Getting a Positive ID
The#notationintheCSSreferstoanelementwithaspecificidattribute—in
thiscase,tagline.We’lllearnmoreaboutselectingidsandmanipulatingthem
insubsequentchapters.
101
Adding Some Style
Contextual Selectors
#tagline p
isknownasacontextualselector.Herearesomeotherexamples:
#navigation a {
text-decoration: none;
}
Translation:foranylinkfoundinsidethenavigationarea—anelementwithan
id
of
navigation
—removeanydecorationonthattext;inotherwords,remove
theunderline(anyotherlinksonthepagewillremainunderlined).
#footer p {
line-height: 150%;
}
Translation:settheverticalheightbetweenlinesoftextcontainedinparagraphs
insidethefooterarea(forexample,a
div
elementwithan
id
of
footer
)to150%.
Thiswouldoverridethebrowserdefaultof100%,orotherline-heightvalues
thatmightbeset,suchasforthebodytext.
h1 b {
color: red;
}
Translation:foranytextinsidealeveloneheadingthat’smarkedupas
b
,set
thecolortored(anyotherinstanceof
strong
onthepagewon’tbesettored).
h2 a {
text-decoration: none;
}
Translation:don’tunderlinethetextofanylinkinsidealeveltwoheading(the
defaultsettingunderlinesalllinks,sootherlinksonthepagewillremainunder-
lined).
Build Your Own Website The Right Way Using HTML & CSS
102
Grouping Styles
Ifyouwanttoapplythesamestyletodifferentelementsonawebpage,there’sno
needtorepeatyourself.Forexample,let’ssaythatyouwanttosetheadinglevels
onethroughthreeinyellowtextwithablackbackground.Perhapsyou’ddothis:
h1 {
color: yellow;
background-color: black;
}
h2 {
color: yellow;
background-color: black;
}
h3 {
color: yellow;
background-color: black;
}
That’sveryrepetitive.Plus,onceyouhavealotofstylesonthepage,it’sevenmore
difficulttomaintain.Wouldn’titbegreatifyoucouldreducesomeofthatwork?
Well,youcan!Here’show:
h1, h2, h3 {
color: yellow;
background-color: black;
}
Translation:iftheelementisaleveloneheading,aleveltwoheading,oralevel
threeheading,setthetexttoyellowandthebackgroundtoblack.
Comma = “Or”
YoucanthinkofthecommasinCSSselectors(liketheoneabove)astheword
“or.”
Let’strygroupingsomestylesinourprojectsite.We’reyettohaveany
h3
headings,
butwewillsoon.
103
Adding Some Style
Documents you may be interested
Documents you may be interested