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:
-
Reference a cascading style sheet (CSS). This technique is useful if you want to use the same styles for multiple documents.
-
Create a document-specific style block. This is similar to using a style sheet, but the style definitions apply only to that document.
-
Apply styles individually to elements such as paragraphs, or to collections of elements in divisions or spans.
Defining Styles
You can define styles by referencing an existing cascading style sheet (CSS).
To include a reference to a cascading style sheet
-
If it does not already exist, create the style sheet you want to use and add it to your current project.
-
Switch to Source view.
-
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
-
Switch to Source view.
-
In the header of the document (inside the <HEAD> block), create a style block that begins with <STYLE> and ends with </STYLE>.
-
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:
-
Implicitly. If you have referenced a style sheet or included a STYLE block in the document, styles that match existing tags in your document apply automatically. For example, if your style sheet or style block defines the style H2 as being 14 point, bold, and sans-serif, then all paragraphs tagged with H2 will have those attributes (unless you override the attributes explicitly).
-
By applying a style class to an individual element, span, or division. The style sheet or style block must contain class definitions. A span of text differs from a division in that a division is always set off from the rest of the document as separate paragraphs.
-
By setting inline style properties for any HTML element. This technique does not reference any style sheet or style block. If the element's style is already defined in a style sheet or style block, setting inline style attributes overrides the inherited style.
To apply a style class or style to an element, span, or division
-
Switch to Design view, and then select the element, span or division to style.
-
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.
-
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).