146 CHAPTER 4 Getting started with CSS3
Defining selectors
When defining a selector, you can create element selectors, id selectors, and class selec-
tors. This section examines these common selector types and many of the common selector
variations.Creating an element type selector
An element type selector is based on the name of the tag. In the previous example, the tag
name (body) is the selector. There is only one <body> element in an HTML document, but
what would happen if the selector were set to button, as shown in the following example?
button {
background-color: white;
color: gray;
}If your HTML document contains 50 buttons, the style of all 50 buttons would be set. This
is desirable in some scenarios, but in other scenarios, you might have wanted to set the style
on a single button or a subset of buttons.Creating an id selector
An id selector is based on the id of the element. To set the style on a single button, you can
assign an id to the button and then specify the id as the selector, prefixed with the hash (#)
symbol. The following example sets the style on an element whose id is btnSave.
#btnSave {
background-color: white;
color: gray;
}In this example, it doesn’t matter which type of element is being accessed; all that matters
is that the id is btnSave. Because the id must be unique across the HTML document, using
this approach to set a style limits the reusability on a page, but across webpages, this sets the
style of any element whose id is btnSave.Creating a class selector
A class selector is a style with a class name of your choice, prefixed with the period (.) symbol.
This is also called a named style. The class name can be assigned to any element through the
class attribute. In the following example, a style is created with a class name of myStyle.
.myStyle {
background-color: white;
color: gray;
}Key
Te rmsKey
Te rmsKey
Te rms