A number of AEM components include a field for adding a CSS class: Header Text, Image, List, Reference, Search Widget, Text, Text & Image. When you include a class in this field, AEM applies it to either the wrapper div that surrounds the element, or, in the case of the List component, the unordered list <ul> element itself.

Styling the Text component

To see how a style is applied to a component, try applying the globally-available class ruled to a Text component:

1. Drag a Text component on to the page
2. Fill it with placeholder text
3. In the CSS class field, type ruled

A horizontal rule will be added to the top of the Text component's div. If you use Firebug to inspect the text block, or look at the source code directly, you'll see that AEM has given the <div> wrapper a class of ruled, in addition to the default text class that is applied to every text component. You can continue to add as many classes to the component as you wish — simply separate each class name in the CSS class field with a single space.

Next, create a new style in your custom stylesheet and upload it to the DAM. Apply that CSS class to the Text component and refresh your browser. Your custom style will be applied.

You can also apply styles directly to elements within the Text component. Click on the Source Edit button in the Text component to see the underlying HTML.