Join James Williamson for an in-depth discussion in this video Writing a style header, part of Managing CSS in Dreamweaver.
Style sheets can be incredibly complex documents, featuring thousands of lines of code. One of the first things you can do to your style sheets to assist you in giving it structure and organization is to write a good style header. Style headers can be as robust as you need them to be, and usually contain information such as copyright data, style reference information and version numbers for team members. We're going to start the organization of the Explore California styles by writing our own style header. So I'm just going to go ahead and create a brand-new CSS document. Now, I've defined the 02_02 as my root directory, but I'm just going to go ahead and create a CSS file from scratch.
And I'll use the starter screen to do. So create new CSS file. There we go. I'm just going to save this in the 02_02_css folder, and I'm going to save it as main.css. Here we go. So the first thing I'm going to do is just up here I'm just going to write: style sheet for Explore California. Now on the next line, I'm going to type in version 1.2, modified on 04/05/10.
Now that level of organization you don't need, but if you're working in a team environment, that's really handy, because if a team member comes in and makes a change to the site, they can change that one line and everybody knows, okay, this has been modified last week or this hasn't been modified in the month, that sort of thing. I'm going to go down and on the next line, I'm just going to type in copyright 2010 lynda.com for personal educational use only. So if you want to put some restrictions on how your style should be used if people want to repurpose them, that's a good place to put it, as well.
Now this needs to be inside of a comment. This would really mess my CSS up if I didn't have it that way. So let me go ahead and highlight all of this text and when the text is highlighted, I'm just going to come right here to my Code toolbar, click on the Apply Comment, and I'm going to apply the second comment here, which is the /**/Comment. That is a multiline comment in CSS, and I want to choose that. Now you can see that it's grayed, and you can put those comment indicators on either side. You can leave them inline. It's really up to your personal preferences. You can put them wherever you would like. And I'm going to go ahead and save that file again, and there we go. There is our style header.
Now these things can be as robust as you need them to be. Remember, they're entirely optional. You don't even really have to have them. They are a great way to communicate with yourself. If you're like me and you forget why you are doing a certain thing, they are a great way to sort of add a little note to yourself, as well as any team members, what's going on with your styles. And they are also a great way to pass on information to people who might be visiting your site, opening your styles to take a look at them. If you do plan on using them, keep in mind that they should convey information inside of them very clearly and very concisely.
- Building a CSS-friendly workspace in Dreamweaver
- Creating style sheets visually
- Hand-coding styles
- Working with code hinting
- Organizing style sheets with color coding and sections
- Writing global classes
- Eliminating style conflicts
- Deploying styles
- Dealing with browser compatibility issues