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

How It WorksThis example is a lot to digest. Take a look at each part of it in detail to see how it comes together. First,explore the markup of the document. I have included a element inside the table to house thename of the recipe:Spicy Thai Peanut SauceI could just as easily have put the name of the recipe in a heading element like and placed it outsidethe table. I chose the caption so the name of the recipe is bound to the table of ingredients. Later,if I choose to, I can include the name of the website or a logo above the table of ingredients. Next, I’veadded and elements. These can be used to control the layout of each column,although I haven’t chosen to take advantage of this capability yet. Although you can use these elements,they are not absolutely necessary. I can leave them out, causing no impact on the table’s final renderedlayout. Next, I added the table headings, placed inside elements, and I used instead of to house the contents of each cell: quantity measurement product instructions Chapter 12: TablesI added the element to house the contents of the recipe itself, and near the bottom of the recipeI listed the instructions in an unordered list () element. I placed final suggestions in a paragraph atthe bottom of the document.Look more closely at how the CSS comes together with the markup to produce the final rendered outputin Figure 12-4. The first rule styles the element, and there’s quite a bit going on here:body {font-family: monospace;padding: 10px;margin: 10px;/* Moz proprietary opacity property */-moz-opacity: 0.7;/* Microsoft proprietary filter property */filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);/* CSS 3 opacity property */opacity: 0.7;background: url(‘cross_hatch.jpg’) repeat;}467