• <div class="body"> <ul class="navbar"> <li><a href="http://www.jiffycms.net">Home page</a></li> <li><a href="#">Musings</a></li> <li><a href="#">My town</a></li> <li><a href="#">Links</a></li> </ul> <!-- Main content --> <h1> My first styled page</h1> <p> Welcome to my styled page!</p> <p> It lacks images, but at least it has style. And it has links, even if they don't go anywhere&hellip;</p> <p> There should be more here, but I don't know what yet. mm perhaps lorem Ipsum? :-)</p> <ul> <li>Aliquam sit amet erat non neque hendrerit porta.</li> <li>Pellentesque facilisis dictum urna, sed ultricies enim dignissim sit amet.</li> <li>Praesent viverra velit sit amet velit volutpat sed volutpat magna mollis.</li> <li>Aliquam ultricies augue non urna cursus id dapibus est laoreet.</li> <li>Sed luctus hendrerit ligula, a tincidunt nisl mollis id.</li> <li>Pellentesque hendrerit consequat sapien, id posuere felis sollicitudin nec.</li> <li>Fusce et elit sit amet justo pharetra molestie.</li> </ul> <dl> <dt>Definition list</dt> <dd> Etiam commodo iaculis tincidunt. Etiam dignissim quam id diam posuere mollis. Praesent vulputate tortor arcu. Cras sed leo enim, vitae venenatis felis.</dd> <dt>Lorem ipsum dolor sit amet</dt> <dd> Vestibulum quis nulla id odio faucibus feugiat a non nibh. Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd> </dl> <address> Made 18 November 2009<br /> by <b>myself</b>.</address> </div>

The class list now contains 4 custom classes. Click the apposite icon to get the list from the toolbar in the HTML editor above.

1. If you click anywhere in the designer region of the editor, where you want to apply the css style. In this case, the css class is applied to first direct container of the cursor location.
2. You select a specific piece of text and apply a classname from the list. In the background, this piece of text is wrapped within a span element containing the classname and you selected.
3. If you select multiple li elements and select a classname. The style gets applied to the direct container (UL)
4. If you click in a table cell, the classname gets applied to the table cell.
5. Lastly if you select multiple table cells, possible via ctrl+click or simply select the table as a whole(IE), then the classname gets applied to the table.

Note: Selecting multiple elements that are not contained within a common ancestor, will ignore the operation (in IE only), while apply the classname on the direct container (everybody else). As you can see, there are subtle differences on how the classname is applied based on browser.

Toggle (declarative syntax and remarks);