Home / Articles / Adding and Styling Text

Adding and Styling Text

Chapter Description

In this sample chapter from The Adobe Muse CC Classroom in a Book, author Brian Wood provides step-by-step instructions on adding and formatting text and creating type styles on your Adobe Muse created website.

Creating Type Styles

Using styles in Muse, you can quickly apply consistent formatting to text and make global changes across multiple pages in your site. After you create a style, you can update all of the text throughout your site that uses that particular style simply by editing the saved style. Styles you create on one page are available on every other page in a site. This is very similar to how styles in InDesign and Illustrator work. When you publish your site, Muse converts your styles to CSS (Cascading Style Sheets) rules.

Muse supports three types of text styles:

  • Paragraph styles retain text and paragraph attributes; apply them to an entire paragraph.

  • Character styles retain text attributes only; apply them to selected text, such as a single character or word.

  • Bullet styles retain formatting from lists using the Bullet Styles panel.

Creating and applying paragraph styles

The first type of text style you’ll learn about is paragraph styles. Paragraph styles save formatting from an entire paragraph and encompass all of the formatting options found in the Text panel, including font size, alignments, indents, and more.

Next, you’ll create a paragraph style to save the formatting for heading text and another style for the main body text so that you can apply that formatting elsewhere easily. Remember, after you create a style, it appears in the Paragraph Styles panel, no matter which page of the site is open.

  1. Choose Window > Reset Panels.

  2. Choose Window > Paragraph Styles to open the Paragraph Styles panel.

    Take a minute to become familiar with the options in the Paragraph Styles panel. As you progress through this exercise, you’ll learn about each of these options.

  3. With the Text tool (text_tool.jpg) selected, click three times in the first paragraph that begins with “At CoffeeShop, our coffee is...” to select it.

  4. Click the Create A New Style button (new-layer.jpg) at the bottom of the Paragraph Styles panel.

    Muse saves the formatting from the selected text as a paragraph style and adds it to the Paragraph Styles panel. By default, Muse names the new style “Paragraph Style,” but you can, and should, rename it to make sense to you.

  5. In the Paragraph Styles panel, double-click the style named “Paragraph Style” to open the Paragraph Style Options dialog box.

  6. Change the Style Name to Body.

    In the Paragraph Style Options dialog box, notice that the formatting options that were saved from the paragraph text appear. Also, you’ll see the Paragraph Tag menu. To learn more about the Paragraph Tag menu, see the Paragraph_tags.pdf file in the Lessons > Lesson04 folder.

  7. Click OK.

    When you create a new style from selected text, Muse does not automatically apply the style to that text; edits to the style don’t automatically affect the paragraph on which you originally based the style. To apply the new style to its paragraph of origin, you must apply the style after you make it. Double-clicking to name the style does that for you, and also lets you assign a more meaningful name to the style.

    You can always tell which style is applied to text by selecting that text or inserting the cursor in it and looking in the Paragraph Styles panel where the applied style’s name will be highlighted.

  8. Position the cursor over the Body style in the list.

    04fig35.jpg

    A yellow tooltip appears, listing the style settings, which can help you to differentiate between styles with similar names.

  9. With the Text tool selected, select the header text “COFFEE.” Repeat steps 4 to 7, creating a new paragraph style named Heading. Make sure that in the Paragraph Style Options dialog box you choose <h1> Headline from the Paragraph Tag menu.

    Choosing <h1> Headline from the Paragraph Tag menu means that in the HTML code that Muse generates, the HTML tag for the text with the Heading style applied will be an <h1> tag (called a heading 1). That can be very useful for search engine optimization because an <h1> tag carries more importance than a <p> (paragraph) tag, which is set by default. Setting a paragraph tag can also make it easier for screen readers and other assistive devices to navigate the content. You are not required to choose <h1> Headline to make your site work.

  10. Insert the cursor into the paragraph that begins “Baked on site at CoffeeShop, our baked goods are...” In the Paragraph Styles panel, click the Body style to apply it to the text.

    You can either insert the cursor in text or select the entire paragraph (or more) to apply paragraph styles.

  11. Insert the cursor into the paragraph that contains the “Baked Goods” text. In the Paragraph Styles panel, click the Heading style to apply it to the text.

    Notice that the “Baked Goods” text is not uppercase like the “COFFEE” heading text. The method you used to change the case of the COFFEE headline (Edit > Change Case > UPPERCASE) cannot be saved in a paragraph style. Next, you will edit the Heading style to fix this.

Editing paragraph styles

