How To Edit CSS Files In Dreamweaver The Easy Way
Now, I am from the old school of the CSS Coding circles where I generally like to open the CSS File and edit the file itself. But Adobe Dreamweaver CS3 has a pretty cool feature that I have been using quite a bit of late. I cannot believe I haven’t used it more often.
In the last couple of projects of mine I have been using the “CSS Panel” on the right hand side of Adobe Dreamweaver CS3.
From this panel you can Attach a Style Sheet, Add a New CSS Style Rule to and already attached Cascading Style Sheet. But the best thing I reckon is the ease at which you can make changes to the CSS File.
Let’s say you have already got a Cascading Style Sheet attached to the document eg:
Now everything that is defined in that Style Sheet will appear in the CSS Panel. All you need to do is expand the CSS File from that Panel and once expanded you will see everything that is defined eg: classes, div’s, ul, etc etc.
To change one of those CSS Properties you simply click on the rule eg: ul.meubarhorizontal and bingo every element that is defined for that property is displayed below it in the Properties Window.
You can define new properties from here as well, eliminating the typos that many people have. There are a couple of ways in which you can change or add properties here either click inside the property window or click on the little pencil on the right hand side.
Another impressive thing is that if you have more than one Cascading Style Sheet attached to the document they all appear as separate entries in the CSS Panel.
So you can easily see which CSS File you are working on. Be careful though, for all those people who like to write CSS the old fashioned way it can become very addictive and you may find yourself not going back!!!!!
If you would like more Web Site Design Tips then make sure you SIGN UP for my
WEB DESIGN TIPS Newsletter.
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
Leave a Reply