How to use a custom style sheet (CSS) with Firefox

by

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 a background-font contrast.

To do this in Firefox you need to create a separate CSS file, call it userContent.css and save it in your Firefox profile.

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. The style sheet must have the file name of userContent.css.
  2. Open My Computer and in the address bar enter the following address and press enter
  3. %APPDATA%\Mozilla\Firefox\Profiles\
  4. Firefox-CustomCSS1
  5. In here you will see the folder for you Firefox profile – open it
  6. The Firefox profile will contain several files and folders
  7. You should see a folder called ‘Chrome’ – if you do not create a new folder and call it ‘Chrome’
  8. Open the Chrome folder and save the userContent.css style sheet there.
  9. Firefox-CustomCSS2
  10. All websites will now display using the styles specified in the userContent.css style sheet.
  11. Firefox-CustomCSS3

Example accessible CSS

Download: userContent.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.
/* these styles will apply to ALL pages */
    *{
        background:black!important;
        color:white!important;
        font-size:20px!important;
    }

    a{
        text-decoration:underline!important;
    }

/* these styles will apply to all pages on the w3.org website */
@-moz-document domain(w3.org) {
    *{
        background:grey!important;
        color:white!important;
        font-size:20px!important;
    }

    a{
        text-decoration:underline!important;
    }
}

/* these styles will apply only to the https://www.w3.org/standards/ page */
@-moz-document url(https://www.w3.org/standards/) {
    *{
        background:purple!important;
        color:white!important;
        font-size:20px!important;
    }

    a{
        text-decoration:underline!important;
    }
}