• 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

The Energy Fix


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
Avi Kolko 2 months ago
Gecko built us a new Unity Hospice website from the ground up, as well as designing new brochures and other collateral material. Working with them has been a pleasure - they are professional, organized, responsive, aim to please, and are easy to work with. Their design work is beautiful, and they really took pains to understand the look we were going for. Highly recommended!
Avigail Bass 4 months ago
We redesigned a very very old website with Gecko and began the process during coronavirus. Despite those challenges, the team at Gecko was very helpful and flexible. They built us a beautiful website, taking into account all our needs. The project manager Grace, was a pleasure to work with, always available to answer questions, great with communication, and very organized. They went above and beyond to make sure the end product was perfect, even if it meant putting in extra hours, or extending the project longer than anticipated. We really appreciated all they did for us and could not be happier with the results!
Craig McKay 5 months ago
Gecko Design staff was super easy to work with. They were able to help us create an incredible web site that is getting noticed. I would highly recommend Gecko to anyone looking for web design.
Courtney Firak 8 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
PHC Missoula 9 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Spring 2021! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123