2022.2

StylingandformattinganEmailtemplate
ThecontentsofanEmailsectioncanbeformatteddirectly,orstyledwithCascadingStyleSheets
(CSS).See"Stylingandformatting"onpage671.
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format-
tingwasapplied,dependingontheEmailsectionproperties.See"Emailsectionproperties"on
page931.
Tip: Beforeyoucanstyleanelement,youhavetoselectit.InanEmailcontextitcanbedifficult
toselectanelementbyclickingonit.UsethebreadcrumbsatthetopandtheOutlinepaneat
theleft,toselectanelement.See"Selectinganelement"onpage570.
Inorderforastylesheettobeappliedtoaspecificsection,itneedstobeincludedinthatsection.
Therearetwowaystodothis.
Drag & drop a style sheet
1. ClickandholdthemousebuttononthestylesheetontheResourcespane.
2. MovethemousecursorwithintheResourcespanetothesectiontowhichthestylesheetshould
beapplied.
3. Releasethemousebutton.
Using the Includes dialog
1. OntheResourcespane,right-clickthesection,thenclickIncludes.
2. FromtheFile typesdropdown,selectStylesheets.
3. ChoosewhichCSSfilesshouldbeappliedtothissection.Theavailablefilesarelistedattheleft.
Usethearrowbuttonstomovethefilesthatshouldbeincludedtothelistattheright.
4. YoucanalsochangetheorderinwhichtheCSSfilesareread:clickoneoftheincludedCSSfiles
andusetheUpandDownbuttons.Notethatmovingastylesheetupinthelistgivesitless
weight.Incaseofconflictingrules,stylesheetsreadlaterwilloverridepreviousones.
Note: Stylesheetsareappliedintheorderinwhichtheyareincludedinasection.Thestylesin
eachfollowingstylesheetadduptothestylesfoundinpreviouslyreadstylesheets.Whenstyle
sheetshaveaconflictingruleforthesameelement,classorID,thelaststylesheet‘wins’and
overridestherulefoundinthepreviousstylesheet.
Page 482