2022.2

resultinatemplatewithamessymixofstylesthatisn’teasytomaintainandlacksconsistentdesign.
ThereforethepreferredwaytostyletemplatesiswithCSSfiles:CascadingStyleSheets.Thistopic
explainshowtodothat.
Why use CSS files
ThebasicideabehindCSSistoseparatethestructureandcontentsofa(HTML)documentasmuchas
possiblefromthepresentationofthatdocument.
CascadingStyleSheetswereoriginallydesignedforusewithwebpages,orHTMLfiles.Sinceevery
templateintheDesignerisconstructedinHTML,CSSfilescanalsobeusedintheDesigner.
Insteadofsettingthefontsize,lineheight,coloretc.foreachandeveryparagraphinthetemplate
itself,youcandefinealayoutforallparagraphs,andforalloutputchannels,inaCSSfile.
Thebenefitofthisisthatyoucanquicklyandeasilychangethelookandfeelofallcontextsinonetem-
plate,withouthavingtochangethecontents.Intheeventthatyourcompanychoosestouseanother
fontortoadjustitscorporatecolors,youonlyhavetochangethestylesheets.
You are writing HTML
Whenyouaddelements,suchastext,imagesoratable,tothecontentofatemplate,youareactually
constructinganHTMLfile.
Toseethis,toggletotheDesigntabintheworkspace.Clickanywhereinthecontent.Takealookat
thebreadcrumbsatthetopoftheworkspaceorselecttheOutlinepane.Thebreadcrumbsshowthe
HTMLtagoftheclickedelement,aswellastheHTMLtagsofotherelementstowhichtheclickedele-
mentbelongs.Theclickedelementisattheendoftheline.
ToedittheHTMLtextdirectly:
l
Intheworkspace,toggletotheSourcetab.
OnthistabyoucanviewandeditthecontentofthetemplateintheformofplaintextwithHTMLtags
(notetheanglebrackets:<>).YoumayaddandeditthetextandtheHTMLtags,classes,ID’sand
otherattributes.
TolearnmoreaboutHTML,seeforexamplehttps://developer.mozilla.org/en-US/-
docs/Web/Guide/HTML/Introductionandhttp://www.w3schools.com/html/default.asp.
Manyvideocoursesandhands-oncoursesaboutHTML(andCSS)areofferedontheInternetaswell,
someforfree.Go,forexample,towww.codeschool.comorwww.codeacademy.comandlookforHTML
(andCSS)courses.
What you can't do with CSS
InConnect,itdependsontheoutputchannelwhatcanandcannotbedonewithCSS.CSScanonlybe
usedtoitsfullpotentialwithHTMLoutput.Animationandtransitionfeatureswon'tworkinPrintoutput,
Page 262