Updated 6/14/2014 at 8:00pm

CSS3


Introduction

Internet Explorer 9+, Chrome 17+, Firefox 4+, Safari 5+, and Opera 11+ support CSS3 and HTML5. Make sure you are using a current version of your browser before you try the CSS3 examples described in this handout.


CSS3 Introduction

CSS3 is the most-recently published version of the CSS selectors and properties that you can use in your stylesheets.

CSS3 has some interesting new features. Some of them are listed below.

The new CSS3 style properties that you will probably use most often are these:

The other new CSS3 style properties are these:


Further References

CSS3.Info site

W3C CSS3 Intro

CSS3.Com site


HTML5 and CSS3 Example

The following example will work properly only in Internet Explorer 9+ and Firefox 4+. You can see the example pages running in your browser here... but you might want to upgrade to IE9+ or FF4+ before you look at them!

These example pages are modified versions of a template that I found at http://freehtml5templates.com/template-portfolio/. This template is called "turquoiseswirls".

Please note, in particular:

This is page HTML5andCSS3example.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML5 and CSS3 Example</title>
  <link rel="stylesheet" type="text/css" href="CSS3style.css" media="screen" />
  <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>

<div id="wrapper">

  <header>
    <h1 id="sitename"><a href="#">HTML5 and CSS3 Sample</a></h1>
    <div id="description">Going Where No Designer Has Gone Before</div>
    <div id="top">
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Support</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section>

    <div id="container">
      <div id="content">

    <article>
      <h2><a href="#" rel="bookmark">An Awesome Article</a></h2>
      <div class="entry">
        <p>
        Lorem ipsum pri at agam postulant. Vis option euismod ut, mucius nominavi noluisse vim in, his 
        ne mediocrem qualisque necessitatibus. Has at ubique utroque molestie, <a href="#">vim ne 
        ceteros ponderum</a> hendrerit. No everti singulis disputationi eam, minim iusto cu usu, 
        sint nulla harum duo ei. Ut vidit cotidieque ullamcorper mea, dolorem oportere vulputate ea mei, 
        eu ius error perpetua theophrastus.
        </p>
        <p>
        Quis quaerendum pri no, sit ad noster timeam. An pro consul concludaturque, no possim impetus 
        mei. Facer oblique referrentur te qui, ornatus postulant evertitur ius ea. No sed vero aperiri 
        equidem, pri et perpetua erroribus accusamus, doctus menandri ad qui. Natum dicunt delenit te 
        vim, has te decore deseruisse. Quot malorum legendos ut est, urbanitas interpretaris id qui, 
        duo populo animal conclusionemque ne.
        </p>
        <p>
      Iriure postulant pro ad. Wisi delectus legendos an duo, alia utroque recteque no mel, te sed 
      porro alienum. Vix tale suavitate incorrupte at, viris tractatos incorrupte pri ad. Veri putant 
      volutpat his ad, no doming deserunt persecuti eum, ad nobis essent sed. Ad vis mandamus expetenda, 
      salutandi iracundia repudiandae mei ei. Alii pericula abhorreant mei an, vix dignissim consequuntur 
      ex, alienum invenire posidonium nam ei.
        </p>
        <blockquote>
      Minim elitr congue eu mea, quo minimum verterem gloriatur in, ex alia cotidieque complectitur 
      qui. Eu sit idque quodsi constituto, ex mea omnesque adolescens. Sit id fabulas eligendi 
      suscipiantur, eu natum perfecto sit, at brute option lucilius mea. Te malis disputationi has, 
      ex eum habeo sententiae. An est meliore denique voluptatibus, nam putent voluptua inciderint 
      in, ne simul graeci nonummy vel.
        </blockquote>
        <p>
      Quod malorum delectus ne duo, an pri facer doming quaeque, ancillae omnesque his ei. At sed 
      nibh illum placerat. At quod appareat reprehendunt vim, te pri velit nonumy antiopam. Exerci 
      placerat est no, cu quo affert vidisse democritum. Debitis maiestatis referrentur qui ad. 
      Sonet praesent intellegebat mei ex, duo meis epicurei cu. Idque volutpat sadipscing ut est, 
      eos eu alienum oportere, eum ea dicat ignota persequeris.
        </p>
        <p>
      Veritus menandri referrentur est cu. Eos ea mazim elaboraret delicatissimi, puto nostrud 
      platonem vis an. Mea eirmod torquatos et, ad sonet minimum mea, mei eu causae eruditi 
      intellegat. Velit vitae ridens et vel, commodo suscipit persequeris sea id, iudico persius 
      eruditi in vel. Magna eloquentiam mei et, quo erat vituperatoribus ea, in sale audiam quo. 
      Ad eum illum tantas volumus, iriure feugiat recteque ei est.
        </p>
      </div>
    </article>
    
      </div><!-- #content-->
    </div><!-- #container-->

    <aside id="left"><!-- start left sidebar -->
      <div class="box">
        <h3>Main Menu</h3>
        <div class="inner">
          <ul>
            <li><a href="#">Products</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Popular Uses</a></li>
          </ul>
        </div>
      </div><!-- .box -->

    </aside><!-- end left sidebar -->

    <aside id="right"><!-- start right sidebar -->  

      <div class="box">
        <h3>Connect With Us</h3>
        <div class="inner">
          <ul>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
          </ul>
        </div>
      </div><!-- .box -->

      <div class="box">
        <h3>Recent Articles</h3>
        <div class="inner">
          <ul>
            <li><a href="#">How To Clean Anything</a></li>
            <li><a href="#">Get The Most Out of Widgets</a></li>
          </ul>
        </div>
      </div><!-- .box -->
      
    </aside><!-- end right sidebar -->    
  
  </section>

  <footer>
    <div id="copyright">
      <span>&copy; 2011 All rights reserved <a href="#">yoursite.com</a></span>
    </div>
  </footer>

