Adding some CSS classes to style the bars and text elements

When we added the rect elements, we added a female class attribute for the girls' names, and a male one for the boys' names and we've also set the style of our text elements to label. In our CSS file, we can now define colors and other styles based on these classes:

.male { 
    fill: steelblue; 
} 
 
.female { 
    fill: hotpink; 
} 
 
.label { 
    fill: black; 
    font: 10px sans-serif; 
    text-anchor: end; 
}

With these CSS properties, we set the fill color of our rectangles. The elements with the male class will be filled steelblue and the elements with the female class will be filled hotpink. We also change how the elements with the .label class are rendered. For these elements, we change the font and the text-anchor. The text-anchor, especially, is important here, since it makes sure that the text element's right side is positioned at the x and y value, instead of the left side. The effect is that the text element is nicely aligned at the end of our bars.