HTML and CSS Reference
In-Depth Information
Figure 17-13.
Using a file comparison utility makes it easy to identify duplicate rules
i won't go through the process in detail. you can see the final result in twocol_end.css. The only styles that
needed further tweaking were
.figure.floatleft
and
.figure.floatright
. They have higher specificity
than the
floatleft
and
floatright
classes, so you need to add the
float
property and appropriate
margins to them like this:
.figure.floatleft {
margin: 3px 10px 3px 40px;
float: left;
}
.figure.floatright {
margin: 3px 10px;
float: right;
}
All that remains after editing twocol.css is to attach it to horizontal.html after basic.css with a media query:
<link href="styles/basic.css" rel="stylesheet" media="screen">
<link href="styles/twocol.css" rel="stylesheet" media="only screen and (min-width:
600px)”>
<link href="styles/print.css" rel="stylesheet" media="print">
