Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

CSS3 support

From: Dreamweaver CS5.5 New Features

Video: CSS3 support

In addition to HTML 5, Dreamweaver offers robust support for CSS3. In CS5.5, Dreamweaver upgraded the CSS Styles panel to complement the CSS3 support that it had already been added earlier to the 11_03 update. Let's take a closer look at how Dreamweaver can help you add CSS3 to your sites. So, I have the mission.htm in the 02_04 folder open, and the first thing I want to do is I am just going to turn Live view on so that I can preview my page and discuss a couple of the changes that I wan to make. So, if I scroll down, I can see that I have these callOut boxes on left-hand side and they are pretty bland.

CSS3 support

In addition to HTML 5, Dreamweaver offers robust support for CSS3. In CS5.5, Dreamweaver upgraded the CSS Styles panel to complement the CSS3 support that it had already been added earlier to the 11_03 update. Let's take a closer look at how Dreamweaver can help you add CSS3 to your sites. So, I have the mission.htm in the 02_04 folder open, and the first thing I want to do is I am just going to turn Live view on so that I can preview my page and discuss a couple of the changes that I wan to make. So, if I scroll down, I can see that I have these callOut boxes on left-hand side and they are pretty bland.

So, what I would like to do is just round just this corner to add a little bit of flair to these boxes. And if I look at the text over here on the right-hand side, I can see it's really wide, so I wouldn't mind splitting that into multiple columns to make it a little bit easier to read. So, I am going to turn Live view off, and the first thing I want to do is show off some of the changes that they have made to the CSS Styles panels. So, I am going to go over to the CSS Styles panel. I want to make sure that I am looking at the All view. If you go to the main.css, kind of scroll down a little bit, you will find this callOut class, so I want to make sure that that's highlighted, callOut, because that of course is the rule that's driving the callOut boxes.

Now, I want to make sure also that in my Property views, I am looking at the Category view, So we have these three icons right down here at the bottom of the CSS Styles panel. They show only the set properties. We have a List view, and then we have a Category view. Now the reason that I want to use the Category view is because we are going to be setting the Border Radius property. Now, one of the things that we have to deal with when writing CSS3 is dealing with these vendor-specific properties that are sometimes needed. So, basically, when a browser manufacturer decides to support a CSS3 property, they might initially use a vendor prefix.

The vendor prefix helps them keep their syntax clean so that you can use this experimental implementation, and then once the specification has been finalized and the implementation has been finalized, you can just sort of remove the vendor prefix. One of the nice things that Dreamweaver has done for us is it went ahead and categorized all those vendor prefixes, so it's really easy for us to find when maybe one of these prefixes is needed. So, if I go down to Mozilla and I expand this, I can scroll down a little bit and I can see right here that we have moz-border-radius and we have bottom-left, bottom-right, top-left, and top-right. Perfect! Well, the moz-border-radius property is a shorthand notation, and you can see that just beside that, we have this little Plus symbol.

Basically, what that means is that if you see this, you can click and you will get a dialog box that comes up that allows you to go ahead and enter all of those shorthand properties at once. Now, I only want to round one corner, so I don't really need a shorthand notation. So, I want to go back into this, find bottom-right, and type in 20 pixels, so 20 PX, hit Enter or Return, and there we go. Now the next thing I wanted to know is what other vendor specific properties might I need to use. So, if I scroll up and close the Mozilla category--now if this happens to you, don't freak out.

I am using pre-release software and sometimes in pre-release software, interfaces aren't quite finalized. So I can see some categories have just sort of disappeared. It's okay. They are not gone. All I have to do is click on them and they will come right back up. So no worries if that happens to you. I am going to go ahead and open up Microsoft, and I don't see anything there about border radius, so nothing there. And if I go into Opera's and open that up, again I don't see anything there. But I go to all the way to Webkit and scroll down, I can see that it does have border radius.

And what I'm looking for again is the webkit-border-bottom-right, so the syntax is not always the same from vendor prefix to vendor prefix. And I am just going to type in 20 pixels. Now, in addition to the vendor- specific properties, most of the time you'll just have the default specification implementation. And what's interesting is you will notice I went ahead and did the vendor- specific properties first. Well, the most recent versions of Firefox and the Webkit-based browsers Chrome or Safari don't really need the vendor prefixes; they now support the default implementation.

