CSS Font Style Override Test

Browsers includes various options for overriding the styles that are built into web pages. This page was created for testing those features.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The following styles are in effect for the above paragraph:

#test { 
  font-family: sans-serif !important;
  font-style: italic;
  font-size: 1.4em !important;
  font-weight: bold;
  color: #663300 !important; /* brown */ 
  background-color: #CCFFCC !important; /* pale green */
  letter-spacing: 0.25em;
  word-spacing: 0.25em;
  line-height: 2em;
  text-align: justify;
  text-transform: uppercase;
  text-decoration: underline;
  border: 2px solid #663300;
  padding: 1em;
}

Observations

• Firefox allows users to override font-family and font-size by choosing options within Preferences. None of the other styles are effected.
• Internet Explorer provides a check box to "Ignore colors specified on web pages". This option by default results in color as black and background-color as white (or whatever color is default in the user's color scheme).
• Internet Explorer also provides a check box to "Ignore font styles specified on web pages". This option applies only to font-family. None of the other font or text styles are affected.
• Internet Explorer also provides a check box to "Ignore font sizes specified on web pages". This option, as expected, applies only to font-size.
• If any of the affected CSS properties is flagged as !important in the author's CSS, these styles are still overridden by a check in any of the above checkboxes, as they should be.
• Internet Explorer also provides an option to use a custom user-defined CSS style sheet. If the custom style sheet includes all of the above style properties, each successfully overrides the web author's style if each style definition is flagged as !important.
• If any of IE's Accessibility checkboxes are checked in addition to having a user-defined style sheet enabled, the user-defined style sheet takes precedence.
• It is not easy to switch between user-defined style sheets. If one style sheet is replaced with another, IE continues to use the earlier style sheet. There are references to this bug online that suggest restarting the browser, but I found (using IE11 in Windows 8.1) that I had to restart the computer in order to get my new style sheet to take effect.