Red car driving through two traffic cones

HTML5 Is in Style: Working with CSS3 and HTML5

Use HTML5 with new CSS3 features to optimize user experience on your website

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.




    
    CSS3 Demos
    
    
    
    


    

HTML5 & CSS3

HTML5 is in Style!

Posted by Michael Palermo - @palermo4

ad
The next event!

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:

  • Table Display
  • Fonts
  • Rounded Corners
  • Color Techniques
  • Box Shadows
  • Transforms
  • Media Queries

Once you start down the path of developing HTML5 with CSS3, you will not want to develop or design for the web without it!

Copyright © 2011. Please don't steal stuff, etc.

Figure 2 shows the final rendering of this page:

Figure 2: The final rendering of the default.htm 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:



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