Creating and using Character and Paragraph styles

Adobe Muse provides an intuitive mechanism to save and reuse styles applied to objects. Creating and reusing styles is an easy way to achieve consistency in design and appearance across all pages of your site. Styles also allow you to quickly update your website redoing colors, fonts, text formats, and so on.

Using the styles within Muse allows you to achieve the following things:

• Consistency in appearance across all pages on your website
• Increased productivity by leveraging existing styles or creating styles and reusing them across web pages

Styles include Fill color, Stroke color, Effects, and so on. Styles can be applied to all types of objects within Muse, such as Images, Graphics, Shapes, Text, Characters. Styles then, within Muse, are further classified in to:

• Graphic Styles
• Paragraph Styles
• Character Styles

A character style is a collection of character formatting attributes that can be applied to text in a single step. A paragraph style includes both character and paragraph formatting attributes, and can be applied to a paragraph or range of paragraphs. Paragraph styles and character styles are found on separate panels. Paragraph and characters styles are sometimes called text styles. When you change the formatting of a style, all instances of text associated with the style are also updated.

1. Select the object you have styled on the web page.
2. Open Window > Character Styles panel.
3. To create a Character Style, click the button. You could also right-click (Command + Click on MAC) in the Character Styles panel and select New Character Style from the context-menu.
4. Double-click the newly created character style to bring up Character Style Options dialog.
5. Enter a meaningful name in the Style Name field. 
6. Choose a Span Tag for the character style.
7. Review the Style Setting field, and ensure that the character style settings are correct.

1. Open the Paragraph Styles panel by clicking its tab or choosing Window > Paragraph Styles.
2. Click the New Style button (page icon) at the bottom of the panel to save this set of font styles. Once you save a set of styles, you can apply them to other text elements later.
3. Double-click on the new style you just created in the Paragraph Styles panel, which has been given the default name of Paragraph Style. Rename it: top-nav-normal.

If you look at the States panel, you'll notice that all states: Normal, Rollover, Mouse Down, and Active, all use the same font formatting for the menu item labels.

4. Click Preview to see the page rendered in Muse as it will appear in a browser. Muse uses a version of Webkit to display the page, which is used by many modern web browsers. As you interact with the menu, notice that the buttons only display their labels (the menu item containers are transparent). Also note that the labels do not change when you hover your cursor or click on the buttons in the menu.
5. After you are finished testing and previewing the menu, click Design to return to editing the Main master page.

You can copy and paste all or selective attributes of a Character or a Paragraph style. Copying styles help you apply the same style to different elements, in a single click.

To dissociate a Character/Paragraph from a Style, do the following:

1. Select the Character or Paragraph you want unlink the style from.
2. Select Window > Character Styles or Paragraph Styles.
   
3. In the Character Styles or Paragraph Styles panel, click the button.
   

You can redefine a Character/Paragraph Style to instantly update its Style Settings. It is common design practice to change styling attributes, thereby creating Style Overrides. Adobe Muse indicates such overrides with a + sign.

Adobe Muse allows you to preserve or clear style overrides. You can preserve overrides by redefining a style.

Do the following:

1. Select Window > Character Styles or Paragraph Styles.
   
2. Select the Character or Paragraph Style you want to redefine.
3. Click the button.

It is common design practice to change styling attributes, thereby creating Style Overrides, indicated by + sign. Adobe Muse allows you to undo unintended changes to a Character or Paragraph Style by clearing style overrides.

To clear style overrides, do the following:

To clear overrides from a Character Style, do the following:

1. Select Window > Character Styles.
   
2. Select the Character Style you want to clear Style Overrides from.
3. Click the button.
   

To clear overrides from a Paragraph Style, do the following:

1. Select Window > Paragraph Styles.
   
2. Select the Paragraph Style you want to clear Style Overrides from.
3. Click the button.
   

The Clear All Styling option allows you to remove all styling attributes applied to a character or paragraph, and reset to default text styling.

To remove all styling, do the following:

1. Select text-frame you want to clear text styling from.
2. Right-click > Clear All Styling from the context-menu.

You can now track and manage usage of styles across your site. The new Go to Style Use option lets you displays full list of pages in your website where a Character or Paragraph Style is used.

1. Select Window > Character Styles or Paragraph Styles.
   
2. Right-click on a style and select Go to Style Use.