Learning xHTML and CSS – day 22 of 30
A brief introduction to two CSS3 properties
These days CSS3 is everywhere. What is CSS3? Well, everything we’ve been working with thus far has been xHTML (or HTML 4) and CSS2. With today’s rapid technological advancement, a wide variety of features and designs are easily integrated using simple CSS3 style definitions. So how do we do it? Continue reading to find out.
CSS3 basic information
Well, because CSS3 is so new, it’s only currently supported by the most modern browsers. All WebKit engine-based browsers (such as Google Chrome and Safari) support CSS3. In addition, Firefox 3.6+ and Opera also support CSS3. Well, that leaves one brand that doesn’t. Yup. IE. Internet Explorer (6,7, and even 8) do not support CSS3. So if your site contains a lot of CSS3 styles, plan on it looking very basic under Internet Explorer.
CSS3 property #1: Rounded Corners
Suppose you have a div and you wanted to give it rounded corners. How would you accomplish it? Using CSS2, you’d have to design the rounded corners in Photoshop or what-have-you, then use the background property to correctly set it. CSS3 is much much easier. All you do in CSS3 is the following:
div {
border: solid 1px black; /* required for fallback if CSS3 is not supported */
-moz-border-radius: 10px; /* deals with Mozilla-based browsers (Firefox) */
-webkit-border-radius: 10px; /* deals with WebKit-engine browsers */
border-radius: 10px; /* required but doesn't do anything...yet */
}
So let’s apply these styles to one of our MAIN CONTENT div:
This is our xHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My first website</title> <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="pagewrap"> <div id="header"> <h1>My first website!</h1> </div> <div id="content"> <ul id="nav"> <li><a href="index.html">home</a></li> <li><a href="about.html">about me</a></li> <li><a href="contact.html">contact me</a></li> </ul> </div> <div id="main"> MAIN CONTENT DIV </div> <div id="footer"> <p>This is our footer section</p> </div> </div> </body> </html>
And this is our CSS
body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 20px; }
#footer { height: 20px; border-top: dotted 1px black; }
/* NEW STYLES FOR NAVIGATION */
#nav li {
list-style-type: none;
float: left;
margin-left: 10px;
}
#nav li a {
padding: 2px 10px;
border: solid 1px black;
}
#nav li a:hover {
background-color: orange;
}
/* NEW STYLES for absolute positioning */
#main { height: 200px; width: 200px; margin: 15px; line-height: 200px; text-align: center; background: #cccccc; }
/* NEW CSS3 PROPERTIES */
#main,#nav li a {
border: solid 1px black;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
And finally, this is our result
Now you can change the border-radius and make it so large that the MAIN CONTENT div becomes a circle. Let’s do that now, make the border-radius 300 pixels.
New CSS3 definitions
#main,#nav li a {
border: solid 1px black;
border-radius: 300px;
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
}
And the new result is:
That’s it for today. Tomorrow we’ll discuss one more CSS3 property called box shadow and text-shadow. By the sound of it, you can probably imagine what they do.
Summary
Today we introduced CSS3. If it’s not obvious to you yet, CSS3 contains an unbelievable deal of style definitions that can significantly ease on your daily tasks. The only drawback is that CSS3 is only supported by the most modern browsers, excluding IE. So keep in mind that if you use a lot of CSS3 and find out that a significant percentage of your audience use IE, I would recommend falling back to CSS2 and instead using old-fashioned shadow backgrounds, rounded corner pictures, etc. etc.
Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription in the sidebar on the right). Also, feel free to contact me with any questions, or use my contact form to send me any private comments, suggestions, price quotes, job offers, feedback or just a plain “hi!”. Finally, make sure to check out my portfolio to see my latest work.
Tags: course, css, free course, html, Stylesheets, tutorial, XHTML