</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>

This is page CSS3style.css:

/* Created by http://freehtml5templates.com */

* {margin: 0; padding: 0;}
header, nav, section, article, aside, footer {display: block;}
body {
  font: 16px/18px Arial, Tahoma, sans-serif;
  color: #555;
  width: 960px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

a {
  color: #333;
  outline: none;
}

a:hover { color: #009296;}

p {margin: 0 0 18px;}

img {border: none;}

blockquote {
  margin: 0 20px 18px 20px;
  padding: 1px 12px;
  background: #F2F2F2;
  border-left: 3px solid #009296;
  border-right: 3px solid #009296;
}

blockquote p {
  padding: 8px 0;
  margin: 0;
}

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {float: left;}

img.alignleft {margin: 5px 5px 5px 0;}

.alignright {float: right;}

img.alignright {margin: 5px 0 5px 5px;}

#wrapper {
  width: 960px;
  text-align:left;
}

img.framed {
  background:white;
  padding:4px;
  border:1px solid black;
}

/* Header
-----------------------------------------------------------------------------*/

header {
  height: 200px;
  position: relative;
  background: url(images/roundedheader.png);
  margin-top: 10px;
}

#sitename a {
  position: absolute;
  top: 30px;
  left: 10px;
  font: 40px/1 Georgia, "Times New Roman", Times;
  color: #009296;
  text-shadow: 2px 2px 2px #000;
  text-decoration: none;
}

#description {
  position: absolute;
  top: 80px;
  left: 15px;
  width: 600px;
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  color: #333;
}

header nav {
  position: absolute;
  top: 174px;
  width: 915px;
  left: 25px;
  height: 26px;
  font: 14px/1 Tahoma, Arial;
  text-transform: uppercase;
  overflow: hidden;
}

header nav li {
  float: left;
  list-style: none;
  background: #FFF;
  margin: 2px;
  border: 2px solid #009296;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

header nav a {
  float: left;
  color: #333;
  text-decoration: none;
  padding: 7px 10px 6px;
  border-bottom: 3px solid #F0EFEF;
}

/* Middle
-----------------------------------------------------------------------------*/

section {
  width: 946px;
  margin-top: 5px;
  border-radius: 5px; 
  border: 1px solid #AEB0AD; 
  padding: 5px;
  background-color: #F2F2F2;
}

section:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

#container {
  width: 100%;
  float: left;
  overflow: hidden;
}

#content {
  margin: 0 199px;
  padding: 15px 15px 1px;
  border-radius: 5px; 
  border: 1px solid #AEB0AD;
  height: 1%;
  background-color: #FFF;
}

#content h2 {
  font: 24px/1 Arial, Tahoma;
  margin: 0 0 18px;
  color: #333;
}

#content h2 a {
  color: #333;
  text-decoration: none;
  text-shadow: 2px 1px 2px #CCC;
}

#content h2 a:hover {
  color: #009296;
  text-decoration: underline;
  text-shadow: none;
}

#content .entry h2,
#content .entry h3,
#content .entry h4,
#content .entry h5,
#content .entry h6 {
  font: 24px/1 Arial, Tahoma;
  margin: 25px 0 18px;
  color: #333;
  text-shadow: 2px 1px 2px #CCC;
}

#content .entry h3 {font-size: 22px;}

#content .entry h4 {font-size: 20px;}

#content .entry h5 {font-size: 18px;}

#content .entry h6 {font-size: 16px;}

#content h3 {
  color: #333;
  font-size: 22px;
  font-weight: normal;
  line-height: 1;
  text-shadow: 2px 1px 2px #CCC;
  margin: 0 0 28px;
}

/* Sidebars
-----------------------------------------------------------------------------*/

aside {
  float: left;
  width: 199px;
  position: relative;
  font-size: 14px;
}

#left {
  margin-left: -100%;
}

#right {
  margin-left: -200px;
}

aside h3 {
  line-height: 35px;
  color: #009296;
  font-size: 14px;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #DDD;
  height: 35px;
  padding-left: 10px;
}

aside#right h3 {
  color: #009296;
}

aside ul {list-style-position: inside;
list-style-image: url(images/redarrow.gif);}

aside li {
  color: #696969;
  padding: 4px 6px 5px 5px;
}

aside a {
  color: #6E7761;
  text-decoration: none;
}

.box {
  padding: 0 0 5px;
}

.inner {
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #009296; 
  padding: 5px;
   margin-top: -7px;
   margin-bottom: 10px;
  box-shadow: 6px 6px 4px #888888;
}


/* Footer
-----------------------------------------------------------------------------*/

footer {
  background: #F2F2F2;
  font-size: 11px;
  border-radius: 5px; 
  border: 1px solid #AEB0AD; 
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#copyright {
  font: 10px/16px Tahoma, Arial;
  text-align: right;
  color: #333;
  padding: 22px 10px 0 0;
}

#copyright span {
  display: block;
  text-transform: uppercase;
}

#copyright a {
  color: #6E7761;
  text-decoration: none;
}

#copyright a:hover { color: #009296;}