Applying Styles to HTML Text

See Also

In addition to simply formatting individual characters or paragraphs in your HTML document, you can apply styles, or predefined formatting instructions.

In the HTML editor, you can define and apply styles using the following techniques:

Defining Styles

You can define styles by referencing an existing cascading style sheet (CSS).

To include a reference to a cascading style sheet

  1. If it does not already exist, create the style sheet you want to use and add it to your current project.

  2. Switch to Source view.

  3. From the Project Explorer, drag the style sheet to use into the head portion of the document (between the <HEAD> and </HEAD> tags.)

    Note   Style sheet links must appear in the head, or they won't work.

You can also create a document-specific style block that defines the styles you want to use in that document. To do so, you must be familiar with the syntax of style definitions.

To create a document-specific style block

  1. Switch to Source view.

  2. In the header of the document (inside the <HEAD> block), create a style block that begins with <STYLE> and ends with </STYLE>.

  3. Inside the style block, enter style information using syntax such as the following:
    tag={style1: attribute;style2: attribute;...;}
    

    -or-

    tag.classname={style1: attribute;style2: attribute;...;}
    

    The first syntax is used to assign style attributes to all instances of a particular HTML tag. The second syntax is used to define classes, which is useful for assigning style attributes to any arbitrary span of text.

    For example, a simple style block might look like this:

    <STYLE>
    H1={font-size: 14pt; font-weight: bold; font-family: sans-serif;)
    P={font-size; 11pt; font-weight: bold; color: blue;)
    SPAN.ProductName={font-weight: bold; color: red;}
    </STYLE>
    

    Tip   An easy way to create the style definitions in the style block is to use the CSS editor to create the styles, and then copy them from the Source view of that editor into the current page.

Applying Styles

You can apply styles in different ways:

To apply a style class or style to an element, span, or division

  1. Switch to Design view, and then select the element, span or division to style.

  2. Display the Properties window if it is not already visible (from the View menu, choose Properties). Make sure that the element you want to style is selected in the drop-down box at the top of the Properties window.

    Note   The Properties window does not display style properties when you are in Source view.

  3. To apply a style class, enter the name of the class in the class box. To set an inline style, enter a value for that style.

    Tip   Style attributes begin with a dot (for example, .fontSize).