Show All

Defining a style

Before you can apply a style to something, you need to define it. There are two steps in defining a style:

  1. Specify the style’s selector—that is, the element type, class, or ID that the style will apply to. (See the descriptions of style types below.)
  2. Specify the properties affected by the style, and the values for those properties.
Types of styles

It is useful to identify three kinds of styles, distinguished by the type of selector they use:

  • Element styles use an element type as the selector; thus they apply to all instances of a specific element type (for example, all paragraphs).
  • Class styles come in two varieties:
    • Universal class styles use a class name by itself as the selector; thus they apply to any element that belongs to the named class (for example, any element of class “funny”).
    • Element-specific class styles use an element type and a class name as the selector; thus they apply to instances of a specific element type that belong to the named class (for example, paragraphs of class “callout”).
  • ID styles use an ID as the selector; thus they apply only to the element that has the specified ID (for example, the paragraph whose ID is “intro”).

Namo Web Editor icon note Defining a styleIt is possible to define a universal class style and an element-specific class style that both use the same class name—for example, “.mystyle” and “p.mystyle”. In such cases, the element-specific style takes precedence for the specified element type. To understand how browsers resolve other overlapping or conflicting style rules, please refer to Cascading and Inheritance in the online CSS reference.

Namo Web Editor icon reveal Defining a styleTo define an element style
  1. On the Home menu, go to Style, and then click Define Style.
  2. Click Namo Web Editor button add style Defining a style (Add).
  3. Click the Element box, select an element type, and then click OK.
  4. In the Character, Paragraph, and Borders & Background tabs, specify values for the properties you want the style to affect, and then click OK.
Namo Web Editor icon reveal Defining a styleTo define a universal class style
  1. On the Home menu, go to Style, and then click Define Style.
  2. Click Namo Web Editor button add style Defining a style (Add).
  3. In the Name box, type the class name for the style, and then click OK.
  4. In the Character, Paragraph, and Borders & Background tabs, specify values for the properties you want the style to affect, and then click OK.
Namo Web Editor icon reveal Defining a styleTo define an element-specific class style
  1. On the Home menu, go to Style, and then click Define Style.
  2. Click Namo Web Editor button add style Defining a style (Add).
  3. Click the Element box and select an element type.
  4. In the Name box, type the class name for the style, and then click OK.
  5. In the Character, Paragraph, and Borders & Background tabs, specify values for the properties you want the style to affect, and then click OK.
Namo Web Editor icon reveal Defining a styleTo define an ID style
  1. On the Home menu, go to Style, and then click Define Style.
  2. Click Namo Web Editor button add style Defining a style (Add).
  3. Under Style type, click ID.
  4. In the Name box, type the element ID that you want the style to apply to, and then click OK.
  5. In the Character, Paragraph, and Borders & Background tabs, specify values for the properties you want the style to affect, and then click OK.
Namo Web Editor icon reveal Defining a styleTo edit a style
  1. On the Home menu, go to Style, and then click Define Style.
  2. Select the style you want to edit on the Style list.
  3. In the Character, Paragraph, and Borders & Background tabs, edit the values you want to change, and then click OK.
Related topics

Setting character-related properties

Setting paragraph alignment, indentation, and line height

Setting margins, padding, and borders

Setting background colors and images

Applying a class style

Assigning an ID to an element

Defining a style