So why did we go ahead and do them? Well, we did them just in case somebody is using one of the older browsers that still needs it. You also notice that we did them first. In this case, the older browsers would take the first value since they don't support the default implementation, whereas the later browsers would go ahead and go all the way down through the cascade to the proper that we are about to set. So, I am going to scroll back up and find Border, open this up, and as I scroll down, I am looking for border radius, so I can find border-bottom-radius. Type in 20 pixels.

And I am going to turn Live view on, scroll back down, and there we go. There is our rounded bottom right-hand corner, which makes those a little bit more visually appealing. Now, in addition to all the changes to the CSS Styles panel that we have been talking about, Dreamweaver has also added code hinting support for CSS 3 as well. Now, it added this back in the HTML 5 pack update, which later on was released again as 11_03 update, but in CS5.5, it's the first release where CSS3 code hinting support was baked into the initial install.

So, let's go ahead and take a look at that. Now, I what I want to do, again, is I want to separate this column into multiple columns. So, what I am going to do is use my Code Navigator to help me find a rule that's going to allow me do this. So, on the PC, I am going to hold the Alt key down and click on this, and on the Mac I need to hold Command+Option down and then click. My Code Navigator comes up, and the rule that I am looking for is mainContent, mainArticle, multipleColumn, so that's the rule that's going to help me split this text into multiple columns.

So, I am going to go ahead and click on that, and that should open up my page in a split screen view, and it should take me right to line 400. Now, if you don't want to do that, just switch over to your main.css in Code view and find, on line 400, this selector. So, I am going to place my selector inside the curly braces, and again, I want to start out by using these vendor-specific properties. So, if I type in a dash, notice that code hinting support gives me Mozilla, Microsoft, Opera, and Webkit. I am just going to start with Mozilla. And if a hit Enter again, by the way, I can now get all of the different vendor- specific properties for Mozilla. So I am going to type in col to find column count, and now it will finishes that out for me, so moz-column-count, and I want two columns.

Now, if I go down to the next line, what I want to do now is I want to specify the gutter, or the gap between those columns. So, I am just going to do that again. I will type in an m, go down to Mozilla, and then type in a c, and I want to find column-gap from my list and hit Return, and it will go ahead and finish that for me. And I want to do 25 pixels there. Now, once again, I am going to follow this up with Webkit. So, I will type in a dash and a w, it will go down to webkit for me, and in webkit, I am going to type in a c. It goes down to columns.

And you will notice there are slightly different options. Webkit has more options involving multiple columns than Mozilla does at the moment. So, I am going to go down to webkit-column-count and again, we want two. We need to specify the gap here as well, so I am going to do webkit-column-gap. And you will notice that I'm just using my arrow keys to scroll down through the list, but you can certainly just continue to type if you wanted to. And we will do 25 pixels. Now, we are just going to follow that up with the default implementation. So, I am just going to type in column-count:2 and then column-gap:25px.

I will go ahead and save that, click back over on Design view, and if you Live view turned on, you will see what I see, which is multiple columns now for our text. Now, that's really cool, but one of the things we need to realize is that the CSS3 support hasn't made it to every single dialog box yet. If I go back over here to CSS Styles panel and scroll down in to my classes and find that callOut class, if I double-click this, you can see I don't really have any categories over here for the vendor- specific properties, and I if I click on Border, there is no hint of border radius in this dialog box.

So, while support has been added to the majority of the Dreamweaver interface, it's not everywhere yet, so you need to make sure that you're familiar with the properties that you are looking for. Don't just assume because it's not in a dialog box that it doesn't exist. That being said, however, the addition of CSS3 support and improvements that they've made to the CSS Styles panel really do make it easier than ever to create standards-compliant sites in Dreamweaver. Although changes aren't really fully integrated yet all the way into the interface, it's nice that we can start taking advantage of the CSS3 support in Dreamweaver right now.

Show transcript

This video is part of

Image for Dreamweaver CS5.5 New Features
Dreamweaver CS5.5 New Features

18 video lessons · 12781 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS5.5 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.