How to use a custom style sheet (CSS) with Internet Explorer

Modern internet browsers have the ability to use a custom style sheet to override the styles on all websites.

This feature can be used to make websites more accessible for people with vision impairments that require specific background-font contrasts.

With Internet Explorer you need to create a separate CSS file, for example MyStyle.css and configure Internet Explorer to use it.

The steps below detail how to do this.

  1. To start you will need a CSS style sheet with the customisations you require – see below if you do not have one.
  2. Save the custom style sheet to a safe location, somewhere it can stay without being deleted, for example in the C:\ directory.
  3. InternetExplorer-CustomCSS1
  4. With Internet Explorer open, click on the cog icon at the top right of the window then select ‘Internet options’
  5. InternetExplorer-CustomCSS2
  6. Click on the ‘Accessibility’ button
  7. InternetExplorer-CustomCSS3
  8. Place a tick next to ‘Format documents using my style sheet’
  9. Use the ‘Browse’ button to browse and select the custom style sheet.
  10. InternetExplorer-CustomCSS4
  11. Click ‘OK’ and ‘OK’ again to save the changes and close the windows.
  12. All websites will now display using the styles specified in the MyStyles.css style sheet.
  13. InternetExplorer-CustomCSS5

Looking for how to do with with Firefox? Check out How to use a custom style sheet (CSS) with Firefox

Example accessible CSS

Sample (right-click and choose ‘save as’): MyStyle.css

The code below has two parts-

  1. the asterisk that applies to all elements – the styles are black backgrond, white font and size 20px font.
  2. and a that applies to all links – the style makes links show with the underline, making links clearly displayed.
* {
 background: black !important;
 color: white !important;
 font-size: 20px !important;
 }
a {
 text-decoration: underline !important;
 }