- Inserting text
- Formatting text
- Creating Type Styles
- Review questions
- Review answers
This chapter is from the book
This chapter is from the book
This chapter is from the book
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. This is very similar to how styles in InDesign or Illustrator work. You can access Paragraph Styles in the Paragraph Styles panel (Window > Paragraph Styles) of Design mode.
When you publish your site for the world to see, Muse automatically converts your styles to CSS (Cascading Style Sheets) rules and applies them throughout your website.
Muse supports two types of 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.
In addition, when you create a new site in Muse, a style named [None] appears by default in the Paragraph Styles panel. You can use this style to remove formatting from text to which you applied a paragraph style. As a best practice, apply text formatting using paragraph and character styles; doing so can cut down on your effort in Muse and also make a smaller site that has the potential to download faster on the Web.
Creating and applying paragraph styles
Paragraph styles apply formatting to an entire paragraph and encompass all of the formatting options found in the Text panel, including font size, alignments, indents, and more. Next, you will create a paragraph style to save the formatting for the heading text and another style for the main body text on the ABOUT page 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.
- Click the Paragraph Styles panel tab on the right side of the workspace.
Take a minute to familiarize yourself with the options in the Paragraph Styles panel. As you progress through this exercise, you will learn about each of these options.
- With the Text tool, click three times in the first paragraph that begins with “Koffee Kart began as a whim …” to select it.
- In the Paragraph Styles panel, click the Create A New Style button (
) at the bottom of the 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.
- In the Paragraph Styles panel, double-click the style named Paragraph Style to open the Style Options dialog box.
- Change the Style Name to GeorgiaBody.
In the Style Options dialog box, notice that the formatting options that were saved from the paragraph text appear. Also, you will see the Paragraph Tag menu. To learn more about the Paragraph Tag menu, see the “Paragraph_tags.pdf” file in the Lesson04 folder. 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 would not 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 as well as lets you change the name to something that makes sense.
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.
- Position the cursor over the new style in the list, now named GeorgiaBody.
A yellow tooltip appears, listing the style settings. This can help you to differentiate between styles with similar names.
- With the Text tool selected, select the header text “ABOUT KEVIN’S KOFFEE KART.” Repeat steps 3 to 5, naming this new style, Heading.
- Insert the cursor into the paragraph that begins “The Koffee Kart specializes.” In the Paragraph Styles panel, click the GeorgiaBody style to apply it to the text.
You can either simply insert the cursor in text or select the entire paragraph (or more) to apply 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.
Clearing overrides and editing a paragraph style
In Muse, changing a paragraph style setting is called redefining a 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.
- With the Text tool, select the heading text “ABOUT KEVIN’S KOFFEE KART.” In the Control panel, change the Letter Space value to 0.
Look in the Paragraph Styles panel. You can tell that the style named Heading is applied because it is highlighted, but you will also 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.
- Position the pointer over Heading+ in the Paragraph Styles panel. A yellow tooltip appears displaying the style settings, a dashed line (-----), and then kerning: 0. Settings listed below the dashed line indicate formatting on the selected text that is not a part of the applied paragraph style.
- Click the Clear Style Overrides button (
) at the bottom of the Paragraph Styles panel to remove the letter spacing applied to the heading text.
This strips the formatting from the selected text, and reapplies the currently applied paragraph style. The plus (+) sign that was displayed to the right of the paragraph style’s name disappears once you click the Clear Style Overrides button.
- With the Text tool, select the entire first paragraph that starts with the text “Koffee Kart began as …” In the Control panel, change the Leading to 140%. Also, click the Color option in the Control panel, and change the RGB values to: R: 110, G: 97, B: 97.
- Press Enter or Return until the color options are hidden.
Once again, look in the Paragraph Styles panel and you will see a plus appear next to the style named GeorgiaBody. Instead of clearing the overrides (removing the extra formatting), you will change the style to match the first paragraph formatting (including the new leading value and color).
- In the Paragraph Styles panel, position the pointer over the applied style named GeorgiaBody + and take a look at the overrides at the bottom of the yellow tooltip.
- Click the Redefine Selected Style button (
) at the bottom of the panel.
Notice that the plus is gone from the right of the GeorgiaBody style name and that the bottom paragraph has updated to reflect the new formatting.
- Choose File > Save Site and leave the first paragraph selected for the next section.
)
)
)
Deleting and duplicating a paragraph style
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 GeorgiaBody style, with only a difference in font size. In that case, instead of creating a whole new style to closely match another, you can duplicate an existing style and adjust the formatting as necessary.
- In the Paragraph Styles panel, right-click (Windows) or Control-click (Mac OS) GeorgiaBody, the style applied to the selected text. Choose Duplicate Style from the context menu to create an exact copy of the style. Muse names it, not surprisingly, GeorgiaBody copy.
- Right-click (Windows) or Control-click (Mac OS) the new style (GeorgiaBody copy) and choose Rename Style from the context menu. Change the name of the style to GeorgiaBody small, and press Enter or Return.
Renaming a style this way does not apply the new style to any selected text.
In order to change the style duplicate, you will redefine the style. First, you need to apply the style to some text.
- Click GeorgiaBody small in the Paragraph Styles panel to apply it to the selected first paragraph. The paragraph will not change in appearance because the style is just a duplicate.
- Change the Font Size in the Control panel to 20 by typing 20 and pressing Enter or Return.
- Click the Redefine Selected Style button at the bottom of the Paragraph Styles panel to update the GeorgiaBody small style to match the selected text.
You will use the new GeorgiaBody small style in place of the GeorgiaBody style. To do this, you can simply apply the new style to selected text and keep the original GeorgiaBody style, or you can choose to delete the original GeorgiaBody style (if you no longer need it), and Muse allows you to choose a style to replace it with. You will do the latter.
- Choose Edit > Deselect All in preparation for deleting the style.
- In the Paragraph Styles panel, select the GeorgiaBody style. Click the Delete The Selected Style button (
) at the bottom of the panel.
- In the dialog box that appears, choose GeorgiaBody small and click Replace.
The GeorgiaBody style is now gone and the last paragraph has the GeorgiaBody small style applied. Notice the text now displaying in the specified smaller font.
- Choose View > Hide Guides to temporarily hide the guides and get a better sense of what the text looks like on the page.
- Choose View > Show Guides to show the guides again.
Unlinking a paragraph style
At times, you may want to strip the formatting from text and start over. Or, perhaps you want text to retain the formatting you originally applied to it with a paragraph style, regardless of changes you later make to that style. Both tasks are simple to accomplish in Muse.
- With the Text tool selected, select the heading ABOUT KEVIN’S KOFFEE KART.
- In the Paragraph Styles panel, select the [None] style to remove the formatting and replace it with default formatting.
- Click the Heading style to reapply the style formatting.
- With the Text tool, select the caption paragraph “Photo by: Karen Koffee.”
The caption is formatted, but it doesn’t have a paragraph style applied. You can easily strip the formatting from this sort of text as well, but you need to take a different route. In the Paragraph Styles panel, notice that the [None] style is already applied. That means that you cannot reapply that style to strip the formatting, but you can apply any other style, then click [None] again.
- Select any other style in the Paragraph Styles panel to apply it to the text.
- Select the [None] style to set the formatting back to default. Leave the text selected for the next steps.
- Select the Heading style in the Paragraph Styles panel to apply the style to the caption paragraph.
Applying this style creates a starting point for formatting.
The last piece of working with paragraph styles involves unlinking a style from text. If you want to create a style similar to another style or apply a style, but don’t want that text to update when the style updates, you can unlink the style from the text.
- Click the Unlink Style From Selection button (
) at the bottom of the Paragraph Styles panel.
This applies the [None] style to the text, but leaves all of the Heading style formatting. You can now change the formatting of the selected text however you like and it will never update if the Heading style is redefined.
- Change the Font Size to 12, click the Italic button, click the Align Right button, and change the letter spacing to 0 in the Control panel. Notice that the caption text that you see may not appear to be italics.
- Choose View > Preview Mode. The Preview Problem dialog box may appear indicating that the web font you chose, Droid Sans Bold, does not have an italic style and it will be simulated. Click OK.
- Choose View > Design Mode to return to the ABOUT page.
- Choose File > Save Site.
)
)
)
)
Creating and applying a character style
Paragraph styles apply attributes to an entire paragraph, but you can apply character styles to selected text only. Character styles can include only the following formatting options: font, font size, color, styles (italic, bold, underline), and letter spacing. You access character styles from the Character Styles panel (Window > Character Styles).
Next, you will format the proper name “Koffee Kart” and apply that formatting throughout the page using a character style. Just know that once a character style is created, it appears in the Character Styles panel if any page in the site is open.
- Click the Character Styles panel tab on the right side of the workspace.
Take a minute to familiarize yourself with the options in the Character Styles panel. They are the same as the Paragraph Styles panel.
- Choose View > Fit Page In Window.
- With the Text tool, select the text “Koffee Kart” in the first paragraph.
- Click the Italic button (
) in the Control panel. - Click the Text Color in the Control panel and choose the red color swatch (color square) that shows R=193 G=39 B=45 in the yellow tooltip when you position the pointer over it. See the figure for the correct red color.
- With the text “Koffee Kart” still selected, click the Create A New Style button () 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.
- Double-click the new style named Character Style. In the Style Options dialog box, change the Style Name to proper name and click OK.
As with a paragraph style, by double-clicking to name the character style right away, you also apply it to the selected text from which the style was made.
- Select the first occurrence of Koffee Kart in the third paragraph.
- Click the style named “proper name” in the Character Styles panel to apply that formatting to the text.
- Click the Preview mode link to see the page in Preview mode.
- Click the Design mode link to return to the page.
- Choose File > Save Site.
)
)
)
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.
- With the Text tool, select the phrase “Koffee Kart” in the first paragraph.
- Change the color of the text in the Control panel to a dark gray that appears as a swatch in the color options.
- In the Character Styles panel, position the pointer over the applied style (proper name +) and take a look at the overrides at the bottom of the yellow tooltip.
- Click the Redefine Selected Style button () at the bottom of the panel.
Notice that the plus is gone from the right of the proper name style name and that the other Koffee Kart text has updated to reflect the new formatting.
- Choose File > Save Site.
)
When working with Character Styles, you will find that a lot of the features like duplicating, deleting, unlinking, and more are identical in functionality to paragraph styles.
Now that you have your text formatted and your styles created, you will copy some content from another site.
Pasting text between Muse sites
In this section, you’ll copy some text content from one page and paste it onto another. Copying and pasting text between pages in a site lets you keep the formatting. If you copy and paste text from one site to another site, the formatting is retained, and Muse copies any necessary text styles into the second site. This can be a great way to quickly duplicate styles from one site to another.
First, you need to add pages for this new content.
- Click the Plan mode link with your site showing.
- Position the pointer over the THE KOFFEE page thumbnail, and click the plus sign (+) beneath the thumbnail to create a new child page. Name the page Preparation.
- Position the pointer over the new Preparation page thumbnail, and click the plus sign (+) to the right of the thumbnail to create a new sibling page. Name the page Origins.
- Double-click the Preparation thumbnail to open the page in Design mode.
- Choose View > Fit Page In Window.
- Choose File > Open Site. Navigate to the Lesson04 folder in the Lessons folder.
Choose the file named CopyText.muse, and click Open (Windows) or Select (Mac OS). This is the site from which you’re going to copy the content.
- With the new site open in Plan mode, double-click the Preparation page thumbnail to open the page in Design mode.
- Choose Edit > Select All, then Edit > Copy.
Choose File > Close Site to close the site file and the Preparation page.
You should now be back on the Preparation page you just created in your site.
- Choose Edit > Paste In Place.
Pasting in place is a great way to paste content in the same relative location on a page as it was on the page you copied it from.
- Open the Paragraph Styles panel, and notice the new style named StepBody small.
Any styles associated with the copied text are brought into the site into which you are pasting the text. If you paste text with a style that has the same name as a style in the page that you are pasting the text into, the existing style overrides the new style you are pasting.
- Choose File > Close Page to close the Preparation page and return to the ABOUT page.
- Click the Preview link to preview the text changes on the ABOUT page, then click the Design mode link to return to Design mode.
- Choose File > Save Site.
)
)
Rotating a text frame
As you’ve seen so far in this lesson, you can transform a text frame in multiple ways, including position and size. But you can also rotate a text frame. If you rotate text frames in Muse, the text in them is converted to an image when the site is previewed, published, or exported to HTML. It’s really best to rotate only small pieces of text, because images can add to the download time of the pages in the browser.
You will rotate the caption text frame so that when you place an image in Lesson 6, “Adding Images to Your Site,” you can position the text frame vertically to the right of the image.
- Select the Selection tool in the Toolbox, and click to select the caption text frame.
- Press Control+= (Windows) or Command+= (Mac OS) a few times to zoom into the caption text frame.
- Position the pointer off any corner point on the frame, and you’ll see a rotate symbol (
) appear.
- Click and drag in a clockwise fashion. As you drag, press and hold the Shift key. Drag until the frame is vertical on the page. Release the mouse button and then the Shift key.
Muse shows a rotation value as you rotate in the Transform panel and allows you to change the rotation value numerically.
Also notice that after the text frame is rotated, the Rasterized Text Frame Indicator appears in the corner of the frame. It looks like a letter “T” with an image icon next to it. This indicates that the text frame will become an image when the site is published or exported.
- Open the Transform panel (Window > Transform), and you’ll see the Rotation Angle (
) value. Make sure that the Rotation Angle is 270.
Because you are going to place an image in a later lesson and align the caption text frame to it, leave it where it is for now.
- With the Selection tool, drag the left edge (what used to be the bottom edge before rotation) to the left to close up the frame around the text, if necessary.
- Choose File > Close Page.
- Choose File > Save Site, and leave the site open in Plan mode for the next lesson.
)
)
In the next lesson, you will explore how to create and edit shapes as well as create and edit color in Muse.