After you create a paragraph style and begin working in your pages, you may change your mind later on and want to change the settings in the style. In Muse, when you change style settings, every paragraph that has that paragraph style applied will update. In Muse, in order to change a paragraph style you need to redefine the style. To redefine a style, you edit the formatting for text that has the paragraph style applied. Then you redefine the style based on the changes. This makes the paragraph style match the new settings, and all other paragraphs with that style applied automatically update to match.

  1. With the Text tool (text_tool.jpg), select the heading text “Baked Goods.” In the Control panel, change the Font to Estilo Pro Book and the Font Size to 22.

    04fig39.jpg
  2. In the Text panel (Window > Text), click the Uppercase button (all_caps.jpg) to capitalize all of the letters, and change the Space After to 10. Using this method of capitalizing can be saved in a paragraph style.

    Look in the Paragraph Styles panel. You can tell that the style named Heading is applied because it is highlighted. You’ll also now see a plus (+) to the right of the name. The plus indicates local formatting on the selected text. Local formatting means that there is formatting on the selected text that is different from the paragraph style applied to it.

  3. Position the pointer over Heading + in the Paragraph Styles panel. A yellow tooltip appears displaying the style settings, a dashed line (-----), and then size: 22, space after: 10, case: uppercase, font: Estilo Pro Book. Settings listed below the dashed line indicate formatting on the selected text that is not a part of the applied paragraph style. Yours may be in a different order and that’s okay.

  4. Click the Redefine Selected Style button (redefine-style.jpg) at the bottom of the Paragraph Styles panel.

    Notice that the plus is gone from the right of the Heading style name. Also, the “COFFEE” heading has updated to reflect the new formatting since that text also has the Heading style applied.

  5. With the Text tool, select the entire first paragraph that starts with the text “At CoffeeShop, our coffee is...” In the Text panel, change the following:

    • Font: Acumin Pro Light (or another font you want)

    • Font Size: 16

    • Space After: 12

  6. Click the Redefine Selected Style button (redefine-style.jpg) at the bottom of the Paragraph Styles panel to update the Body style.

  7. Choose File > Save Site and leave the first paragraph selected for the next section.

Duplicating and deleting paragraph styles

In Muse, you may wind up creating multiple paragraph styles that are very similar to each other. For instance, you may want to create two versions of the Body style, maybe one for mobile and one for desktop design, with the only difference being the font size. In that case, instead of creating a whole new style you can duplicate an existing style and adjust the formatting.

  1. In the Paragraph Styles panel, right-click the style named Body, and choose Duplicate Style to create an exact copy of the style. Not surprisingly, Muse names it “Body copy.”

  2. Right-click the new style (Body copy) and choose Rename Style. Change the name of the style to Body 18, and press Return (Enter).

    04fig44.jpg
  3. Renaming a style by right-clicking does not apply the new style to any selected text. To change the new Body 18 style, you’ll redefine the style. First, you need to apply the style to text.

  4. Click Body 18 in the Paragraph Styles panel to apply it to the selected paragraph. The paragraph will not change in appearance because the applied style (Body 18) is just a duplicate of the original Body style with the same attributes.

  5. Change the Font Size in the Control panel to 18 by typing 18 and pressing Return (Enter).

  6. Click the Redefine Selected Style button (redefine-style.jpg) at the bottom of the Paragraph Styles panel to update the Body 18 style to match the selected text.

  7. With both styles (Body and Body 18) applied to the text now, it’s time to decide which to use for the body copy. In this case, you’ll use the Body style instead of the Body 18 style. To do so, you can simply apply the Body style to the selected text and keep both styles, or you can delete one of the styles (if you no longer need it), and Muse allows you to choose a style to replace it with. You’ll delete the style Body 18 to see how that works.

  8. With the paragraph still selected, in the Paragraph Styles panel, the Body 18 style should be highlighted since it’s applied to the selected paragraph. Click the Delete The Selected Style button (delete-style.jpg) at the bottom of the panel (circled in the following figure).

  9. In the dialog box that appears, choose Body and click Replace.

    The Body 18 style is gone and the two paragraphs now have the Body style applied. Notice that the text now displays using the specified font size.

  10. Choose Edit > Deselect All.

  11. Choose View > Hide Guides to temporarily hide the guides.

  12. Choose View > Hide Frame Edges, to get a better sense of what the text looks like on the page.

  13. Choose View > Show Guides and choose View > Show Frame Edges to show the guides and frame edges again.

Creating and applying a character style

Paragraph styles apply attributes to an entire paragraph, while character styles can include only the following formatting options: font, font size, color, styles (such as italic, bold, underline), and tracking. You access character styles from the Character Styles panel (Window > Character Styles) no matter what page in the site is open.

