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.