Video: Setting CSS preferences

As you begin to work with more and more sites, you will find that you have a specific way that you want your styles to be presented and formatted. If you are like me, those preferences might change over time as you get more comfortable with doing things by hand. Fortunately, Dreamweaver has multiple preferences that allow customization of exactly how your styles are created, presented, and formatted. Let's take a moment to go over these preferences and customize how Dreamweaver goes about creating your CSS. So I have the main.css file opened, and if I just scroll down, I can see that there are a lot of styles in this document.

In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.

Setting CSS preferences

As you begin to work with more and more sites, you will find that you have aspecific way that you want your styles to be presented and formatted.If you are like me, those preferences might change over time as you get morecomfortable with doing things by hand.Fortunately, Dreamweaver has multiple preferences that allow customization ofexactly how your styles are created, presented, and formatted.Let's take a moment to go over these preferences and customize how Dreamweavergoes about creating your CSS.So I have the main.css file opened, and if I just scroll down, I can see thatthere are a lot of styles in this document.

Hundreds and hundreds of lines of them actually, and these are the styles thatare driving our Explore California site.Now before we get into creating these styles, I think it's useful to take alook at some of the preferences that govern how these styles are displayed in our Code view.So I am going to go out to my Preferences.Again, you can go to Edit > Preference on the PC, Dreamweaver > Preferences on theMac, and the first preference I want to go to is Code Coloring.Now some people complain about the magenta, and I think it's a little hard to see.Well, you can change that if you like.So if I go to Code Coloring, I can select the CSS Document type, and click onthe Edit Coloring Scheme.

We have a little preview down here that shows you any changes that you makeand what they are going to look like within your structure, but you can comeright down here and choose CSS Selector, for example, and you can change the color of that.So maybe you might want to make them red, for example.Now just be consistent with that because if you using red for Selector, and afriend of yours is using green for Selector, it's going to be really different.Also, recognize that some colors are pretty common.For example, green is typically used to denote literal strings like you see here.So changing that to something else might actually throw somebody that's used toseeing in the green.

So just be sure that what you change is going to be consistent for you and anyteam that you are on.I am going to switch that back to magenta.I actually don't mind it, to be honest with you.Now there is another setting that you can change as well.If I go into the Code Format preference, and for the Advanced Formatting chooseCSS, I can choose exactly how my CSS is formatted.Right now, each property is on a separate line.That makes it extremely easy to read, and as you are writing your CSS codefor the first time,I really recommend that.

However, it also takes up more lines of code.So if you turn that off later on, you can shorten the lines of code that yourCSS is taking up, and that might actually make it a little bit easier to deploy.So that's usually something I change once I am ready to go ahead and makethis code live online.I am going to go and click OK here.Now there are a couple of other preferences that you can change, but I want toshow you why you might want to change those preferences.So I am just going to go ahead and click OK, and I am going to write a rule foryou that shows off what I was talking about.Oh - they changed to red anyway. Well that's okay.

Again, it's so easy to change that preference.I can go and change it in just a little bit.Okay, so, just anywhere on here, I am going to create a rule for my heading 1s.Now if I open up my curly brace and hit Return to go down to the next line, I amjust going to do some margins here.So I am going to do a margin-top.So that's going to add a top margin to my headings of 10 pixels.Then I am going to add a margin to the right of 10 pixels.Then I am going to add a margin to the bottom of 10 pixels.

Then I am going to add a margin to the left of 10 pixels.Now don't worry about doing this with me.I am just trying to show you one of the things that Dreamweaver can do to speedup the creation of your CSS and make your CSS a little bit more efficient.But what I have done here is I have created a rule for heading 1s thatcontain both the top, right, bottom, and left margin, and you can see they are all 10 pixels.Well, that's four lines of code.That's adding a good bit of weight.I could have actually written the exact same rule this way.I could have just typed in margin:10px, much shorter, right?Well, this is what we call shorthand notation, and if you are having Dreamweavergenerate your code for you, it's not a bad idea to go ahead and tell Dreamweaverthat you would like to use the shorthand notation so that your code becomes asefficient as possible.

Let me show you where to set that.If you go to Edit > Preference or again, Dreamweaver > Preferences on the Mac, youcan now go down to the category CSS Styles.You will notice that we have some check boxes here for creating shorthandnotation, Background properties, Margins like I was just working on, andpadding, Border, border widths, List- Styles, Fonts. All of those have an abilityto create shorthand notation.Well, I am going to go ahead and check everybody except for Fonts, and why is that?Well, if you do a font shorthand notation, and if you are brand-new to CSS, thismight not really make whole lot of sense right now, but trust me, as you learnmore about CSS, this will make a whole lot of sense.

But if you do font shorthand notation, you have to set properties for fontweight, font size, font style, font family, and you have to do it in the properorder, font variant, all that stuff.The main problem with that is that if you don't state one of those, let's sayyou left out font weight, or you left out font variant, what would happen isthe default would be used for that, and it might actually overwrite one of your other styles.So I typically don't use font shorthand notation unless I am really sure ofwhere I want to use it.So I typically turn that off and do font shorthand notation by hand.

