If you peer into the HTML5 specifications, you'll find plenty of documentation on HTML5, the fifth major installment of HTML. And if you nose around the latest tweets, blogs, and articles, you'll discover many references to HTML5 as a platform. Among the associated technologies that are often assumed when HTML5 is referenced is Cascading Style Sheets (CSS). In this article, we'll cover many of the enhancements to the latest version of CSS (version 3) and explain how CSS3 ties into HTML5.

Obviously, most web developers today are acquainted with CSS, so our focus will remain primarily on the popular new features in CSS3. To showcase those CSS3 features, we'll use a simple HTML5 document from a file named default.htm, shown in Figure 1, containing markup that highlights typical usage scenarios found in many websites today.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS3 Demos</title>
    <link rel="stylesheet" href="styles/reset.css" />
    <link rel="stylesheet" href="styles/core.css" />
    <link rel="stylesheet" href="styles/css3.css" />
    <script src="scripts/modernizr.js" type="text/javascript">
    </script>
</head>
<body>
    <header>
        <h1>HTML5 &amp; CSS3</h1>
    </header>
    <nav>
        <ul>
            <li class="selected"><a href="#">Home</a></li>
            <li><a href="#">Demos</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li class="subscribe"><a href="#">RSS</a></li>
        </ul>
    </nav>
    <aside id="banner">
        <header>
            <h2>Demo Site</h2>
        </header>
        <p class="upsideDown">Your world, upside-down</p>
        <figure class="headingPhoto">
            <img src="images/devconsocial.jpg"
                 alt="devconnections social" />
            <figcaption>The conversation begins here</figcaption>
        </figure>
    </aside>
    <section id="content">
        <section id="blogs">
            <article class="blogPost">
                <header>
                    <h2>HTML5 is in Style!</h2>
                    <p>Posted by
<a href="http://www.palermo4.com">Michael Palermo</a>
                        -
<a href="http://twitter.com/palermo4/">@palermo4</a></p>
                </header>
                <div>
                    <figure id="figureAd">
                        <img src="images/ad.jpg" alt="ad" />
                        <figcaption>The next event!</figcaption>
                    </figure>
                    <p> The purpose of this sample web page is to showcase the features of CSS3 with HTML5. Consider the list below of the topics that will be demonstrated:
                    </p>
                    <ul>
                        <li>Table Display</li>
                        <li>Fonts</li>
                        <li>Rounded Corners</li>
                        <li>Color Techniques</li>
                        <li>Box Shadows</li>
                        <li>Transforms</li>
                        <li>Media Queries</li>
                    </ul>
                    <p> Once you start down the path of developing HTML5 with CSS3, you will not want to develop or design for the web without it!         </p>
                </div>
            </article>
        </section>
        <aside id="sidebar">
            <section>
                <header>
                    <h3>Why HTML5?</h3>
                </header>
                <ul>
                    <li><a href="#">Less is More</a></li>
                    <li><a href="#">It's All Semantics</a></li>
                    <li><a href="#">Hear is Another Reason</a></li>
                    <li><a href="#">Lights, Camera, Video!</a></li>
                    <li><a href="#">The Web is Your Canvas</a></li>
                    <li><a href="#">More Storage</a></li>
                    <li><a href="#">Better Script</a></li>
                </ul>
            </section>
            <section>
                <header>
                    <h3>Your Thoughts?</h3>
                </header>
                <p contenteditable="true">
                    [replace with your feedback!]
                </p>
                <input type="button" value="Submit" />
            </section>
        </aside>
    </section>
    <footer>
        <p>Copyright &copy; 2011.  Please don't steal stuff, etc.</p>
    </footer>
</body>
</html>

Figure 2 shows the final rendering of this page:

Figure 2: The final rendering of the default.htm page

Let's first observe HTML5's relationship with CSS. The document in Figure 1 references three CSS files:

<link rel="stylesheet" href="styles/reset.css" />
<link rel="stylesheet" href="styles/core.css" />
<link rel="stylesheet" href="styles/css3.css" />

The first link is to the reset.css file. Typically, web designers provide a master or reset type of CSS file to equalize the defaults across all browsers. In this example, we are using the reset.css file made publicly available by CSS guru Eric Meyer. The next link is to core.css, which contains CSS features up to version 2.1. The final link is to css3.css (see Figure 3). This file contains features exclusive to CSS3. By separating CSS into multiple files, we can show how easy it is to distinguish CSS features from one another. However, all the CSS used in this example could have easily been rolled into one complete file as well.

@charset 'utf-8';

@font-face {
    font-family             : 'TitleFont';
    src                     : url('michroma.woff') format('woff');
    font-weight             : bold;
    font-style              : normal;
}
h1, h2 {
    font-family             : 'TitleFont';
}

