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.
There are several different types of selectors. The most common ones are listed below:
Selectors identify the element(s) affected by the CSS rule.
Type selectors specify elements by tag name and affect every instance of that element type. Let's look at an example:
This rule specifies that the text of every
<p> 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 specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that
<strong> tags within
<p> tags should have red text.
With descendant selectors, generations can be skipped. In other words, the code above does not require that the
<strong> tag is a direct child of the
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:
Following are a couple of examples of elements of the warning class:
To create class selectors in Dreamweaver, you would type ".warning" as the name of the Selector:
To illustrate how to add a class selector in Dreamweaver:
Now we have to apply the class to an element on the page:
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.
To create id selectors in Dreamweaver, type "#mainText" as the name of the selector.
id attribute is used to uniquely identify an element on a page, so no two elements may use the same
Classes, on the other hand, can be applied to many elements on the page.
Tracy has been a senior graphic designer/programmer, instructor, and consultant since 1993 and has developed hundreds of logos, marketing materials, websites, and multimedia solutions for customers worldwide, including involvement in large corporate software rollouts. She has helped many organizations optimize and streamline data solutions. She teaches both onsite and online courses and has her CTT (Certified Technical Trainer) certification. Tracy specializes in teaching graphics, desktop publishing, web design, reporting/productivity applications, as well as the creation of online courses with software from leading vendors.