Updated 5/3/202

CSS3

Introduction

Internet Explorer 9+, Chrome 17+, and Firefox 4+ support CSS3. It is time to see how CSS3 works.

CSS3 Introduction

CSS3 has some interesting new features. Some of them are:

New Pseudo-Class Selectors

There are more pseudo-class selectors than just the ones that we will look at in the "Links" handout in a few weeks. (The ones specfically related to links are :link, :visited, :active, and :hover.)

The pseudo-class selectors which are new to CSS3 are:

The CSS Selectors reference page at W3Schools.com is a good place to find the details.

Further References

CSS3.Info site

CSS3.Com site

You can find some very nice free HTML5/CSS3 templates at http://www.zerotheme.com/1829/zrealestate-free-responsive-html5-template.html and other sites. Just do a Web search.

CSS3 Example

The following example will work properly only in Internet Explorer 9+, Chrome 17+, and Firefox 4+. You can see the example page running in your browser here... but you might need to upgrade your browser before you look at it!

This is page CSS3example.html: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3 Example</title>
  <link rel="stylesheet" type="text/css" href="CSS3style3.css" media="screen">
</head>

<body>

<div id="content">
  <header>
     <h2>CSS3 Example</h2>
  </header>
  <article>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
     <aside class="LayeredEffect">
       HTML5 and CSS3 are the future of Web pages.
     </aside>
  </article>
  <footer>
    <p>&copy; Copyright 2014 by John Doe.</p>
  </footer>
</div>

</body>
</html>

This is page CSS3style3.css: 

body {
  font-family: Arial, sans-serif;
  font-size: 1.2em;
}

h2 {
  text-shadow: 5px 5px 5px #AAA;
}

#content {
  width: 600px;
  margin: 0 auto;
  border: 1px solid gray;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 10px 10px 10px gray;
}

article {
  border: 1px solid gray;
  border-radius: 10px;
  margin: 15px 0;
  position: relative;
  padding: 15px;
}

header, footer {
  border: 1px solid blue;
  border-radius: 10px;
  background-color: #AAF;
  padding: 10px;
}

footer {
  font-size: 0.8em;
}

aside {
  padding: 10px;
  background-color: #AFA;
  border: 1px solid green;
  position: absolute;
  right: 15px;
  top: 15px;
  width: 200px;
  font-size: 1.6rem;
}

.LayeredEffect {
  border-radius: 10px;
  box-shadow: 7px 7px 7px gray;
}

#disclaimer {
  color: #00F;
}

#examples {
  color: #0B0;
}

#closing_notes {
  color: #F00;
  text-transform: uppercase;
}

Please note these points about the above example:

Reading UPPERCASE TEXT

Please note this important information about reading UPPERCASE TEXT:

UPPERCASE TEXT is harder for experienced readers to read. You can use UPPERCASE TEXT for short segments of text, such as for headings or menu items, but NOT for meaningful text content. If you use UPPERCASE TEXT for meaningful text content, you remove important clues that your readers rely upon to read effectively.

If you doubt how much experienced readers rely upon these clues, you might want to look at these interesting sites:

dummies: "Recognizing the Shapes of Words"

Wikipedia: "Word recognition"

You should note that we do, indeed, read UPPERCASE TEXT more slowly, but not for the reasons that most people say. Here is a brief excerpt from another article:

So, Is All Caps Harder to Read Then? We do actually read uppercase letters more slowly, but only because we don’t see them as often. Most of what we read is in mixed case, so we’re used to it. If you practice reading text in all capital letters you’ll eventually read that text as fast as you read mixed case. This doesn’t mean you should start using capital letters for all your text. Since peole are unused to reading that way, it will slow them down. And these days, text in all caps is perceived as "shouting".