#sidebar section {
    border-radius           : 11px;
    -webkit-border-radius   : 11px;
    -moz-border-radius      : 11px;
    -o-border-radius        : 11px;
}
#banner, #banner img {
    border-radius           : 22px;
    -webkit-border-radius   : 22px;
    -moz-border-radius      : 22px;
    -o-border-radius        : 22px;
}
#banner figcaption
{
    border-radius           : 0 0 22px 22px;
    -webkit-border-radius   : 0 0 22px 22px;
    -moz-border-radius      : 0 0 22px 22px;
    -o-border-radius        : 0 0 22px 22px;
    background-color        : rgba(0,0,0,0.4);
}

#content {
    display                 : table;
}
#blogs, #sidebar {
    display                 : table-cell;
}

#figureAd {
    box-shadow              : 11px 11px 11px #777;
    -webkit-box-shadow      : 11px 11px 11px #777;
    -moz-box-shadow         : 11px 11px 11px #777;
    -o-box-shadow           : 11px 11px 11px #777;
}

#figureAd:hover {
    transform               : scale(1.5) rotate(-10deg);
    -ms-transform           : scale(1.5) rotate(-10deg);
    -webkit-transform       : scale(1.5) rotate(-10deg);
    -moz-transform          : scale(1.5) rotate(-10deg);
    -o-transform            : scale(1.5) rotate(-10deg);
}

.upsideDown:hover {
    transform               : rotate(180deg);
    -ms-transform           : rotate(180deg);
    -webkit-transform       : rotate(180deg);
    -moz-transform          : rotate(180deg);
    -o-transform            : rotate(180deg);
}
@media (max-width: 1000px)
{
    nav ul li a {
        margin-right        : 0px;
    }
    #content
    {
        margin-top          : 50px;
        margin-left         : 15px;
        display             : inherit;
    }
    #blogs, #sidebar {
        display             : inherit;
    }
    #banner  {
        display             : none;
    }
}

You may have noticed the <script> tag reference to modernizr.js below the <link> tags in the default.htm page in Figure 2. Publicly available at www.modernizr.com, the Modernizr JavaScript library lets us design for the future using HTML5 and CSS3 without sacrificing control over experience in older browsers. We immediately benefit from this file by simply referencing it.

Using Tables to Define Layouts

How many of us recall using <table> tags to create web page layouts? Don't worry. This old method is not what we're talking about in this section. In CSS3, we can define a table-like layout without using <table> tags. For example, in Figure 4, look at the layout for the content portion of default.htm.

Figure 4: Layout for the content portion of Default.htm

The old approach, using <table> tags, would probably look something like what you see in Figure 5.

<!-- content element surrounds table -->
<table>
    <tr>
        <td><!-- blogs in first column --></td>
        <td><!-- sidebar in second column --></td>
    </tr>
</table>

The CSS3 way of doing things is much easier. Here's how we get a simple two-column layout in the css3.css file:

#content     {display : table;}
#blogs, #sidebar {display : table-cell;}

The <section> tag that has an ID of content is defined visually as a table. The two child tags with IDs of blogs and sidebar are defined in the CSS file as table-cell, causing each to render visually as a column in the table.

Fancy Fonts Made Easy

Bringing unique fonts to web pages has always been a challenge. To introduce a nonstandard font, developers often had to use images. In CSS3, this is no longer the case. CSS3 allows us to welcome new fonts to our web pages by using the @font-face definition. Consider the following definition, as found in the css3.css file:

@font-face {
    font-family             : 'TitleFont';
    src                     : url('michroma.woff') format('woff');
    font-weight             : bold;
    font-style              : normal;
}

The @font-face definition first establishes what the friendly name of the font will be by using the font-family property. In our example, we named the font "TitleFont." The src property requires the URL of the .woff file that contains the desired font. You can find custom .woff selections at sites such as www.fontsquirrel.com. The other properties define default behaviors for weight and style.

When serving a web page that uses custom fonts, the web server must be configured to understand the .woff extension and its MIME type. For Microsoft IIS, this can be accomplished by updating the web.config file, as we have done in Figure 6.

<configuration>
 
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
    </staticContent>
  </system.webServer>

</configuration>

The @font-face definition makes the font available only within the web page. We need to define the location in which we want the font to be used; we do this by referring to the friendly name elsewhere in the CSS file. In our example, this is how to use the custom font:

h1, h2 {font-family             : 'TitleFont';}

In this example, the custom font that has the friendly name of TitleFont will be applied to all <h1> and tags in the HTML.

Corners, Shadows, and Colors

Although it is true that the little things sometimes matter the most, it is also true that the little feature requests often cause the most fuss. Rounded corners, color enhancements, and box shadows are all features that have usually required meticulous tweaking with using images and JavaScript. Once again, CSS3 comes to our rescue.

Let's see how simple it is to apply rounded corners using CSS3. In the sidebar sections of default.htm, let's apply a rounded corner as follows:

#sidebar section {border-radius                 : 11px;}

The border-radius property defines the radius as either a unit value or a percentage value. The example here eliminates the need to explicitly specify the radius for each corner. So that's it. Well sort of. To support older browsers or other browsers, vendor-prefixed versions should also be applied. Here is the example again, this time with support for Mozilla, WebKit, and Opera:

