Dreamweaver Tutorial: CSS Cheat Sheet – Class, ID, Tag and Compound
When and How to use Dreamweaver’s 4 Types of CSS Rules
One of the most difficult aspects of learning to use Cascading Style Sheets (CSS) in Dreamweaver is determining when to use each type of rule.
Every web designer uses CSS rules in a slightly different way. Some designers use CSS classes for everything while other designers use classes sparingly. Some techniques are more efficient than others and are for that reason, preferred.
CSS Classes
Think of classes as special circumstances. “I have 10 sentences and I want one of them to be red” or “I have 14 links and I want 3 of them to be different than the rest.”
You can name a class anything you like but it should not have any spaces in its name and should use lowercase letters. Classes start with a period so when you see them in Dreamweaver’s CSS panel you can easily identify them as a class. When you create a class and give it a name Dreamweaver will automatically add the preceding period for you.
Keep in mind that you can re-use classes on any page of your site as frequently as you want. Along those same lines, if you’re finding that you’re setting the class of every element, a link for example, to use your class, you should consider styling links in a more efficient way by creating CSS rules for Tags.
CSS Class Examples:
- .special
- .red-text
- .required
- .small-bold-blue
CSS IDs
IDs are best suited for naming parts of your layout. You can name anyXHTML element by giving it a unique ID. The ID can be anything you like but avoid using spaces in the name and use lowercase letters whenever possible to avoid possible confusion or conflicts later on.
IDs must be unique on each page. That means that you should avoid giving more than one element the same ID on a single page however the same element can appear on different pages. For example, every page of your site may have a div with ID #header but ID #header should only appear once on each page.
IDs always start with a # symbol. When you create a CSS ID in Dreamweaver, a # symbol will automatically be added to your rule name.
Though IDs are used frequently for naming divs, they can be used to name anything. For example, you can give an individual link an ID and then use a CSS rule to affect the way that ID looks.
CSS ID Examples:
- #header
- #nav
- #subnav
- #content
- #footer
CSS Tags
Using CSS you can style the way an existing XHTML tag appears. When you create a new CSS rule for a tag you must give it the same name as the tag itself. For example, if you want to change the way all of the links on your page look, you must first determine what the XHTML tag is that creates a link. You can do this by selecting any tag on your page and then looking at the grey bar that appears just above your properties panel (at the bottom of your webpage’s body section). Dreamweaver will display what XHTML elements your cursor is currently inside of. In the case of a link that you’ve clicked into, you’ll see that your cursor is inside of <a> which we call the “a tag”. You’ve discovered that the tag for a link is simply the letter “a” and will therefore create a CSS rule to style the “a” tag.
CSS Tag Examples:
- a
- p
- h1, h2, h3, h4, h5, h6
- img
- ol, ul
- li
- body
CSS Compound Rules
Compound or Advanced CSS rules are created when you need to combine more than one Class, ID or Tag. For example, if you want to style the way a link inside of a paragraph looks (instead of all links regardless of where they are). Another example: “I want to put a border around images inside of the ID called header but I don’t want to affect images in other parts of my layout.”
Compound rules are also used to style states of a tag. For example, a compound rule can be created to style the way a link looks when you hover over it with your cursor: a:hover.
Making sense of complex (lengthy) Compound CSS rules can be tricky. For example, what would a rule like this affect?
- #content #sidebar ol li a
The trick to deciphering this Compound rule is to read it backwards (from right to left). In this case our Compound CSS rule will control the way links inside of list-items inside of ordered lists inside of ID sidebar inside of ID content appear. If any of those elements are missing, the rule will not affect the element.
CSS Compound Rule Examples:
- #header img
- p a
- a:hover
- #nav #subnav ul li a:hover
Mastering CSS in Dreamweaver
The real challenge to mastering CSS in Dreamweaver lies in learning when to use which type of CSS rule. You can think of the 4 types of CSS rules as your “tools”. You can pound a nail into the wall with a hammer or you could try it with the back of a screwdriver. Sometimes you’ll find that CSS rule types are interchangeable but that using one type instead of another may allow you to style a webpage faster and more efficiently.
Dreamweaver Tutorial: CSS Cheat Sheet – Class, ID, Tag and Compound
You can follow all the replies to this entry through the comments feed.
Leave a Reply
Featured Clients
Take the first step
Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!
Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802
Phone:
(406) 662-1123
Email:
I can’t get past the challenge:classes of elements!
HELP ME PLEASE
Hi Alison, could you be more specific? What are you having trouble with?
Thanks for explaining clearly Gabriel.