• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

Dreamweaver Tutorial: CSS Cheat Sheet – Class, ID, Tag and Compound

Written by Gabriel on February 10, 2010

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


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.

Posted in Adobe Dreamweaver CSS

3 Comments to Dreamweaver Tutorial: CSS Cheat Sheet – Class, ID, Tag and Compound

  1. April 30, 2015 at 10:29 am | Permalink

    I can’t get past the challenge:classes of elements!

  2. Tony's Gravatar Tony
    October 1, 2016 at 9:51 am | Permalink

    Thanks for explaining clearly Gabriel.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients

Montana Maverick Organics

Montana CRE

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

(406) 662-1123

523 N Higgins Ave, Missoula
Michelle Levitus 5 months ago
Gecko Designs was a pleasure to work with while building out a brand new website. They understood what we were after and had creative and useful ideas to help us reach our goals for the website and for our organization. Communication was friendly and reliable throughout the process and they were available to troubleshoot any issues that arose before we went live, and after. Highly recommend!
Eric Halverson 3 months ago
Gabriel at Gecko Designs has proven over and over again that he and his team offer an incredible product to their clients (me!). I've been thrilled by his communication, the products they offer, and their responsiveness to my requests. Anyone looking for a website, logo, etc.. would be making a no-brainer decision to do business with Gecko Designs.
Martin Judnich 7 months ago
From intro meeting to final website, this was a great experience. Gecko created exactly what I was looking for, and was very timely and affordable. Great collaboration, lots of changes, and they made me feel comfortable every step of the way. I could not recommend more.
Lincoln Mansch 10 months ago
Our non-profit organization can't find enough adjectives to describe the top-notch, professional, and amazing work Gabe and his team provides. They have been amazing supporters of our organization from answering simple quick questions, to volunteering at our events, to helping us with graphic designs and website updates for our biggest event, to helping us with the mother of all projects....redesigning our very outdated website. We are always amazed at how quickly and efficiently they work despite us coming back with little nit-picky changes and requests. We often wonder if we're their only client because they are so quick to respond....but that is exactly how they want you to feel - as if you are their only/most important client. They are always willing to do whatever it takes to get the job done right by taking very careful consideration of their clients' needs, wants, and desires, and end up producing work that is nothing short of brilliant.
Jaycie Loney a year ago
Gabe and his team did a great job helping us with our fundraiser. They were the most affordable, easiest to work with place in town! We couldn't have been more pleased with these guys!! Highly Recommended!