HTML and CSS Reference
Working with Gradients
With CSS3 you can easily create a gradient by setting the background-image attribute using the linear-gradient
function. With this function you can specify the beginning and ending color as well as the angle that the gradient
should be applied. You'll use a gradient in the main heading, which has the intro class.
Add the following rule at the end of the style element:
/* Gradients */
border: 1px solid #999999;
background-image: -webkit-linear-gradient(45deg, #ffffff, #6699cc);
background-image: linear-gradient(45deg, #ffffff, #6699cc);
■ The intellisense in WebMatrix doesn't recognize the linear-gradient attribute and will show this as a
Css validation error. you can ignore this.
This will apply the gradient as a 45° angle. This also creates a rounded border. The page should now look like
Figure 4-9 .
Figure 4-9. Using a gradient background
It is generally considered bad practice to use tables in your markup for formatting purposes. This type of
formatting is better done in the style sheet. You can then update the style if a different format is needed. You
might have noticed that the current web page has the aside element following the main content instead of the
two aligned side-by-side. You'll setup a table now using CSS to correct that.
Add the rules shown in Listing 4-4 at the end of the style element: