2022.2

Connect.
FormoreinformationaboutSass,see:https://sass-lang.com/.
ForinformationaboutworkingwithSassintheDesigner,see"UsingaSassfile"onpage270.
StylingyourtemplateswithCSSfiles
Note: EmailclientsdonotreadCSSfilesandsomeevenremovea<style>tagwhenitispresent
intheemail'sheader.Nevertheless,CSSfilescanbeusedwiththeEmailcontextinthe
Designer.
WhengeneratingoutputfromtheEmailcontext,allCSSrulesthatapplytothecontentofthe
emailcanbeprocessedandaddedeithertotheheaderoftheemailortoinlinestyleproperties
asiflocalformattingwasapplied,dependingontheEmailsectionproperties.See"Emailsection
properties"onpage483.
Step 1: edit CSS
Editing CSS using a property sheet
1. SelectEdit > Stylesheets.
2. ClickthedownwardpointingarrownexttoGlobalandselectthescopethatyouwanttoedit
stylesfor,orselecttheGlobalCSSfiletoeditCSSrulesthatapplytoallcontexts.
3. ClickNew,orclickoneoftheselectorsthatarealreadylistedandclickEdit.
4. TypeaCSSselector.Thiscanbe:
l
Aclass:.class.ClassrulesapplytoallHTMLelementswiththatclass.Whenyoucreate
aclass,chooseanamethatindicateswhattheclassisusedfor,e.g.‘small’foraclassthat
giveselementsthefontsize‘small’.Theclassnamehastobeprecededbyadot,e.g.
.small.
l
AnID:#id.AnIDisalwaysprecededby#,e.g.#sender.WhenyoucreateanID,choose
anamethatindicateswhattheIDisusedfor,e.g.#senderwouldrefertotheHTMLele-
mentwithinformationaboutthesender.
Note: EachIDshouldbeuniqueandcanonlybeusedonceineachsection.
Note: DonotgiveanelementtheID'pages'ortheclassname'dynamic'.Theseare
reservedwords.UsingthemasanIDorclassnameleadstoundesirableeffects.
l
AnHTMLelement:p,h1,table,etc.Typethetagnamewithouttheanglebrackets.
Page 265