Using Embedded Styles
In this section, we continue to construct and embellish our shopping list of cheeses in the file index.html.
Select the text for another list item, and reopen the CSS Properties dialog (via Panels, Style Properties as before, or via Alt+p then Alt+s, or by selecting the "Set CSS styles" icon slightly to the right of the middle of the icon bar), but this time change the selection to "Apply styles to:" "all elements of same type...". Select a slightly cheesier orange-yellow hue this time, and then select the OK command button.
In the "wysiwyg" view of the main BlueGriffon window (or in the web browser preview, after you Save the file again, and reload the view in the browser), you can see the background color for all of the list items except one has been changed. This illustrates one aspect of the hierarchical overrides in CSS; an inline style which you apply to a given element (e.g. list item) takes precedence over an embedded style which is applied to all elements of that type (e.g. all list items within a given file).
Ah, but our goal had been to only highlight the items on the list which we feared might not ever be available at this particular cheese shop, rather than every list item. CSS includes a powerful concept of selectors, which we can utilize if we supply a class for the items we would like to style similarly. It is wise to use class names which convey meaning, or the significance of the distinction. So, for example, rather than naming our class "cheese-yellow-orange" we will name it "no" (since that was the simple response to our inquiry about this item last week). Then for example, if on next week's edition of our shopping list we begin to loose all hope of finding these items locally, we could change the background color for all items of class "no" to be gray. (We could even change their "Visibility" to be "hidden".) Such changes would leave more confusion in their wake if the class name simply echoed an initial description of how to display the element (e.g. "cheese-yellow-orange") rather than gave a semantic hint.
How do you prepare to use selectors in your style? You need to supply a class name for some elements. Select a list item, and in the class textbox type in the class name, "no".
Repeat for each of the other similar list items (Gruyère through Double Gloucester). (While it would be tempting to select a group of list items and supply the class name once for all of them, that would achieve a different result. As the hover text reveals this operation would "Apply a class to selection's container". For this list in this document, you will probably find that the class is applied to the entire body of the document. Since our goal is for some list items to be in our chosen class, and others not, applying a class to the container would not be helpful for our goal in this instance.)
With the text cursor on one of these list items of class "no", reopen the CSS Properties dialog, but this time change the selection to "Apply styles to:" "all elements of class...". Notice that by default the selection beside "all elements of class..." is filled in with "no". In the future, when working with documents in which multiple classes have been defined you will need to select the pertinent class from this drop-down list. Select the background color dot again, and choose a lighter yellow color this time.
We must also select a compatible Foreground color with this rule, to guard against some other style rule possibly changing the text to e.g. a nearly-invisible white color against this light-colored background). Select the Foreground color dot and choose black, then select the OK command button. An important guideline for web design and style creation is:
- Whenever a style specifies a Background color it must also specify a compatible color (or Foreground color, as BlueGriffon names it).
In the BlueGriffon window (or in the web browser preview window, after Saving the file and reloading the tab or page within browser) you will observe three different background colors for the various list items. This illustrates another aspect of the hierarchical overrides in CSS; an embedded style rule which has more specificity (e.g. it applies to items only with class="no") takes precedence over an embedded style which is applied to all elements (e.g. all list items within a given file). This tutorial will not illustrate each of the techniques for determining precedence, and therefore the displayed or rendered style, when multiple style rules match a given item. But there is a well-defined priority for predicting the deterministic outcome, regardless of which web browser is interpreting the style rules (in the absence of implementation errors within the browser).
Now you might want to get rid of the undesirable darker highlighting of the list items which are not of class "no". Merely move your text cursor to be within one of those list items (Red Leicester through Stilton), and in the CSS Properties dialog (with the default selection of "Apply styles to:" "all elements of same type..."), select the Colors, Background dot yet again. This time select the upper left choice (white), then select the OK command button. Note that BlueGriffon shows your previous highlighting of list items of class "no" still persists.
These exercises have demonstrated some of the flexibility and power of using CSS to control the appearance of your web page.
Using BlueGriffon to construct a stand-alone web page (i.e. an HTML file that you would like to send as an email attachment) with inline style information or embedded style rules would be quite appropriate. The advantage is that all information (for both the content and the style) is inseparably contained in one file.
However, if you are using BlueGriffon to construct a web site, or even just a small portion of a web site, using only inline styling or embedded style rules would be counterproductive. The next section will reveal why, and show the better alternative.