Skip navigation.

writing, editing, and copywriting services at meryl.net

meryl.net articles

home | about | blog | contact

Blast Sites with User CSS Sheets

Have you recently converted your Web site to rely on CSS (Cascading Style Sheets)? Did you take over someone else's job after they left the company? Do you want to know what others have done on their Web site without having to crawl through the "View Source?" All you need is a modern browser and a text editor to make use of a powerful tool that will make you wonder why you never thought of it before. Creating your own user style sheets gives you the ability to: Before you create your own CSS files to use for testing, let's review the CSS rules. When on a typical Web site using the normal CSS rules, the Web site author's CSS rules take precedence over the user's styles. However, if you add "!important" to your CSS sheets, they will override the author's CSS. One of the more common legacy markups is the use of FONT around the content throughout the Web page. It's the first thing most Web designers replace with CSS. Even using FIND / REPLACE, it's possible to overlook some leftover FONT tags within the HTML document. To test for remaining FONT tags, create a short CSS file in a text editor as follows or download the files and bookmarklets:
font, font * {
font-weight: bold !important; 
background: red !important; 
color: yellow !important; 
padding: 0.25em !important
}
The * (asterisk) indicates a selection of all elements that descend from a font element. If the author has wrapped font around a link, this rule will select it. Save the file as "font.css" without the quotation marks. Be sure to use "!important" after each element to ensure it overrides the Web site's CSS markup. See a screenshot. In Internet Explorer, go to TOOLS > INTERNET OPTIONS > ACCESSIBILITY > Click the box beneath USER STYLE SHEET to "format documents using my style sheet" and use BROWSE to find the font.css file you just created. Netscape 6+ requires you have a user profile set up in advance. Enter your Web site or other URL to test out the font.css file. Whenever you see RED highlights with yellow text, it indicates the text is marked up with the <FONT> tag. If the text is highlighted in red with yellow text, this is a link that has the <FONT> tag. To test to see how the tags balance, put a border on everything. Create another style sheet with the following:
* {
border: 1px solid red !important;
padding: 0.5em !important;
margin: 0.5em !important
}
Save the file and select it as the user style sheet. Enter the URL and see all the solid red lines, which indicate the elements within the page. One of the most valuable tools for making images accessible to users with sight impairments is the use of ALT within the <IMG> tag. Use CSS to help you identify images that have ALT text. Create and save another file using the following:
img {
visibility: hidden !important;
}
img[alt] {
visibility: visible !important;
}
img[alt=""] {
visibility: hidden !important;
}
This will hide images that have the ALT text included in the source code. However, it will only work in Mozilla and derivatives (such as Netscape). Explorer doesn't yet support attribute selectors so the ALT-hider will fail, but you can utilize other attributes to identify image-related issues. It's also a way to see how users who have graphics turned off view your page. Instead of using HIDDEN / VISIBLE, change the CSS to use borders or other color items to identify the images. CSS can help you identify JavaScript code to see how well your Web page works for users who have JavaScript turned off. If you use banner ads, you may want to test your page by hiding the banner because users often ignore such ads. Change the height and width of your page to see how it would view on a handheld device or WebTV. These are just a few of the many ways to use CSS to test, find tags, or view page layout. After creating the various CSS test files, save them for later use. CSS makes it effortless to change colors, visibility, and sizes of everything on a page. Unleash the quick, cheap, and easy power of CSS whenever you're ready to make the leap from HTML to XHTML compliance, redesign your pages with CSS or other tools, ensure accessibility for all visitors, or conduct usability testing. Thanks to Eric Meyer for introducing this amazing tool and helping with the article.

Posted February 18, 2002 09:48 AM :: Tags: :: Category: Web Design


Comments

I think now a days CSS is more often used to check the font size.Use of H1 is important for Search Engine Optimization but loooks ugly otherwise hence the use of CSS is more prominent.

Posted by: search engine optimization at October 13, 2003 08:09 AM

Right, I tried...


img[alt] {visibility: hidden}


in IE to hide alt text from appearing and it didn't work.

Posted by: SuzieQ at October 19, 2003 10:07 PM

Hi, what does difference between Mozilla and IE a concern application development?

Posted by: Carlos Magno at February 18, 2004 07:56 AM

I want let everybody know that this article is really worth reading on behalf of our company programmers, who found it very useful when we just started our business.

Posted by: Web Design at March 16, 2004 07:04 PM
home | about | privacy policy | blog | contact

© meryl.net

Creative Commons License