2022.2

l
AcombinationofHTMLelements,separatedbyacomma.TheCSSrulewillapplytoall
HTMLelementsthatarelistedintheselector.Forinstance,aCSSrulewiththeselector
h1, pappliestofirstlevelheadingsaswellasparagraphs.
l
HTMLelementsinsideotherHTMLelements.Forinstance,aruleforallparagraphsinside
adivelementhastheselector:div p.
l
Etcetera.Seehttps://www.w3schools.com/cssref/css_selectors.aspformoreCSSselect-
orsandcombinationsofCSSselectors.
5. Selectthelayoutoptionsthatshouldapplytoselectedelements;see"Stylingandformatting"on
page260.Note:whereawidthcanbesetasapercentage,itisapercentageofthespace
betweentheleftandrightmargin.
6. ClicktheApplybuttontoseehowasettingaffectsanyelementsthataresubjecttotheselector.
(YoumayhavetomoveandresizetheStylesheetdialogbeforeopeningtheEditRuledialog,in
ordertobeabletoseethetemplatethatyouareworkingon.)Ifalliswell,clickOK.
7. IntheStylesheetsdialog,clicktheselectorthatyouchose.AllCSSrulesforthatselectorwill
becomevisibleinaboxbelowthelistofselectors.
Editing plain CSS
l
ClickthebuttonAdvancedinanypropertysheettoopenaCSSpropertyeditor.TypeCSSprop-
ertiesattheleftandvaluesattheright.
l
IntheResourcespaneattheleft,double-clicktheglobalstylesheetorthestylesheetfortherel-
evantcontext.Thefileopensintheworkspaceinthemiddle.
AlistofallCSSpropertiesandtheirpossiblevaluescanbefoundhere:https://www.w3schools.-
com/cssref/.
CustomCSSpropertiescanbeusedaswell;foranexplanationandexamplesofthesesee:
https://developer.mozilla.org/en-US/docs/Web/CSS/--*.
Tip: Right-clickandchooseFormat,orpressCtrl+Shift+Fto"pretty-print"theCSSandmakeit
easiertoreadandedit.
Note: Blockcomments(/*...*/)areallowedinCSS,butsingle-linecomments(//...)arenotstand-
ardandmightnotworkasexpectedinallbrowsers.
IntheDesigner,syntaxhighlightingdoesn'tworkonsingle-linecommentsinCSSfiles.
Step 2: apply CSS to the content
AftereditingtheCSSfile(s),makesurethattheCSSrulesactuallyapplytooneormoreelementsinthe
template.
Page 266