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

Styling with CSS

From: Creating a First Web Site with Dreamweaver CS4

Video: Styling with CSS

Up until now, we've been applying some basic styles to this webpage such as the background, the different link colors, as I rollover them you can see a change to that orange, and then even some text styles, but it's been pretty limiting so far. But what I want to do is go beyond the Page Properties panel, beyond some of these somewhat limiting options. For instance, I can apply a color to the background. I can apply an image to the background.

Styling with CSS

Up until now, we've been applying some basic styles to this webpage such as the background, the different link colors, as I rollover them you can see a change to that orange, and then even some text styles, but it's been pretty limiting so far. But what I want to do is go beyond the Page Properties panel, beyond some of these somewhat limiting options. For instance, I can apply a color to the background. I can apply an image to the background.

I can say repeat it for instance, and that is does the background tile if you will. So, I can control sort of its tiling. But that's about it and what I want to do is I want to go beyond this and in order to go beyond the Page Properties panel, I want to use CSS Styles and more specifically, the CSS Styles panel. So, if you don't have it open, it's under Window > CSS Styles and right here in my CSS Styles panel, you'll see all of these styles that are currently in this document.

In fact these were all applied using the Page Properties panel. But again, I want to go beyond say for instance, the typical sort of body background image. So I'm going to select body, double- click on that and sort of the background for this image, I'm going to select the category being background and sure enough as you can tell, there are not only my two options from the Page Properties panel, but there is additional options as well. So this is great, give me more control over the appearance of my webpage.

In fact, again, whether I want the background to repeat or not, I can apply that here and by default it will repeat, and also by default the image will always start in the upper left-hand corner regardless of the size of your browser. What I want to do is I want to change the background and I want the background to be fixed. And what that means is the background, if I have content on that page and I scroll that content, the background will stay fixed, obviously in the background and the text will scroll.

So, it creates this nice, sort of depth look. Another thing I want to do is to change the background X position, so it's positioned from left to right where it appears. And I'm going to go ahead and center the image. In fact, if I click Apply you can see that it centers the image. I also want to adjust its Y position, so it's vertical position and I'm going to change that to Top, I'm going to click Apply. And now you can see the image is always going to start at the top here, and sort of develop on the way down.

But it's always going to be centered. So it's going to create this sort of nice look, I'm always going to have this image centered, starting at the top and it's always going to be fixed. In fact, let's go ahead and select OK, and I'm going to save this document and I'm going to go ahead and preview it in a browser. So again, if I scale this, we can see the background moves. Again that nice sort of depth look which works out great and the background is centered, but if I need to scroll the content, the background stays fixed, but the content scrolls.

So again, this nice and depth look that can really only be done through the CSS Styles panel and not through the Page Properties. So again, I'll close that browser, go back here into Dreamweaver and let's extend that to other things, such as my link color. If I double-click on link, I can change my link color to say for instance, a gold and I can even more move the text-decoration. Text-decoration in this case is this underline, so if I select none and click Apply, it changes the color and removes that Text-decoration. We will select OK.

So, it's looking better but I want to even again go beyond what Page Properties allows me to do. Say for instance, hover, if I double- click on that, I can change this CSS Rule definition and again, I can change the color and what I want to do now is access some of these other categories for this hover. For instance the background, I want to change the background of that link to black on hover. So, when you rollover any link, the background is going to turn black and again the Type > Color is going to turn white, and I'm going to make sure it doesn't have any Text-decoration.

So, I'm going to select none there. Select OK, the active color, I can leave as red. The visited, I can change that as well, I'll change this Text-decoration to none, and click Apply, but again, full control with what I want to do with this particular item. All right, so that's looking pretty darn good. In fact, let's go to File, let's go ahead and save this document, and let's preview it in a browser again.

Here we are, my background is looking good, my links, as I rollover them, I can see that it changes the text to white, and the background changes to black. Wherever there is a link it's going to act that way. But again, customizing this design towards sort of your taste or the goals and objectives of your site is really what we are after here. In fact, just so you know what's going on behind to the scenes, I can check out the CSS Styles in my document.

So I can go ahead and do a right-click or Ctrl- click if you are on a Mac, and I can Go to Code. So, if I Go to Code, it jumps directly to that Code and it gives me my color for the visited links. In fact, the body, I can Go to Code for the body background and again, since there is a background image you'll never really see this background color. So, if I feel comfortable, I can go ahead and delete that right in here in my Code view, if I want to.

And if I modify anything in Code view, I might need to refresh this CSS Styles panel. Sure enough, it's removed from the properties of that body tag. Let me go back to Design view. In general you can see how we can go beyond what's in Page Properties using the CSS Styles panel. It has really given us more control and more flexibility with our design.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS4
Creating a First Web Site with Dreamweaver CS4

32 video lessons · 51513 viewers

Paul Trani
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 Creating a First Web Site with Dreamweaver CS4.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.