Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Using CSS3

  • CSS3 is the up and coming version of CSS that adds interesting properties that have not been available in the past
  • The standard for CSS3 is quite a ways out in terms of an official standard from the W3C, the standards setting organization for the web
  • CSS3 offers interesting effects such as drop shadows, gradients, rounded corners, column layouts, multiple backgrounds, transitions, RGBA or HSBA colors, to name a few
  • Some of these properties are being used in our Wanderlust Travel website design
  • CSS3 is not fully supported in all browsers so you must always test in your target browsers to be sure that your page will degrade gracefully, but that should be done for whatever you use on your pages anyway
  • Some of these properties degrade gracefully in older browsers so they can be used immediately
  • Other CSS3 properties need what is known as proprietary prefixes in order to work in certain browsers
  • An example of a proprietary prefix is –webkit or –moz or –o or –ms
  • Some CSS3 properties require the proprietary code for now in order to work in that specific browser, but once CSS3 is better supported and more of a standard, you will not need to add the proprietary code
  • In this course I am focusing on features of CSS3 that we can use today on our sites

Using CSS3

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Preview CSS3 Element in Browser 0:48
  • Proprietary CSS3 Properties 2:51
  • Summary 6:00

Transcription: Using CSS3

We are now going to take a look at some fun features that are available to you: they are actually CSS3 properties, not CSS2, which is the present standard.0000

Now, just like HTML5, there are a few things in CSS3 that are available right now, that you can use in your browser; and I have a page to help demonstrate that.0012

In your Files panel for this chapter, you will find proprietary CSS; now, in case you don't have this file, you may not be in the present Lesson Files.0025

You will want to go out to the Exercise Files tab and make sure you download the files for this lesson: we do have some different files available.0037

Here is a box of content; and what I am going to do is put this content into various browsers.0048

I am going to preview it in Chrome; and you can see, it looks a little bit different than it does in Dreamweaver; so that is Google Chrome.0056

And you can see, it is shrinking and expanding, depending upon the browser size, also.0067

Now, let me go out to Firefox, and we'll open up Firefox here; and you can see, it gets this nice, rounded corner look; it has the same drop shadow and gradient that Google Chrome has; so there is Firefox.0073

You can see, it operates just like Google Chrome did.0093

I'll close that up; now, I'm going to go out to Safari, and let's take a look at...this is the most up-to-date version for Windows of Safari.0097

It operates just like Google Chrome.0109

Let's take a look at this in I.E. 8; now, I purposely have a very old version of Internet Explorer on my system, so I can show you an older browser--just so you believe me that browsers do change.0112

Now, notice: it does adjust its sizing without an issue; it does have a drop shadow; what is missing are the nice, rounded corners and also the gradient piece--those two are not working in this old version of Internet Explorer.0128

Just be aware: you have to be testing in Internet Explorer as you are creating your websites.0146

Otherwise, you get to the end, it has looked fine in Safari, Chrome, Firefox--even Opera if you download that one--but all of a sudden, you look at it in Internet Explorer, and you have a lot of problems to correct.0153

So, make sure you are previewing this as you go forward.0168

What are the properties that we are using in order to do all of this within CSS3?0171

I'll go ahead and close my Files panel.0179

It is all happening in this ID called css3props: I have a single ID on the page with a single div, but look at all of the properties that have been assigned (let me move this out a little bit).0183

You can see, I have this -moz; I have -webkit--a couple of features available within here.0198

I also have some interesting ones with these little +'s and the little diagonal, almost triangle-looking things; those are the new CSS3 properties.0207

These four up at the top are known as proprietary CSS properties; in other words, -moz- is added in front of the regular border radius property.0221

Notice, right here it says border-radius; up here, this is the border radius properties so that this will work in Firefox.0235

Right here, these are the border radius properties; and it's proprietary with that added in front of it; the properties, or the values themselves, are identical.0246

We just take the property and add the proprietary option; so -moz- is for Firefox; -webkit- is for Chrome and Safari; so, just be aware that webkit and moz are available--those are just a couple of the proprietary options you will see.0257

There is a -ms- for Microsoft; there is also a -o- for Opera.0279

What is happening is: we need those still, in order for these properties to work in the browser.0287

Eventually, we will only need to list the main property of border radius; but until that time, I need to add these proprietary values, as well.0296

Just be aware, if you see those -something-, it is based on a particular browser, and we need to support that; but always test your properties without the proprietary option before you decide you need them.0310

Browsers are drastically changing, and literally between two weeks, I'll do it and test in the browsers one week--two weeks later, I will test it, and I no longer need the proprietary in one of the browsers.0327

So, this is where the testing is going to come in; notice, we have -moz-box-shadow; I also have a plain box-shadow; so this is the main one that I will always list, and then I add the proprietary ones as needed at the time.0342

That is proprietary CSS, and it's a way you can specify some of these CSS3 properties that aren't supported using the standard property, but if you add the proprietary values, you can get them supported in your web pages.0360

That was a quick look at the CSS proprietary prefixes for some of the new CSS3 properties; CSS3 is not going to be a standard for a long time, so these proprietary properties may be with us for quite some time.0379

But continue to test your browsers and double-check if they are really needed.0397

If they are, you will need to add them in your code if you want those properties to work within that browser.0402

That is adding proprietary CSS3 code, and we took a look at a couple of those--the Mozilla Firefox version, and also the Safari and Chrome versions--for specific CSS3 properties.0410