Style Text Properties

Once you create content, you may then want to style them to make it fit your design. There are a host of text elements that you can style. Many of the styles once they are created and save can be APPLIED to other element easily. This is akin to CSS classes that can be APPLIED to multiple elements.

Style Text Elements

• Style Text
• Style Paragraphs
• Style Characters
• Style Links
• Style Lists

Style Text

There are several methods to style text:

• Use standard text methods
• Use web fonts
• Paragraph and Character styles (will be discussed next)

Standard Text Methods

1. Select the text you want to style.
2. Change any text properties (e.g., font color, size) using on of the following options:

• Options bar for the most common text properties and the ability to select paragraph or character styles from the drop-down menus (will be discussed next)
  
  
  
  
• Text panel for common and advanced text properties:
  
  
  

Web Fonts

1. You can also use web fonts to style words, headings, and paragraphs.
2. Preview pages in browser.

Style Paragraphs

To speed up the process of styling paragraphs in your web site, you can create paragraph styles based on an existing paragraphs format and easily apply those styles to other text elements 

The advantage of using text styles is that you can apply global style thoughtout your site to ensure consistency. This is akin to applying a CSS style sheet to multiple pages.

1. Select a paragraph or heading and style it however you wish (e.g., change font, color, size, etc.).
2. Open the Paragraph Styles panel (CTRL+F11 or Window Paragraph Styles).
3. CHECK POINT: In the Paragraph Styles that opens, you should see that no style is currently applied to the selection.
4. Click on the New Styles icon at the bottom of the panel to add a new paragraph style to the list (e.g., Paragraph Style)
5. Doulbe-click on the new style to open up the Paragraph Style Options dialog box and give it a more descriptive name (e.g., CustomParagraph or PageTitle)
6. If the selection is a heading, select the appropriate heading level from the Paragraph Tag's drop-down menu (e.g., <h1> Headline)
7. Click the OK button to commit the changes.
   
   
   
   
8. Select another paragraph or heading that has not been styled, then in the Paragraph Styles panel, click on the paragraph style that you would like to APPLIED.
9. CHECK POINT: You should see the new style applied to the selection.
10. If you select a paragraph or heading that has a paragraph style ALREADY APPLIED to it and you ADD ADDITIONAL attributes (e.g., Bold, Italic), you will see a plus sign (+) and the end of the existing style denoting that style has OVERRIDES attached to it.
    
    
    
    TIP: To see what those override(s) are, hover over the style and you will see a tooltip that show a list of the overrides below a dashed line.
    
    
    
    
11. To REMOVE any override with a selection that has a paragraph style applied already with overrides, click on the first icon at the bottom of the panel (clear style overrides icon). You will see the plus sign (+) disappear and the additional style(s) REMOVED FROM the selection.
12. To APPLIED any override with a selection that has a paragraph style appled already with overrides, click on the second icon at the bottom of the panel (redefine selected style icon). You will see the plus sign (+) disappear and the additioan style(s) APPLIED TO the selection.
13. Preview results.
    

Style Characters

Likewise, you can style characters easily by creating character styles and applying them to other inline text. Characters styles works similar to paragraphs styles except they are used for inline styling (e.g., bold, italic, and underline) WITHIN a paragraph or heading.  The only difference is that you select a span of text within a paragraph or heading instead of a complete block of text like a paragraph.

1. Follow the steps in the Style Paragraphs section except make a inline selection and a Span tag instead of a Paragrapp tag.
2. Preview results.

Style Links

You can change the default link style OR create new link styles to match the look and feel of your web site.

1. Select the link you want to change.
2. Click on the Hyperlinks link at the top of the page and then click on the Edit Link Styles button.
   
   
   
   
3. In the dialog box that appears, make the necessary changes that you want for each of the four states. You can change the Bold, Italic or Undeline properties.
   
   

Style Lists

Lastly, you can also style a bullet or number list with an another font symbol.

1. Select a bullet list or number list and do one of the following:
• Select the bullet or number drop-down menu and select a different list style.
• With a bullet list selected and its drop-down menu opened:
  • select the + New Character... button at the bottom of the panel.
  • In the New Character Bullet dialog box that appears:
    • select a font type (e.g., Fontawesome) and a category
    • a font symbol from the grid
    • click the Add button
    • click the OK button
    
    
2. CHECK POINT: You should see the new bullet list style applied to the list.