5 Days of HTML5 (Day 2: CSS3 and HTML5; a Match Made in Heaven)

Ready? Let’s go. For the sake of example this week, you might have noticed my main website is down. Well i’ll be rebuilding it in HTML5 at the same time as this tutorial and using that as the basis for my examples. I’ll then add a couple of tweaks and relaunch it in a week or two with a permanent page for this tutorial series.

For anyone who hasn’t seen my website, heres the latest design;

Pretty simple, the home page features a header at the top, with a logo at the left, and a navigation bar at the right. We then have a main news block with an image, and two other news blocks also with images which aren’t as wide. The remaining space is filled up with a twitter feed which in HTML5 is a nice use of the new <aside> tag.

In CSS2 and lower, we used to use Classes and ID’s, which only get sweeter in CSS3. Multiple objects could belong to a class, for example, in my website, I want to apply a border to both images, and article boxes. We can do with with one ‘border’ class. But these quickly get confusing when we want objects to inherit certain attributes of a class, we’d often end up with far more classes and ID tags than we really need.

In CSS3, we can use selectors to address elements within a tag, for example, I could select all paragraph text and header text in an article, and style it by using the following:

article h1,h2,h3,p {
text-transform:uppercase;
}

Notice how we can also group selectors in CSS3, allowing us to be much more efficient in the way we write stylesheets. Say goodbye to giant 2000 line stylesheets. I think this guy does a great job of explaining the selector stuff in CSS3

So back to our code. I spent last night finishing off my HTML and getting started on my CSS sheet. Heres a few screenshots and my code so far, which I’ve ran through the W3C validator and passed with no errors!

Code:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <!–METADATA–>
    <meta charset=”utf-8″ />
    <meta name=”description” content=”The Website of Musician, Interactive Designer and Web Developer Spencer Dixon” />
    <meta name=”keywords” content=”spencer dixon,web developer,max msp,augmented reality,prog rock” />

<title>Spencer Lloyd Dixon – Music, Blog, Design, Development</title>

    <link rel=”stylesheet” type=”text/css” href=”css/style.css” />
    <link rel=”shortcut icon” href=”images/favicon.ico” />  

    <!–FIX IE SUPPORT FOR HTML5–>
    <!–[if IE]>
    <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
    <![endif]–>

</head>

<body>
    <header>
    <img src=”images/logo.png” alt=”SpencerLloydDixon.co.uk Website Version 6.1″ id=”logo”>
        <nav>
              <ul id=”menu”>
                <li><a href=”/home.shtml”>Home</a></li>
                <li><a href=”/aboutme.shtml”>About Me</a></li>
                <li><a href=”http://www.spencerdixon.wordpress.com”>Blog</a></li&gt;
                <li><a href=”/juicebox.shtml”>Juicebox 6</a></li>
                <li><a href=”/portfolio.shtml”>Articles</a></li>
                <li><a href=”/links.shtml”>Links</a></li>
                <li><a href=”/contact.shtml”>Contact</a></li>
            </ul>
          </nav>
    </header>

    <section>
          <article>
            <img src=”images/juicebox/promo1.png” alt=”Juicebox Promotional Image”>
            <hgroup>
                <h1>The Juicebox 6 is Here…</h1>
                <h2>a MIDI controller with style</h2>  
            </hgroup>         
            <p>Built for the front of the stage the Juicebox 6 is a plug and play MIDI controller featuring 6 chunky arcade buttons and         
            6 potentiometers in a stylish backlit clear acrylic casing.
            The Juicebox 6 is available to buy  now, each order  hand made by myself and completely customisable in your choice of colour scheme and knob             
            styles.</p>
            <a href=”juicebox.shtml” target=”_blank”>Learn More</a>
          </article>

        <article>
            <img src=”images/articlethumbnails/flf.png” alt=”Flylazarusfly”  />
            <h3>Flylazarusfly Teaser</h3>
            <p>Footage from our Break Your Socks Valentines special is up featuring out home brew lighting rig using a Max/MSP application and Maxuino,
            decoding MIDI sequenced data playing in real-time with the band.</p>
            <a href=”http://vimeo.com/20139704&#8243; target=”_blank”>View Video</a>
          </article>

        <article>
            <img src=”images/articlethumbnails/facetracking.png” alt=”Facetracking with Jitter and Processing”  />
            <h3>Facepong! Facetracking with Jitter and Processing</h3>
            <p>I made a little game based on finally figuring out face tracking over christmas. The actual face tracking is done in Max and sent as OSC
            values to a Processing sketch</p>
            <a href=”http://vimeo.com/18302790&#8243; target=”_blank”>View Video</a>
          </article>

          <aside id=”twitter”>
            <img src=”images/twitter.png” alt=”twitter”>
            <ul id=”twitter_update_list”></ul>
            <a href=”http://twitter.com/spencerldixon&#8221; id=”twitter-link”>follow me on Twitter</a>
                <script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script&gt;
                <script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/spencerldixon.json?callback=twitterCallback2&amp;count=7″&gt;
                </script>
          </aside>
    </section>

    <footer>
        <img src=”images/email.png” alt=”email” width=”252″ height=”24″ id=”footer.email” />
        <img src=”images/followme.png” alt=”follow me:” width=”87″ height=”18″ id=”footer.followme” />

        <a href=”http://www.facebook.com/spencerdixon”><img src=”icons/facebook32x32.png” alt=”facebook” width=”32″ height=”32″/></a>
        <a href=”http://www.twitter.com/spencerldixon”><img src=”icons/twitter.png” alt=”twitter” width=”32″ height=”32″/></a>
        <a href=”http://vimeo.com/user3926076/videos”><img src=”icons/vimeo32x32.png” alt=”vimeo” width=”32″ height=”32″/></a>
        <a href=”http://www.spencerdixon.wordpress.com”><img src=”icons/wordpress32x32.png” alt=”wordpress” width=”32″ height=”32″/></a>
        <a href=”http://www.soundcloud.com/spencerdixon”><img src=”icons/soundcloud.png” alt=”soundcloud” width=”32″ height=”32″/></a>
    </footer>
</body>

</html>

As you can see, I’ve not included a single class or ID element bar a couple of images that I want to position on the page independent of everything else.

In summary, we’ve seen the logical structure that we desperately needed in CSS2 implemented in CSS3, resulting in much more efficient and shorter coding.

Time for me to finish off my CSS then. Tomorrow we’ll look at how we can replace the old hacks of HTML4 and CSS2 with the new native features of HTML5 and CSS3. We’ll also check out some advanced stylings in CSS3 that we can use to achieve that web 2.0 look natively without resorting to hours of messing around in Photoshop or Fireworks.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s