Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Hundreds and hundreds of lines of them actually, and these are the styles that are driving our Explore California site. Now before we get into creating these styles, I think it's useful to take a look 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 the Mac, 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 on the Edit Coloring Scheme.
We have a little preview down here that shows you any changes that you make and what they are going to look like within your structure, but you can come right 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 a friend 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 to seeing in the green.
So just be sure that what you change is going to be consistent for you and any team 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 choose CSS, 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 code for 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 your CSS 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 make this 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 to show 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 for you 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 am just 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 speed up 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 that contain 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 Dreamweaver generate your code for you, it's not a bad idea to go ahead and tell Dreamweaver that you would like to use the shorthand notation so that your code becomes as efficient as possible.
Let me show you where to set that. If you go to Edit > Preference or again, Dreamweaver > Preferences on the Mac, you can now go down to the category CSS Styles. You will notice that we have some check boxes here for creating shorthand notation, Background properties, Margins like I was just working on, and padding, Border, border widths, List- Styles, Fonts. All of those have an ability to 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, this might not really make whole lot of sense right now, but trust me, as you learn more about CSS, this will make a whole lot of sense.
But if you do font shorthand notation, you have to set properties for font weight, font size, font style, font family, and you have to do it in the proper order, font variant, all that stuff. The main problem with that is that if you don't state one of those, let's say you left out font weight, or you left out font variant, what would happen is the 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 of where 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, or change 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 h1 rule in the CSS panel, it would open up the CSS dialog box that we are going to be seeing in just a moment, or I have the opportunity of editing it within the 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 CSS to use because it just presents you with certain options, and you don't have to worry about any of the syntax. So with those options set, I am going to go ahead and click OK, and now I know that 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 great that Adobe makes it so easy for us to get Dreamweaver's workflow to match our own personal preferences.
I would advise you to monitor how you work with Dreamweaver over time, so that you can make sure that Dreamweaver's workflow reflects the way that you like to work.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.