So I have got those four items checked.Notice that we can also tell Dreamweaver exactly when to do that.Notice that we can say, "Hey, only change it if the original uses shorthand, orchange it based on all these settings that we have above."So we are going to do that.Then finally, we have an option of what to do if we double-click the CSS file in the CSS panel.Now if we edit a rule, for example, let's say, I was to double-click on an h1rule in the CSS panel, it would open up the CSS dialog box that we are going tobe seeing in just a moment, or I have the opportunity of editing it withinthe Properties Pane,I will show you that option in a just a moment, or the opportunity to jump into Code view.

This is all about personal preference.If you are brand-new to CSS, I recommend leaving this as Edit using CSS dialog.That dialog box is typically a little bit easier for people who are new to CSSto use because it just presents you with certain options, and you don't have toworry about any of the syntax.So with those options set, I am going to go ahead and click OK, and now I knowthat my CSS is set up to the preferences that I want for my particular workflow.Now, not everybody likes to work with CSS the same way, and I think it's greatthat Adobe makes it so easy for us to get Dreamweaver's workflow to match ourown personal preferences.

I would advise you to monitor how you work with Dreamweaver over time, so thatyou can make sure that Dreamweaver's workflow reflects the way that you liketo work.

Q: After creating a website following the instructions in the course, the header background graphic appears correctly in all browsers except Internet Explorer 6 and Internet Explorer 7. The graphic works properly in IE 8. What can be done to make the graphics appear in IE 6 and IE 7?

A: To make the header background graphic appear, wrap the header div tag in another div tag and give it an ID like “mainHeader.” The problem stems from a bug in Internet Explorer that prevents the browser from dealing with absolutely positioned elements that are right next to relatively positioned elements. Following the steps above should solve the problem.

Q: In the tutorial, the author links the Tool Tip to the word "More" at the bottom of the thumbnail photo field. I can't figure out how to place the <a> "More" on the thumbnail photo field.

A: In the example, there is a paragraph that wraps an <img> tag and the word "More," which is surrounded by an anchor tag (<a>). The author uses CSS to make sure the parent div tag of the thumbs floats to the left, and is only wide enough for the image. This causes the link text to break down onto another line. Then, the instructor uses CSS to align the link text to the right of the <img>. The link itself is a void JavaScript function, ( javascript();). This gives you a "dummy" link without returning you to the top of the page as the "#" dummy link tends to do.If you were manually typing the text in, you could select the image, hit the right arrow button, and begin typing. The text should then appear on screen.

Q: In this movie, you are making changes to the HTML in order to customize the text layout on your page (i.e. h1, h2, and h3 tags as well as strong and em tags). I'm wondering why you are not using CSS to do this (i.e. font-size, font-weight). Do you typically use one method, or is it customary to do use both in a layout, and if so, what guidelines would you suggest to determine which to use when?

A: We modify the page's structure through the use of h1, h2, and other heading tags. So when we are choosing heading levels, we're not concerning ourselves with typography; we're establishing page structure. A heading is chosen to denote the level of importance for the heading, not typography.CSS should always be used for presentation, not HTML.

Q: In the “Understanding ID selectors” movie, the author states that only one ID tag can be used per page, but then he adds two ID tags. Can you please clarify this for me?

A: You can use as many IDs per page as you wish. They just must all use a unique name. Therefore if you assign an element the ID of "header" no other element on THAT page may use the same ID.

Q: I noticed that in this course, the instructor uses this code on his CSS external sheet: @charset "UTF-8"; I was under the impression that this code wasn't necessary. The W3.org site is unclear on the matter. Is it necessary? Is it a best practice? Is it an older form of CSS?

A: The characterset attribute is added automatically by Dreamweaver, and there’s no practical reason to remove it. While it's not needed (the HTML page should indicate which encoding to use for the page) it is helpful if the CSS file is ever imported or used on a page where the characterset isn't specified. Think of it as a safety net for characterset encoding. Not necessary, but not harmful either.

Q: I need to add captions below images that I insert in pages of text. I played all the lessons in Chapter 5 (Adding Text and Structure) but none dealt with captions. I hope the author has an answer or can refer me to a source.

A: In HTML 4 and XHTML 1 (which is what Dreamweaver CS5 uses by default), there wasn't really a way to add captions below your photos. Most web authors would "fake" captions by having paragraphs of text below their images and using CSS to position and style the captions in the desired manner. Many would use a class such as .imgCaption to control the styling. To do this you would essentially position the text underneath the image through CSS (often by grouping the image and the paragraph in a div tag) and italicizing the text.

However in HTML5, there are new elements that allow us to associate images and their captions, the figure and figcaption element. Our author James Williamson just finished a course on HTML5: Syntax, Structure, and Semantics which details how to use it.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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