How to Use Types of CSS Selectors in Adobe Dreamweaver

Understanding the CSS selectors and how they apply to objects will help you better apply and use CSS in your files. The information below shows how to work with the different types of selectors.

Place your cursor in link text.
In the CSS Designer panel, click the Add Selector icon () in the Selectors section.
Dreamweaver will then provide you with a descendant selector starting with the body tag:

This means that this rule will affect every 'a' element within a 'p' element within the 'body' element. It will not affect 'a' elements that are not nested somewhere within 'p' elements.

Define the selector in the Properties area.

There are several different types of selectors. The most common ones are listed below:

Type
Descendant
Class
ID

Selectors identify the element(s) affected by the CSS rule.

Type Selectors

Type selectors specify elements by tag name and affect every instance of that element type. Let's look at an example:

p {
  color: darkgreen;
  font-family: Verdana;
  font-size: 10pt;
  }

This rule specifies that the text of every  element should be dark green and use a 10-point Verdana font.

In Dreamweaver CC 2015, you must type the beginning dot (.) or pound sign (#) to note a Class or ID type selector.

Descendant Selectors

Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that  tags within tags should have red text.

p strong {
  color:red;
  }

With descendant selectors, generations can be skipped. In other words, the code above does not require that the  tag is a direct child of the  tag.

Class Selectors

In HTML, almost all elements can take the class attribute, which assigns a class name to an element. The names given to classes are arbitrary, but should be descriptive of the purpose of the class. In CSS, class selectors begin with a dot. For example, the following rule creates a class called "warning" that makes the text of all elements of that class bold and red:

.warning {
  font-family: Impact;
  font-size: large;
  font-weight: bold;
  color: #F00;
  }

Following are a couple of examples of elements of the warning class:

<h1 class="warning">WARNING</h1>
  <p class="warning">Don't go there!</p>

To create class selectors in Dreamweaver, you would type ".warning" as the name of the Selector:
Class Style

To illustrate how to add a class selector in Dreamweaver:

Open an HTML file in Dreamweaver.

Place your cursor at the end of the blockquote and press Enter.
Click the Outdent icon () in Properties to exit the blockquote.
Type "Don't forget to save your work!"
In the CSS Designer panel, click the Add Selector icon () in the Selectors section.
Type .warning:
Define the selector in the Properties area.

Now we have to apply the class to an element on the page:

Place the cursor in the warning paragraph you typed under the blockquote.

Select "warning" from the Class drop-down in Properties:
Open the page in your browser by pressing F12. If you get the following prompt, click Yes. This saves the CSS file.
The page should look like this:

ID Selectors

As with the class attribute, in HTML, almost all elements can take the id attribute, which is used to uniquely identify an element on the page. In CSS, ID selectors begin with a pound sign (#) and have arbitrary names. The following rule will indent the element with the mainText id 20 pixels from the left and right.

#mainText {
  margin-left:20px;
  margin-right:20px;
  ]
  
  <div id="mainText">
  This is the main text of the page...
  </div>

To create id selectors in Dreamweaver, type "#mainText" as the name of the selector.

ID vs. Class

Again, the id attribute is used to uniquely identify an element on a page, so no two elements may use the same id.

Classes, on the other hand, can be applied to many elements on the page.