Cascading Style Sheets - HTML5 with Visual Studio 2012 - page 88

Implementing the Style Rules
Now we get to the fun part, adding style. There is a huge number of style attributes that are available to you and
I will demonstrate some of the more useful techniques that are new to CSS3. Many of these styles have been
used for a while but prior to CSS3, their implementation was more complicated, often requiring JavaScript. After
assigning some basic style rules I'll show you how to use more advance features including:

• Rounded corners

• Gradient backgrounds

• Tables

• Multiple columns

• Box shadows

• Zebra striping

• 3D transforms

• CSS Animation

Adding Basic Styles
Before you start adding the new styling features, you'll need to define the basic style formats. Add a style element
inside the head element at the top of the Default.cshtml file. Then add the rules shown in Listing 4-2. Again, if
you prefer, you can download the Default_styled.cshtml file and copy the code from there.

Listing 4-2. Adding the basic styles
<style>
/* Basic tag settings */
body
{
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}

h2
{
font-size: 18px;
line-height: 5px;
padding: 2px 0;
}

h3
{
font-size: 12px;
line-height: 5px;
padding: 2px 0;
}