Nested Tags

When one HTML tag is contained within another, it is nested and therefore can inherit the style settings from the outer tag.

[Menu Proxy — Headings — Online — Depth3 ]

How to Edit Nested Style Elements

  1. From the Content Explorer, open Austin-City-Limits.htm.
  2. At the end of the "Format" section, create an empty paragraph.
  3. From the Home ribbon, click . This groups selected items.

  4. From the Create Group dialog, select div. Click OK.

  5. Type Willie Nelson was the first featured performer. Notice the default paragraph font color is black.

  6. Open Styles.css.
  7. From the Styles drop-down, select All Styles.
  8. In the left pane tree structure, select the div style.
  9. From the local toolbar, Show drop-down, select Show: Set (Locally) Properties - properties set in this stylesheet.

  10. In the Add Property drop-down, select color.

  11. In the Color Property field, replace the default property "inherit," by typing a new value of Purple. Press ENTER.

    Note You might not see the purple color display right away, and that is okay. When you press ENTER and save the stylesheet, those actions enforce the style update.

  12. Click Save all files. to save all files.

  13. Open the Austin City Limits topic. Since the p element is within the div element (and the div is the wrapping container tag that holds the style), the paragraph text within the div inherits the div style of purple font.

  14. In the stylesheet, select the p style.
  15. In the Add Property drop-down, select color.

  16. In the Color Property field, replace the default property "inherit," by typing a new value of Gray. Press ENTER.

  17. Click Save the active file. to save your work.

  18. Open the topic again. Since the p element is within the div element, it is “closer” to the source, and the text turns gray.

  19. Open Famous-Austin-Folks.htm. Let’s change the color on the list styles so all the text in the project appears the same.

  20. Open Styles.css.
  21. From the Styles drop-down, select List Styles, and then select li.
  22. In the Add Property drop-down, select color.
  23. In the Color Property field, replace the default property "inherit," by typing a new value of Gray. Press ENTER.

  24. Click Save all files. to save all files.

  25. Go back to the Famous Austin Folks topic to check the list items color update.
  26. From the Window ribbon, select Close All Documents.

Note Cascading stylesheet (CSS) rules account for cascading order, specificity, and inheritance. All of which determine the look and feel of the project. See Cascading and CSS Styles and Page Structure.

Ta-Da!

Congratulations! You've reached the end of this tutorial.

To go through other style tutorials, click here.

To check out additional tutorials, click here.