Style Sheet Tips and Tricks

Style Sheet MIME Types

Some authors have reported trouble with gettting their ISPs to correctly serve up CSS files. Apparently, with some Web servers, .css is mapped to the MIME-type x-application/css, or “Continuous Slide Show,” instead of the MIME-type text/css. The style sheet gets mangled into something else. If you find you’re having this problem, you’ll need to contact your ISP and explain the problem. Because .css is now an IANA-registered MIME-type, service providers really have no excuse for not supporting it for style sheets. If they refuse to fix it and style sheets are a necessary part of your site, you may have to consider switching ISPs.

Creating a Drop Cap

Although a pseudo-element called :firstletter exists, it is not very well supported as of this writing. In the meantime, you can create a drop cap using a <span> to isolate the first letter of the paragraph.

The float property also has spotty support. The width property was added to the following example in order to get float to work with Internet Explorer (and it still doesn’t function properly on a Mac). Without the float property, the capital letter will stand taller than the rest of the line, which may still be an acceptable effect. Figure 23.9 shows a drop cap created with the following style sheet code.

<STYLE TYPE="text/css"> <!-- .dropcap { font: bold 200% sans-serif; color: teal; width: 24pt; float: left; } --> </STYLE> <P><SPAN CLASS="dropcap">F</SPAN> or those frustrated...</P> ...

Get Web Design in a Nutshell now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.