Decided I should use base.css and use accessible_graphics.css just for the extra requirements. Also made a change to the width attribute on the img tag to fully comply with the HTML5 specification.

Author: itsozz

accessible_graphics/resident_population_2018.html

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
         <meta charset="UTF-8"/>
 
+        <link rel="stylesheet" href="../css/base.css"/>
         <link rel="stylesheet" href="../css/accessible_graphics.css"/>
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%7CRoboto"/>
     </head>
@@ -15,7 +16,7 @@ <h1>Resident Population of Trafford</h1>
             <cite>Source: Mid-2018 population statistics, Office for National Statistics.</cite>
 
             <figure>
-                <img src="https://www.trafforddatalab.io/maps/static/output/trafford_population_2018.png" width="100%" alt="Map of Trafford showing the 21 wards coloured according to their mid-2018 population estimates."/>
+                <img src="https://www.trafforddatalab.io/maps/static/output/trafford_population_2018.png" width="600" alt="Map of Trafford showing the 21 wards coloured according to their mid-2018 population estimates."/>
                 <figcaption>
                     Broadheath ward located in the South of Trafford has the highest resident population in the borough with just over 14,000 people living there. The neighbouring ward of Altrincham is next with just 1,000 fewer residents. The Northern wards of Gorse Hill, Longford and Clifford also have relatively large populations of around 12,500 people. Bowdon ward in the South and Davyhulme East ward in the West of Trafford have the fewest residents, around 9,500 people living in each. The remaining 14 wards have between 10,000 and 12,000 residents.
                 </figcaption>

css/accessible_graphics.css

@@ -1,15 +1,5 @@
-body
-{
-    padding: 0;
-    margin: 0;
-    font-family: 'Open Sans', sans-serif;
-    color: #212121;
-}
-
 h1
 {
-    font-family: 'Roboto', sans-serif;
-    color: #707070;
     margin-bottom: 0.1em;   /* to make the heading closer to the citation text */
 }
 
@@ -25,9 +15,8 @@ cite
 
 img
 {
-    border: 0;
     max-height: 100vh;  /* we want the graphic to be completely visible in the full height of the display */
-    max-width: 90vw;    /* we also want the graphic to be completely visible in the width of the display with out scrolling - NOTE: the img has a width attribute set to 100% to prevent it appearing full size if the page is rendered without CSS */
+    max-width: 90vw;    /* we also want the graphic to be completely visible in the width of the display with out scrolling - NOTE: the img should also have a width attribute set to 600 pixels to prevent it appearing full size if the page is rendered without CSS */
     width: auto;
     display: block;
     margin: auto;