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.
Take our Introduction to Dreamweaver Creative Cloud (CC) 2015 course for free.
See the Course Outline and RegisterThere 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 <p>
tag.
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.
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.
Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.
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.