Creating and Applying Block-Level Styles
Stylesheets contain certain root (or parent) styles. When you add a new style, you are creating a new style class (i.e., a child of the parent style). Initially, the class inherits all of its property values from the root style, but you can then give the class different values so that it serves a unique purpose.
A block-level tag takes up the entire space of the line, but can contain other inline elements. Examples of block tags are <div>, <h1>, <li>, <ol>, <p>, <table>, and <ul>, which all have corresponding styles in a stylesheet.
[Menu Proxy — Headings — Online — Depth3 ]
How to Apply a Parent Block Style
- From the Content Explorer, open South-by-Southwest.htm.
- Let's create a new heading. At the end of the existing content, create an empty paragraph.
-
Type Headliner Performances. Notice the position of your cursor. Since it is already within the paragraph (at the end of it), only styles applicable to block content display in the Style drop-down.
Note If you select part of the text by highlighting it with the cursor, you could accidentally miss a portion of it. In addition, if a piece of the text is wanted rather than a block of text, then only character styles are applicable. The Style drop-down would only show relevant character styles to choose from.
-
From the Home ribbon, Style drop-down, select h2. The default block-level style applies.
-
Click
to save your work.
How to Create a Block Style Class
We want to be able to apply a secondary heading style. Let's create a new style class for the h2 parent element.
- From the Content Explorer, expand Resources > Stylesheets, and double-click Styles.css.
- From the Styles drop-down, select Heading Styles.
- In the left pane tree structure, select the h2 style.
-
From the local toolbar, click
. The New Selector dialog opens.
Note A selector is a way to associate XHTML content with style settings based on various information—most often its type, class, or ID. Sometimes the word "selector" is used interchangeably with the term "style," but a selector can be much more than just a simple style.
-
Make sure h2 displays as the HTML Element. In the Class Name field, type SecondaryColor. Click OK.
-
In the left pane tree structure, the new style class appears under the h2 element. Select it (if it is not selected already).
- In the local toolbar, make sure the Show drop-down displays Show: Set (Locally) Properties - properties set in this stylesheet.
- In the Add Properties drop-down, select color.
- In the Color Property field, replace the default property "inherit," with a new value. Type Purple. Press ENTER.
-
Click
to save your work.
How to Apply a Child Block Style
- Open South-by-Southwest.htm.
- Click inside the h2 block.
-
From the Home ribbon, Style drop-down, select h2.SecondaryColor.
The h2.SecondaryColor overrides the original color property with the assigned purple color. The style h2.SecondaryColor is, in effect, a child of the h2 parent style. It also inherits other values from the parent style. A period is added between the name of the parent style and the name of the class.
Other topics in the project with an h2 style still show a black heading style, as expected.
-
Click
to save your work.