#sidebar section {
    border-radius           : 11px;
    -webkit-border-radius   : 11px;
    -moz-border-radius      : 11px;
    -o-border-radius        : 11px;
}

Don't let the duplication bother you too much. If the browser doesn't understand a property, that property is ignored. And if repetition feels wrong to you, welcome to the world of multiple-browser support.

Now let's look at an example of applying the rounded effect to just some of the corners. Here, we want only the bottom-right and bottom-left corners to be rounded:

#banner figcaption
{
    border-radius           : 0 0 22px 22px;
    -webkit-border-radius   : 0 0 22px 22px;
    -moz-border-radius      : 0 0 22px 22px;
    -o-border-radius        : 0 0 22px 22px;
}

Shadow effects are just as easy to implement. The following example adds a shadow to the <figure> tag that has an ID of "figureAd":

#figureAd {
    box-shadow              : 11px 11px 11px #777;
    -webkit-box-shadow      : 11px 11px 11px #777;
    -moz-box-shadow         : 11px 11px 11px #777;
    -o-box-shadow           : 11px 11px 11px #777;
}

Like the border-radius property, vendor prefixes are added to support multiple browsers. The values for the property indicate the depth of the horizontal shadow, the depth of the vertical shadow, the depth of the blur effect, and the color of the shadow, in that order. The first two values are required. If negative values are supplied, the shadow goes in the opposite direction.

Color effects are also fairly simple to add. Consider the convention of dimming a photo when it is not the main attraction. In the past, we had to create a duplicate of the photo and add the dimming effect with image-editing software. With CSS3, we can define this effect without a modified version of the original image. Here is an example of applying a dimming effect to the <figcaption> tag associated with an <img> tag:

#banner figcaption
{
    /* other definitions removed for brevity */
    background-color        : rgba(0,0,0,0.4);
}

The rgba value uses four arguments. The first three define red, green, and blue (RGB) intensities with a value range of 0 through 255. The remaining value determines opacity, where 1.0 is opaque and 0 is completely transparent. Since the RGB values are all 0 in our example, the color is black, and the remaining value indicates 40-percent opacity. The effect is a grayish see-through layer above the image. The <figcaption> tag is absolutely positioned over the <img> in the core.css file. To cover the entire image with this effect, simply make <figcaption> the same dimensions as the image.

Transformations

In CSS3, transformations take the user experience to the next level. Let's consider just two transformations: scale and rotate. The scale transformation causes any UI element to shrink or grow when a user hovers over it. Suppose we want a portion of a page to pop out and rotate somewhat when we hover over it. We can apply the scale transformation to make it grow and the rotate transformation to provide a rotation effect. In the following example, we want to see the <figure> tag that has the ID of figureAd grow by 150 percent. We also want to see this tag rotate counter-clockwise by 10 degrees:

#figureAd:hover {
    transform               : scale(1.5) rotate(-10deg);
    -ms-transform           : scale(1.5) rotate(-10deg);
    -webkit-transform       : scale(1.5) rotate(-10deg);
    -moz-transform          : scale(1.5) rotate(-10deg);
    -o-transform            : scale(1.5) rotate(-10deg);
}

The vendor prefixes are all displayed in this example. Did you notice the -ms- prefix? While CSS3 transformations are under development, each browser will continue to have its own implementation. The first property that contains no prefix is there for future compatibility. Figure 7a shows the UI element before the user hovers the mouse over it; Figure 7b shows the element after hovering over it.

Figure 7A: UI element before hover

Figure 7B: UI element after hover
 

Media Queries

When using CSS, not only do we factor in the various browsers—as if that wasn't enough to worry about—we also have to consider various devices, such as mobile phones. With large and small screen dimensions, certain features may need to be tweaked to display correctly. With CSS3 media queries, we can alter the state of the display based on factors such as screen dimensions.

Consider the media query syntax in Figure 8.

@media (max-width: 1000px)
{
    nav ul li a {
        margin-right        : 0px;
    }
    #content
    {
        margin-top          : 50px;
        margin-left         : 15px;
        display             : inherit;
    }
    #blogs, #sidebar {
        display             : inherit;
    }
    #banner  {
        display             : none;
    }
}

If the screen width is less than 1,000 pixels, we apply new styles accordingly. In our case, we adjusted margins in the menu, removed the table layout features so the sidebar would fit under the content, and removed the banner from the display. Figure 9 shows the effect of the media query on the page.

Figure 9: Media query impact

Continuing on the HTML5 Path

Obviously, we haven't covered all the new features in CSS3, and the features we did cover can be explored much further. We simply aimed to provide an easy place to start with HTML5 and CSS3. Most of the new features can save you needless grunt work. With just one line of code in CSS, you can sometimes do what used to take a lot of work and many lines of code. Next, Dan Wahlin will further explore the benefits of HTML5, CSS3, and the Modernizr library that will ensure that your web apps work with both old and new browsers in "HTML5 and CSS3 Feature Detection with Modernizr." We are confident that once you start down the path of creating web sites with HTML5 and CSS3, you will never go back to anything else!