SELECTORS - CSS: Professional Techniques for Modern Layout - page 51

In such cases, you can associate both class and id with the elements, like so:
< div class ="panel" id ="weather">
< div class ="panel" id ="stocks">
< div class ="panel" id ="latest">
h en, in CSS, you can address each bit as needed.
.panel {
border : 1px solid silver ;
background : #EEE top left no-repeat ;
color : #333 ;
font : x-small sans-serif ;}
#weather {
background-image : url(/pix/panel-weather.jpg) ;}
#stocks {
background-image : url(/pix/panel-stocks.jpg) ;}
#latest {
background-image : url(/pix/panel-latest.jpg) ;}
You can even combine the two in a single selector, like so:
.panel#weather { font-weight : bold ;}
#latest.panel { color : #511 ;}
53
h e order you write them in doesn't matter, as you can see there, and so doesn't have to rel ect
the order you put them in the HTML.
MULTICLASSING
An ot en-overlooked capability of the class attribute is that you can have a space-separated
list of as many words as you like. In other words, you can attach multiple classes to an
element.
As an example, let's take the markup from the preceding entry and modify it to use no id
attributes. It would look like this:
< div class ="panel weather">
< div class ="panel stocks">
< div class ="panel latest">
h en the CSS would just need to be adjusted to deal with classes instead of IDs.
.panel {
border : 1px solid silver ;
background : #EEE top left no-repeat ;
color : #333 ;
font : x-small sans-serif ;}