Web Programming with HTML5, CSS, and JavaScript

7.10 Centering Content Within the Viewport, Color Gradients

In this section, we describe the formatting used in the TV Advertisements web page. We’ll discuss the web page’s layout, including how to center the web page’s content within the viewport. Then we’ll discuss how to generate a color spectrum for the web page’s background.

Web Page’s Layout

Let’s start with something that should be a review—using the CSS display property with table values. In Figure 7.13, note that the two video boxes and their headings are side-by-side. We achieved that look by using CSS. Specifically, we defined a table with the display: table property-value pair and two table cells with display: table-cell property-value pairs. Take a look at the TV Advertisements ...