1. Computing

Discuss in my forum

What is a User Style Sheet?

Why Should I Use a User Style Sheet?

By

Use Your Own Web Styles

Now, when I use a user style sheet, I am not setting up a situation where all the Web pages I visit look the same. Instead, I have a user style sheet that helps me to browse the Web. User style sheets allow you to set styles on page elements so that they are easier for you to read and use, regardless of what the Web page designer intended.

One of the things I have noticed is that many Web pages are built by younger people. These people seem to like fonts that are, well, microscopic. Using a user style sheet, I can set default font sizes to a font size that is more readable for me. Another popular trick by Web designers is to remove the underlines from links. While this may make the page look "nicer," it is harder to tell what is clickable. So with user style sheets, I put the underlines back on links on pages I visit.

Writing a User Style Sheet

Writing a user style sheet is as simple as writing a CSS style sheet for your Web page. You can use all the same properties and commands that you can in a standard style sheet. The trick to a user style sheet is that it's stored on your hard drive, and you tell your Web browser to use it. Depending upon which Web browser you use, the instructions for setting it up are different:

User Style Sheets and Accessibility

Adding back the underlines or making the fonts larger is a good start towards making the Web pages I visit more accessible to me, but with user style sheets, you can go even farther. For example, many Web designers still use the <b> and <i> elements on their pages rather than using the more semantic <strong> and <em>. If I were blind, using an auditory browser, the browser wouldn't know what to do with <b> and <i> as those don't have any semantic meaning. But with a user style sheet, I could define them to be pronounced audibly with a strong or emphasis, the same as their semantic counterparts.

Playing with User Style Sheets

The most common way to use user style sheets is to add the underline back to links. You would do this by simply adding the following CSS property to your user style sheet:

:link, :visited { text-decoration: underline ! important; }

Adding the "! important" to the end of the style is vital, because otherwise, the author defined style sheet will take precedence over your user style sheet.

Another useful trick with user style sheets is to make some of the more annoying tags less annoying. This style makes the blink tag and the marquee tags not blink or scroll:

blink { text-decoration: none ! important; }
 marquee { -moz-binding: none ! important; }

Web Designers: Keep This In Mind

You should remember that you have a user style sheet set when designing Web pages. Otherwise, you'll spend hours and hours trying to troubleshoot why you see underlines on all the links while everyone else on your team does not. You may laugh, but if you set the user style sheet today, and then change your Web site styles in six months, chances are you'll have forgotten you set a user style sheet.

What I do is have my standard profile that I browse the Web in and a default profile that I use to test my Web pages with. That way I can browse the Web how I'm most comfortable, but I also know how most people are going to see my Web page. If you insist on browsing with Internet Explorer, then you'll need to remember to turn off the user style sheets when testing your Web pages.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. User Style Sheets
  6. What is a User Style Sheet and Why Should I Use a User Style Sheet?

©2014 About.com. All rights reserved.