Filed under: Internet
There are lots of great tutorials already out there for CSS, but I’d like to address one specific problem I’ve encountered with Internet Explorer. Say you’ve defined a style for a custom tag in your CSS stylesheet:
header1 {
color: #F1E1FF;
text-decoration: none;
font-size: 18;
}
…all versions of Internet Explorer will completely ignore it!
To work around this, don’t define styles for custom tags if you can help it. Define styles for classes instead, and apply the classes to standard tags. This is easy to do.
Step 1. In your stylesheet, give your style a name beginning with a period. That turns it into a class:
.header1 {
color: #F1E1FF;
text-decoration: none;
font-size: 18;
}
Step 2. In your HTML file, use a standard tag and apply your class to it. For changing font size and color, the <span> tag is handy:
<span class="header1">foo</span>
That’s all you need to do for applying styles to plain text. But if you’d like to apply your style to a link…you’ve got some extra steps left.
Step 3. Internet Explorer will only read a link’s style information from its <a> tag! This is annoying, because most of the time you’ll already have specified a style for your normal links. You’ll need to override it. Go to your stylesheet, copy the class you just made, and add an a before the period. The copy should otherwise be identical to your original:
a.header1 {
color: #F1E1FF;
text-decoration: none;
font-size: 18;
}
Step 4. You can then add some other variations if you’d like to do something more with your link.
a.header1:hover {
color: #F1E1FF;
text-decoration: underline;
font-size: 18;
}
Step 5. Finally, apply the class to your link:
<a href="foo.html" class="header1">foo</a>
Internet Explorer should now do a better job with your CSS style information. However, be aware that it’s still pretty unpredictable compared to its competitors. You may decide that it’s not worth the time to get your page exactly right for just this browser, even if it does have the largest market share.







