Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Chapter 14: XMLThe element is also represented with the element, and this is given itsstyle using the display: table-row-group; declaration:ingredientsbody {display: table-row-group;}So far, nothing other than the and elements contributes to the actual presentationof the document.Next, table rows are given their behavior:heading, ingredient {display: table-row;}Unlike the columns, heading groupings, and row groupings, table rows are very important for the structureof the document. These keep the cells in their places.Next the cells in the heading are styled with a bold font, centering, black text, and 150% font size, which,in this case, is 50% larger than the browser’s default font size:heading * {font-weight: bold;font-size: 150%;color: black;text-align: center;}The cells inside the element are selected using two selectors, the descendant selector and theuniversal selector. The descendant selector is the space between the type selector, heading, and the universalselector, which selects all descendants of the element. In this example, that is the element, the element, the element, and the element: Allthese are descendants of the element. The universal selector is the asterisk. As you learned inChapter 3, using the universal selector by itself selects all elements. Here the principal is the same. I want toselect all children of the element without calling them by name, so I use heading * as the selector.This selects all the children without having to type each element’s name. The cells contained in the element haven’t been made into cells yet. That is handled by the next rule:heading *, ingredient * {display: table-cell;padding: 5px;text-transform: lowercase;}Here again I’ve chosen the universal and descendant combination of selectors, which provides me withflexibility should I chose to add additional elements to the recipe in the future. Here I am selecting thechildren of the element, as I did for the last rule, and the children of the element, which selects all remaining cells in the table. The cells of the table’s body that actually containthe ingredients are styled with the next rule:ingredient * {font-size: 130%;}533