HTML and CSS Reference
In-Depth Information
This is a case where the cascade plays a vital role. Both the figure and portrait classes try to set the width of
the <div> , and they have equal specificity (10). The portrait class takes precedence because it comes after the
figure class in figcaption_adapt.css like this:
.figure {
width: 61.5%
.figure img {
max-width: 100%;
.portrait {
width: 40.9%;
As Figure 7-19 shows, the narrower width is applied correctly to the <div> , which scales automatically when
the browser viewport is resized.
Figure 7-19. The portrait class applies the correct width to the figure <div>
If you reverse the order of the portrait and figure class definitions in the style sheet, the figure class takes
Search WWH ::

Custom Search