HTML and CSS Reference
In-Depth Information
All our helper classes are defined last, so they can override all your other styles
when used. Make sure the properties they override are not over-specified elsewhere;
you can read more about specificity at www.w3.org/community/webed/wiki/Inherit-
ance_and_cascade#Specificity .
Image replacement
In our project, we want to have a spiffy logo for the Sun & Sand Festival 2012
heading. HTML5 Boilerplate has a handy image replacement class that can be used
for this. In the markup, we will simply add a class called ir to the h1 tag, as shown
in the following code:
<h1 class="ir">Sun &amp; Sand Festival 2012</h1>
What this does is apply the styles specified in HTML5 Boilerplate's image replace-
ment class ( ir ) to hide the text. All you need to do then is add a background image
to the h1 element along with its width and height, so it displays as per your specific-
ation as shown in the following code:
header h1 {
background-image: url('/img/
heading-banner.png');
width: 800px;
height: 300px;
}
This will result in the heading looking similar to the following screenshot:
Search WWH ::




Custom Search