Next, you’ll format the company name, “CoffeeShop,” and apply that formatting throughout the page using a character style.

  1. Click the Character Styles panel tab on the right side of the workspace (or choose Window > Character Styles). Once again, I pulled the panel out of the dock, closer to the text.

  2. With the Text tool (text_tool.jpg) selected, select the “CoffeeShop” text in the first paragraph.

  3. Click the Font menu in the Control panel and choose the font Acumin Pro > Light Italic.

  4. Click the Underline button (underline.jpg) in the Control panel.

  5. With the text “CoffeeShop” still selected, click the Create A New Style button (new-layer.jpg) at the bottom of the Character Styles panel.

    Position the pointer over the new style named “Character Style,” and you’ll see the saved formatting appear in a yellow tooltip, just like in a paragraph style.

  6. Double-click the new style named Character Style. In the Character Style Options dialog box, change the Style Name to company name and click OK.

    As with a paragraph style, by double-clicking the name of the new character style right away, you also apply it to the selected text from which the style was made.

  7. Select the text “CoffeeShop” in the paragraph after the “BAKED GOODS” heading.

  8. Click the style named “company name” in the Character Styles panel to apply that formatting to the text. Leave the text selected.

Editing a character style

Editing a character style and the rest of the options in the Character Styles panel work identically to the Paragraph Styles panel. You need to redefine a character style to update the formatting, and change any text with the style applied.

  1. With the “CoffeeShop” text still selected, remove the underline on the text by clicking the Underline button (underline.jpg) in the Control panel.

  2. Click the Redefine Selected Style button (redefine-style.jpg) at the bottom of the Character Styles panel.

    Notice that the plus is gone from the right of the “company name” style name and that the other CoffeeShop text has updated to reflect the new formatting. Next, you’ll make two columns from the text by copying the text frame to the next column.

  3. Choose Window > Reset Panels if you dragged any panels away from the dock.

  4. Select the Selection tool (selection_tool.jpg). With the text frame still selected, press the Option (Alt) key and drag the frame to the right column. When the top of the frame copy is aligned with the top of the original, release the mouse button and then the key. Smart guides will help you to align the frames. See the following figure for placement help.

  5. In the original text frame in the left column, select the Text tool (text_tool.jpg) and select from the BAKED GOODS heading to the end of the text. Press Backspace or Delete to remove it.

  6. In the copied text frame in the right column, select all of the text above the BAKED GOODS heading. Press Backspace or Delete to remove it.

    You may need to insert the cursor just before the “B” in BAKED GOODS and press Backspace or Delete a few times to remove any extra paragraph returns.

    Currently in Muse, there is no way to thread or link text frames together.

  7. Choose File > Save Site and leave the MENU page open.

Working with bullet styles

In Muse, you can save bulleted or numbered list formatting as a bullet style using the Bullet Styles panel. This is useful for applying similar formatting to lists, and for updating list formatting later. One interesting thing to note about Muse bullet styles is that the style applies formatting to an entire list within a text frame. If you have a list with multiple levels, the formatting from each level is saved within the style. Text formatting such as font size, font family, color, etc. are not saved in a bullet style; only formatting associated with the list is saved. Next, you’ll create a list style from the bullet list you created earlier so you can easily apply it to other text.

  1. With the Text tool (text_tool.jpg) selected, insert the cursor in the bullet list text in the left column.

  2. Choose Window > Bullet Styles to open the Bullet Styles panel. In the Bullet Styles panel, click the Create A New Style button (new-layer.jpg) at the bottom of the panel to create a list style from the text that the cursor is in.

  3. Double-click the new “Bullet Style” style name in the Bullet Styles panel. Change the name to Menu Items and click OK.

    Notice that the Menu Items style in the Bullet Styles panel is applied to the text.

  4. Select the “Bagels... Muffins... Sandwiches” text in the right column. Click the Bullets button (bullets.jpg) in the Control panel to apply a bullet list to the text.

  5. In the Bullet Styles panel, click the Menu Items style name to apply the formatting to the selected text.

    If you need to update a bullet list style, you can do so by redefining the style just like a character or paragraph style.

  6. Open the Paragraph Styles panel (Window > Paragraph Styles) and, with the bullet list text still selected, click the Body style to apply the formatting.

  7. Select the Bullet list text “Espresso... Latte... Mocha...” in the left column and click the Body style in the Paragraph Styles panel to apply the formatting.

  8. Choose Page > Page Properties. In the Page Properties For MENU dialog box, with the Layout tab selected, change the Min Height (minimum height of the page) to 1100. Click OK.

    The page has space beneath the text now, and the page still has the ability to grow in height if you add more content to the page beneath the text.

  9. Choose File > Save Site.

  10. Choose File > Close Page to return to Plan mode.

Working with the Spell Checker video_icon_final.jpg

To learn how to work with Spell Checker, check out the video titled “Working with the Spell Checker” that is a part of the Web Edition. For more information, see the “Web Edition” section of Getting Started at the beginning of the book.

4. Review questions | Next Section Previous Section

There are currently no related articles. Please check back later.