A final touch of style

To sum up, we have devised 3 new styles for the Marjorie Anderson's recipe for Southern Corn Bread. The first one, called Pretty, is shown below:

recipe  {
  display: block;
  font-family: "URW Chancery L", serif;
  width: 75%;
  margin: 2em auto;
  padding: 1em;
  border: thin groove olive;
  background-color: #FFFFEE;
}

dish    {
  display: block; 
  font-size: x-large;
  font-weight: bold;
  text-align: center;
  color: olive;
}

ingredients  {
  display: block;
  margin-top: 2em;
  margin-bottom: 1em; 
} 

ingredients:before  {content: "INGREDIENTS";}

ingredient  {
  display: list-item; 
  list-style-type: none;
} 

quantity:after {content: " of ";}

directions {
  display: block; 
  margin: 1em; 
  text-align: justify;
}

directions:first-letter {
  color: purple;
  font-weight: bold;
}

step[optional]:after {content: " (optional)";}

story {
  display: block; 
  font-style: italic;
  font-size: small;
  text-align: justify;
  margin: 1em; 
  border-top: thin dashed olive;
  padding-top: 1em;
}

Notice how we have centered the recipe by setting the width of the recipe element to 75% of the window and by setting the left and right margins to the value auto, which means that the actual margins are automatically calculated (in this case, they are assigned to 12,5% of the width of the window each).

The other 2 styles, called Float left and Float right, essentially differ from the above one because the ingredients element floats to the left and to the right of the other elements. You can see the result of the application of the 3 styles by choosing the appropriate alternative style for the Marjorie Anderson's recipe.