xml to pdf c# itextsharp : Create bookmarks pdf Library control class asp.net azure wpf ajax Build%20Your%20Own%20Web%20Site%20The%20Right%20Way%20Using%20HTML%20&%20CSS%203rd%20Ed11-part767

What is CSS?
AsthischapterrevolvesalmostexclusivelyaroundCSS,it’sagoodideatobegin
withabasicdiscussionofwhatCSSis,andwhyyoushoulduseit.Aswe’vealready
mentioned,CSSstandsforCascadingStyleSheets,butthat’stoomuchofa
mouthfulformostpeople—we’llstickwiththeabbreviation.Wealsowon’tconcern
ourselvestoomuchwithwhichversionofCSSfornow.Thereareslightdifferences
betweenCSS2andCSS2.1thatyou’llonlyreallycareaboutonceyoubecomea
super-nerdinthistopic.Mostofthebook’sexampleswillbeCSS2or2.1;we’llonly
starttobecomeparticularwithversionnumbersinChapter10,wherebrowser
supportforCSS3,anditsextrafunctionality,needsmoreattention.
CSSisalanguagethatallowsyoutochangetheappearanceofelementsonthepage:
thesize,style,andcoloroftext;backgroundcolors;borderstylesandcolors;even
thepositionofelementsonthepage.Let’stakealookatsomeCSSinaction;we’ll
startbylearningaboutinlinestyles.
Inline Styles
Ifyou’refamiliarwithMicrosoftWord(orasimilarwordprocessingpackage),you
maywellhavecreatedyourfairshareofflyers,advertisements,orpersonalnews-
letters(aswellasthemoremundaneletterstothelocalauthoritiesandsoon).In
doingso,you’veprobablyusedtextformattingoptionstocolorcertainpartsofyour
text.It’sassimpleashighlightingthewordsyouwanttochange,andthenclicking
onacolorinadrop-downpalette.ThesameeffectcanbeachievedinHTMLusing
alittlebitofinlineCSS.Thisiswhatitlookslike:
<p style="color: red;">The quick brown fox jumps over
the lazy dog.</p>
Intheexampleabove,weusea
style
attributeinsidetheopening
<p>
tag.Applying
astyletoaspecificHTMLelementinthiswayisknownasusinganinlinestyle.
But wait a minute—inline styles?
IfyouhavedabbledwithCSSbefore,youmaybethinking,“Butthisisn’ttheright
waytodoit,”towhichIsay,“Justwaitashortwhile—allwillbeexplainedsoon.”
Build Your Own Website The Right Way Using HTML & CSS
74
Create bookmarks pdf - 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
auto bookmark pdf; bookmarks in pdf
Create bookmarks pdf - 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 reader; how to add bookmarks to a pdf
Wejustneedtorunthroughthesebasicsfirstbeforeapproachingthebestwayof
doingthis.
The
style
attributecancontainoneormoredeclarationsbetweenitsquotation
marks.Adeclarationismadeupoftwoparts:aproperty,andavalueforthat
property.Intheexampleabove,thedeclarationis
color: red
(
color
beingthe
propertyand
red
beingitsvalue).
Ifyouwantedto,youcouldaddanotherdeclarationtotheexampleabove.Forin-
stance,aswellashavingthetextdisplayinred,youmightwantittoappearina
boldtypeface.Thepropertythatcontrolsthiseffectis
font-weight
;itcanhavea
rangeofdifferentvalues,butmostlyyou’lluse
normal
or
bold
.Asyoumightexpect,
you’dusethefollowingmarkuptomaketheparagraphredandbold:
<p style="color: red; font-weight: bold;">The quick brown fox
jumps over the lazy dog.</p> 
Noticethatasemicolonseparatesthetwodeclarations.Youcouldcarryonadding
stylesinthisway,butbeware,thisapproachcanbemessy.Thereareclevererways
toapplystyling,aswe’llseeverysoon.
Adding Inline Styles
Open
about.html
inyourtexteditor,andaddaninlinestyle.Wewanttomakethe
textinthefirstparagraphafterthe“AboutUs”headingboldandblue.Refertothe
previousexampleasyoucreatethestyle.
Doesthemarkupforyourparagraphlooklikethis?
<p style="color: blue; font-weight: bold;">Bubble Under is a group
of diving enthusiasts based in the south-west UK who meet up
for diving trips in the summer months when the weather is good
and the bacon rolls are flowing. We arrange weekends away as
small groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive buddy.</p>
Ifyourmarkuplookslikethatshownhere,save
about.html
andtakealookatitin
yourbrowser.ItshouldappearlikethepageshowninFigure3.1.
75
Adding Some Style
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; 'create optimizing options
how to add bookmarks to pdf files; how to bookmark a pdf file
VB.NET PDF File Split Library: Split, seperate PDF into multiple
file into multiple ones by PDF bookmarks or outlines As String = Program.RootPath + "\\" 1.pdf" Dim outputFileName 1 to (Page Count - 1). ' Create output PDF
how to add a bookmark in pdf; export pdf bookmarks to text
Figure 3.1. Content displayed using blue and bold styles
The 
span
Element
Youcaneasilycolorawholeparagraphlikethis,butmoreoftenthannot,you’ll
wanttopickoutjustspecificwordstohighlightwithinaparagraph.Youcando
thisusinga
span
element,whichcanbewrappedaroundanycontentyoulike.
Unlike
p
,whichmeansparagraph,or
blockquote
,whichsignifiesaquotation,
span
hasnomeaning.A
span
islittlemorethanatoolforhighlightingthestartandend
ofasectiontowhichyouwanttoapplyastyle.
1
Insteadofmakingthatwhole
paragraphblue,wemightwantjustthefirsttwowords—BubbleUnder—tobeblue
andbold.Here’showwecanusethe
span
elementtoachievethis:
<p><span style="color: blue; font-weight: bold;">Bubble
Under</span> is a group of diving enthusiasts based in the
south-west UK who meet up for diving trips in the summer
months when the weather is good and the bacon rolls are
flowing. We arrange weekends away as small groups to cut the
costs of accommodation and travel and to ensure that everyone
gets a trustworthy dive buddy.</p>
Whenweviewthatmarkupinabrowser,weseethedisplayshowninFigure3.2.
1
Applyinga
span
alsoenablesyoutodosomeothercleverstufftoyourwebpageusingJavaScript;for
ourpurposes,though,itsscopeislimitedtowhatitallowsyoutodousingCSS.
Build Your Own Website The Right Way Using HTML & CSS
76
C# PDF File Compress Library: Compress reduce PDF size in C#.net
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; // create optimizing options
bookmarks in pdf reader; add bookmarks 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.
adding bookmarks to pdf document; creating bookmarks pdf files
Figure 3.2. Using the 
span
element to pick out specific words for styling
Let’stakeaquicklookatotherwaystoapplyinlinestyles(thisisseparatetoour
projectsite,sofeelfreetoexperiment).
<p style="font-style: italic">The quick brown fox jumps over the
lazy dog.</p>
Notsurprisingly,thatCSSdeclarationwillitalicizeallthetextintheparagraph.
Here’sanotherexample,inwhich
span
isusedtohighlightspecificwords:
<p>The quick brown fox <span style="font-style: italic;
font-weight: bold">jumps</span> over the lazy dog.</p>
77
Adding Some Style
C# Create PDF Library SDK to convert PDF from other file formats
file. Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields.
export pdf bookmarks to excel; how to add bookmarks on pdf
VB.NET Create PDF Library SDK to convert PDF from other file
Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields in Visual Basic .NET application.
pdf create bookmarks; how to add bookmarks to pdf document
Embedded Styles
InlinestylesofferasimpleandquickmethodtoapplysomeCSSeffectstospecific
sectionsofadocument,buttherearebetterwaystostyleapage.Afterall,itwould
bemoreidealifyoucouldsetstylesinjustoneplace,ratherthanhavingtotype
themouteverytimeyouwantedtousethem,surely?
Embeddedstylesheetsarethelogicalnextstep.Anembeddedstylesheetisasection
youaddtothestartofawebpagethatsetsoutallthestylesthatwillbeusedon
thatpage.Todothis,youneedtousethe
style
2
elementinsidethe
head
:
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta charset="utf-8"/>
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
Inthemarkupshownabove,we’vemovedtheinlinestyleintoanembedded
stylesheet.Theembeddedstylesheetstartswitha
<style type="text/css">
tag
and,predictably,endswitha
</style>
tag.Theactualstyledeclarationsareenclosed
inasetofcurlybraces:
{
and
}
.The
p
thatappearsbeforethefirstcurlybracetells
thebrowserwhatelementsthestylerulesarefor;inthiscase,we’remakingthetext
insideevery
p
elementbold.The
p
iscalledtheselector,andit’sagreattoolfor
quicklyandeasilychangingtheappearanceoflotsofelementsonyourpage.The
selectorinstructsthebrowsertoapplyallthedeclarationsbetweenthecurlybraces
tocertainelements.Theselector,curlybraces,anddeclarationscombinetoform
what’scalledarule.
Inthiscase,ourstylesheetcontainsonerule:“Stylealltheparagraphsonthispage
sothatthetextappearsinaboldfont.”
Wecouldaddmoredeclarationstoourrule.Forinstance,ifwewantedtomakethe
textboldandblue,we’daddthedeclaration
color: blue
toourrule:
2
http://reference.sitepoint.com/html/style/
Build Your Own Website The Right Way Using HTML & CSS
78
.NET PDF SDK - Description of All PDF Processing Control Feastures
Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. PDF Create.
pdf reader with bookmarks; add bookmarks to pdf reader
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
create bookmark pdf; bookmarks in pdf files
<style type="text/css">
p {
font-weight: bold;
color: blue;
}
</style>
Jargon Break
Okay,okay,there’sbeenanawfullotofjargonsofar.Let’srecap:Figure3.3brings
thetheoryintofocus.
Figure 3.3. The anatomy of a rule
Why Embedded Styles Are Better Than Inline Styles
IntheexampleprovidedinFigure3.3,textinallparagraphswilldisplayinbold,
bluetype.Thissavesyoufromtyping
<p style="font-weight: bold; color:
blue">
everytimeyoustartanewparagraph—aclearbenefitoverinlinestyles.
Ifyouwantedtochangethecolorofallparagraphtexttored,youneedonlychange
itinthestylesheetatthetopofthepage:
<style type="text/css">
p {
font-weight: bold;
color: red;
}
</style>
That’sefficiencyforyou.Forthisreason,anembeddedstylesheetisamarkedim-
provementoverinlinestyles.Butwhatifyouhaveawebsitecomprisingmany
79
Adding Some Style
pages?Ifyouwanttomakeyourchangesacrossthewholesite,embeddedstylesheets
usedinthewayIdemonstratedstillfallsshortoftheperfectsolution.Why?Because,
tomakeasite-widechange,you’dhavetoedittheembeddedstylesheetonevery
singlepageofthatsite.That’swhythebestsolutionistouseanexternalstylesheet.
External stylesheets
Why External Stylesheets Are Better Than Embedded
Styles
Anexternalstylesheetprovidesalocationwhereyoucanplacestylestobeapplied
onallyourwebpages.ThisiswherethetruepowerofCSSlies,andit’sforthis
reasonwhywe’vespentminimaltimeapplyinginlineorembeddedstylestoour
divingclubprojectsite.
The Bad Old Days
Inthepast,orTheBadOldDaysaswe’llcallthem,peoplewouldcreatewebsites
onapage-by-pagebasis,andstylethemonapage-by-pagebasisusingallmanner
ofnastyelementsofwhichIdaren’tevenspeak!Sometimes,thesesitesgrewbeyond
thewebmaster’swildestimagination.“Fantastic,”thoughtMr.orMs.Webmaster.
“Mywebsitenowhasover200pages.SoonI’llbebiggerthanMicrosoft!”Afew
monthslater,thewebmasterwoulddecidetoredesignthewebsiteandrealize,with
considerablehorror,thateachandeverysinglewebpagewouldneedtobealtered
toredesignthesiteinaconsistentmanner.Everypageneeded20ormoredifferent
tweaks,andeachtweakhadtobeappliedconsistentlytoeverypageofthesite.In-
evitably,somepagesweremissedandeventuallytheredesignplanwasdropped
unceremoniously.Inshort,theuglywebsiteremaineduglyforalotlonger,before
dyinganastydeaththroughsheernegligence(indeed,therearemanysuchlegacy
documentslitteredthroughouttheWebtoday).Thisneedn’tbethecase,though.
Happy Days! CSS Support Is Here
ThelargemajorityofwebbrowsersinusetodayofferexcellentsupportforCSS.
Thiswasn’talwaysthecase,whichiswhysomepeoplewereslowtoadoptCSS-
baseddesigninthepast.SomebrowserschokeonafewofthemoreadvancedCSS
techniques,causingoddeffectsonthepage,whileotherssimplyignoreyourad-
vancedstyles(thelatterisdefinitelypreferable!).Byandlarge,though,youcan
Build Your Own Website The Right Way Using HTML & CSS
80
styleyourwebpagesusingCSSandbeconfidentthatwhatyouseeonyourscreen
isthesameaswhat99.5%ofyourintendedaudiencesees.
CSSgivesyouthepowertosetstylingrulesinoneplace.Whenyouwanttomake
changestoyourwebsite,youmakechangesinthatoneplace,andyourwhole
websitechangesautomaticallytoreflectthosenewstyles.
Creating an External CSS File
Ifyou’retomakeuseofallthebenefitsofanexternalstylesheet,you’llfirstneed
tocreateaCSSfilethatcanbesharedamongthepagesofyourwebsite.Openyour
texteditorandenterthefollowinginanewdocument:
chapter3/website_files/04_style_sheet_link/style1.css
/*
CSS for Bubble Under site
*/
p {
font-weight: bold;
color: blue;
}
SavethefileinthesamefolderasyourHTMLfiles,namingit
style1.css
;youcan
saveaCSSfileinthesamewayyousavedyourHTMLfiles.
NotethatthefirstfewlineswetypedintoourCSSfilewon’tactuallydoanything.
LikeHTML,CSSallowsyoutoaddcomments.It’sashamethatthetagsforHTML
commentsdifferfromthoseforCSScomments,buttheyperformexactlythesame
function:theyallowyoutomakenotesaboutyourworkwithoutaffectingtheon-
screendisplay.InCSS,acommentstartswitha
/*
andendswitha
*/
;thebrowser
ignoresanythinginbetween.Above,weusedthecommentsimplytomakeanote
aboutthepurposeofthefile,namelythatit’stheCSSfortheBubbleUndersite.
We’vealsoaddedarulesothatallthetypeinourparagraphsisnowboldandblue.
81
Adding Some Style
Linking CSS to a Web Page
BeforeyourCSScanhaveanyeffect,youneedtolinkittothewebpagestowhich
youwantthestylestoapply.Todothis,youneedtoadda
link
3
elementtothe
head
ofeachandeverywebpagethatwillbestyledusingCSS.Oursitecontains
justthreepagesatthemoment,sothiswillbeniceandeasy.The
link
element
simplylinksafiletothepageonwhichtheelementappears;inthiscase,thelinked
fileisastylesheet.
Below,thenewlineappearsinthecontextofthehomepage:
chapter3/website_files/04_style_sheet_link/index.html
(excerpt)
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
Let’stakealookatwhatthemarkupmeans.
The
href
attributetellsthewebbrowserwherethestylesheetfile(
style1.css
)canbe
found,inthesamewaythatthe
href
attributeisusedinananchortopointtothe
destinationfile(forexample,
<a href="home.htm">Home</a>
).
The
rel="stylesheet"
and
type="text/css"
partsofthelinktagtellthebrowser
whatkindoffileisbeinglinkedto,andhowthebrowsershouldhandlethecontent.
Youshouldalwaysincludetheseimportantattributeswhenlinkingtoa
.css
file.
Empty Element Alert!
ThelinkelementisanotheroneofthoseemptyelementswecoveredinChapter2,
withoutseparatestartandendtags.linkisacompleteelementinitsownright,
andendsusingthespaceandforwardslash(followingXHTMLsyntaxrules).
NowthatweknowhowtolinkourpagestoourCSSfile,let’stryitoutonour
projectsite:
3
http://reference.sitepoint.com/html/link/
Build Your Own Website The Right Way Using HTML & CSS
82
Openeachofyourwebpages—
index.html
,
about.html
,and
contact.html
—inyour
texteditor.Addthefollowinglinejustbeforetheclosing
</head>
tagineachof
thosefiles:
<link href="style1.css" rel="stylesheet" type="text/css"/>
Besuretosaveeachpage.Then,tryopeningeachoneinyourwebbrowser.
Allyourparagraphsshouldnowdisplayinbold,bluetext.Ifso,congratulations
—you’venowlinkedonestylesheettothreeseparatepages.Ifyouchangethecolor
specifiedinyour
.css
filefrombluetored,youshouldseethatchangereflected
acrossyourpagesthenexttimeyouopenthem.Goahead,giveitatry.
Now,usingbold,bluetextmightbeagoodwaytomakesureyourstylesheetsare
correctlylinked,butit’snotthedesigneffectwewanttouse.Removethe
p
rule,
butleavethecomment,andwe’llstartbuildingourstylesheetforreal.
Starting to Build Our Stylesheet
Thestylesheetisreadytobeused.It’ssavedintherightlocation,andyourweb
pages(allthree—count’em)arelinkedtoitcorrectly.It’stimetosetsomestyles.
Oneofthefirstchangesthatpeopleoftenmaketoawebsite’sdefaultstylingisto
thefont(ortypeface)that’sused.OnWindows,mostbrowsersuseTimesNewRoman
asthedefault—it’sthefontthathasbeenusedinallthescreenshotswe’veseenso
far.Formanypeople,though,it’sabitdull,probablybecauseit’susedmorethan
anyother.It’sveryeasytochangefontsusingCSS’s
font-family
property.
Thebestplacetousethisiswithinthe
body
element,asshownbelow:
chapter3/website_files/04_body_verdana/style1.css
/*
CSS for Bubble Under site
*/
body {
font-family: Verdana;
}
83
Adding Some Style
Documents you may be interested
Documents you may be interested