CSS design basics with Dreamweaver – Part 5: Defining and using ID selectors

In this tutorial you will learn how to define and use ID selectors from within the Dreamweaver CSS panel. ID selectors are different from class selectors in several ways; this tutorial will make their usage and their place in the CSS selector hierarchy clear thus enabling you to harness the full power of the ID selector.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

• Try
• Buy

Sample files:

• css_best_pt5.zip (ZIP, 1K)

Prerequisite Knowledge

• CSS design basics with Dreamweaver – Part 1: Learning about doctype
• CSS design basics with Dreamweaver – Part 2: Styling (X)HTML elements
• CSS design basics with Dreamweaver – Part 3: Margins and padding
• CSS design basics with Dreamweaver – Part 4: Defining and using class selectors

Using ID selectors

In the previous tutorial—part four of this series—you learned how to create and deploy a class selector. In this tutorial you will learn how to create and implement an ID selector. The syntax of the ID selector isn't very different from the class selector. In fact, the general syntax of CSS is very consistent and once you understand the structure of a rule, you should have no trouble reading a CSS file. The ID selector differs from the class selector in that it can only be applied once in any given page. Multiple instances of the same ID are not allowed. Should you need to use an ID selector on more then one occasion in any given page, then you will need to re-plan your CSS. You should never run into the need to apply an ID selector more than once.

Mistakes with CSS tend to not be in the syntax or the structure of the CSS rule, but in how a rule is implemented by the browser. It is in this area that many designers who are new to CSS struggle. All CSS selectors carry a weight, and the more weight a selector is deemed to have, the more it important it is deemed to be. This weighting system is known as Specificity.

You have previously read about both type and class selectors. The class selector is more specific than the type selector, and in turn, the ID selector is more specific than the class selector. I have an article at the Adobe Developer Center that explains specificity in detail, and while I will cover the finer points of specificity in this and forthcoming articles, it won't do any harm to have a read through the specificity article to build up a little background knowledge.

The syntax of the ID selector

The ID selector's syntax, as I've mentioned, is very similar in appearance to the class and type selector. Let's look at Listings 1 and 2.

.blue {
  color: #ff0000;
}

Listing 1. The class selector

#MyID {
  color: #0033ff;
}

Listing 2. The ID selector

The selector in Listing 1 should be familiar to you. It is a class selector, and you learned about the class selector in the previous article.

Listing 2 is an ID selector. The primary difference here is the fact that the first character of the ID selector is a hash or pound sign. The hash sign is the defining character of the ID selector; anything that begins with this character is termed as an ID selector.

You will recall that in part four of this article series, I presented a code fragment that showed a class selector being placed against a span tag. The modified code for the ID selector would look like the code shown below.

<span class="blue">This text will be blue because the blue class selector defines it to be just that</span>

Listing 3. Applying the class to the span tag

<span class="MyID">This text will be green because the MyID selector defines it to be just that</span>

Listing 4. Applying the ID selector to the span tag

You'll notice in Listing 4 that the # sign is not used when an ID selector is applied to an element; the name is all you need to reference. This is of course completed for you by Dreamweaver, but it is always good to understand the code that Dreamweaver writes.

Creating ID selectors from within Dreamweaver

Within the sample files linked from the beginning of this article, you will find a page called 1.html. It contains an embedded style sheet that contains the class selector that you created in the previous tutorial. Open 1.html in Dreamweaver's design.

In Dreamweaver you create CSS rules from within the CSS panel. The CSS panel is made accessible by using the keyboard shortcut shift + F11, or by selecting the CSS Styles option from the Window menu. Open the CSS panel now using one of these methods. Your CSS panel should look like Figure 1.

Figure 1. The CSS panel

Complete the following steps to create an ID selector.

1. Click the third icon from the right—the New CSS Rule button.
2. The New CSS Rule dialog box opens.
3. Select the Advanced (IDs, pseudo-class selectors) option from the Selector Type: list.
4. In the Selector pop-up menu, type #MyID

5. Ensure the This document only option is selected.

   

   Figure 2. Creating an ID selector

6. Click OK. The CSS Rule Definition dialog box opens.
7. Select Type in the Category list if it isn't shown by default.
8. Click the Color cube.
9. Select a Green color.
10. Click OK.

Your CSS panel will now update to show your new ID selector. It should look like Figure 3.

Figure 3. Your new #MyID selector

You can of course add more properties and values to your ID selector if you require them. If you switch Dreamweaver into Code view, your embedded style sheet should look like that shown in Listing 5.

<style type="text/css">
.blue {
color: #0033FF;
}

#MyID {
color: #006633;
}
</style>

Listing 5. Your embedded style sheet

Applying an ID selector

In the previous article you learned how to apply a class selector to an element within your page. Applying an ID selector is pretty much the same. The 1.html file contains a small paragraph of text. Click inside this paragraph and you will see the Dreamweaver quick tag selector update to show the body and p elements. You can see this in the bottom left corner of Figure 4.

Complete the following steps

1. Right-click the p element in the quick tag selector. You will see a context menu appear.
2. Point to the Set ID option. You will see a flyout menu appear containing all the ID selectors in the style sheet.
3. Select the MyID option. The paragraph text will now change to green

Figure 4. Applying your ID selector

You can now switch to Code view to see exactly what has happened when the ID selector was applied. Take a look at Listing 6.

<p id="MyID">Some text that will have the ID selector applied to it</p>

Listing 6. The p tag with the MyID ID selector applied to it.

In Listing 6 you can see that the ID selector has been applied to the opening tag of the paragraph.

Conclusion

In this tutorial you have discovered how you can create ID selectors directly from within Dreamweaver and then apply them to your work to alter the appearance of an element. This article has been just a simple introduction to the ID selector. My aim was to allow you to see how such selectors are created and how they can be applied. The usage in this tutorial perhaps might not be repeated too often in a real-world scenario. It is just a simple implementation.

It is important to remember the following two things above all others:

• NEVER use an ID selector more than once on any given page.
• An ID selector carries more weight than a class selector. It is said to be more specific. As I mentioned, I will cover specificity in future articles in this series. In the mean time, however, you can also read my previous article that is dedicated to the topic of specificity.

In part six of this series, you will begin to harness the real power of CSS as you discover and explore the descendant selector.

See you next time and thanks for reading along!

Check out CSS design basics with Dreamweaver – Part 6: Defining and using descendant selectors

About the author