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:
<link href="styles/print.css" rel="stylesheet" media="print">
Search WWH ::

Custom Search