Select the background color dot again, and choose a lighter yellow color this time. 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. Notice that by default the selection beside "all elements of class." is filled in with "no". 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.". 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.) For this list in this document, you will probably find that the class is applied to the entire body of the document. As the hover text reveals this operation would "Apply a class to selection's container". (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. Repeat for each of the other similar list items (Gruyère through Double Gloucester). Select a list item, and in the class textbox type in the class name, "no". How do you prepare to use selectors in your style? You need to supply a class name for some elements. "cheese-yellow-orange") rather than gave a semantic hint. (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. 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. 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). It is wise to use class names which convey meaning, or the significance of the distinction. 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. all list items within a given file).Īh, 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. list item) takes precedence over an embedded style which is applied to all elements of that type (e.g. This illustrates one aspect of the hierarchical overrides in CSS an inline style which you apply to a given element (e.g. 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. Select a slightly cheesier orange-yellow hue this time, and then select the OK command button. 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.". In this section, we continue to construct and embellish our shopping list of cheeses in the file index.html.
0 Comments
Leave a Reply. |