Using Selectors to Control Design
The Content Editor can be used as an effective design tool to ensure that the design is replicated as it is intended to be - no matter who is updating or adding content.
We can do this by limiting certain Selectors to the styles they are indented for. This way it would be hard for a website administrator to get the design wrong when making content changes.
2.If a website administrator chooses a Class that doesn't have a matching Selector to the element they are trying to style, the style will not show and the design will not be compromised!
For the following style example, I want to target a Paragraph, not a Span, Table or Font. My design has a background that relies on a certain width and padding around the text, so I know that if this style was applied to a Span tag, it would look wrong.
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10px 0px 10px 10px;
padding: 50px 60px 30px 60px;
background: url(/Templates/_images/html-Highlight-Chat.gif) no-repeat top left;
Within the Content Editor, I can see that the style is specific only to Paragraphs as indicated by the Paragraph Icon.
The result is a perfectly styled Paragraph with correct width, alignment and background image.