Applying css to html snippet

Applying css to html snippet

Hi,
I written some learning resources for my students for use on mobiles and have some accessibilty settings in my single page resources that allows the user to change the font size and background colour.

I have separated all the relevant stuff into this example page to demonstrate my working model.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<style type="text/css">
.txtwrapper {
font-size: 16px;
}
.bgcolour {
background-color: rgb(250,250,250);
}
#settings {
width: 200%;
}
</style>
<title>Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page" id="page" data-theme="c">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  <div data-role="content" class="txtwrapper bgcolour"> Some text here to see it working.
    <div><a data-role="button" href="#page1" data-icon="gear"
data-iconpos="left">Accessibility Settings</a></div>
  </div>
  <div data-role="footer">
    <h3>Footer</h3>
  </div>
</div>

<div  data-role="page" id="page1" data-add-back-btn="true">
  <div data-role="header">
    <h1>Accessibilty Settings</h1>
  </div>
  <div data-role="content" class="txtwrapper bgcolour">
    <div data-role="fieldcontain">
      <fieldset data-role="controlgroup">
        <legend>Font Size</legend>
        <input type="radio" name="fontsize" id="small" value="16px"  checked="checked"/>
        <label for="small">Small</label>
        <input type="radio" name="fontsize" id="medium" value="20px" />
        <label for="medium">Medium</label>
        <input type="radio" name="fontsize" id="large" value="24px"  />
        <label for="large">Large</label>
      </fieldset>
    </div>
    <div data-role="fieldcontain">
      <fieldset data-role="controlgroup">
        <legend>Bg Colour</legend>
        <input type="radio" name="colour" id="grey" value="rgb(250,250,250)"  checked="checked"/>
        <label for="grey">grey</label>
        <input type="radio" name="colour" id="cream" value="rgb(255,254,204)" />
        <label for="cream">cream</label>
        <input type="radio" name="colour" id="blue" value="rgb(197,255,255)"  />
        <label for="blue">blue</label>
      </fieldset>
    </div>
    Sample text showing how it will look. </div>
  <div data-role="footer">
    <h3>Footer</h3>
  </div>
</div>

<script>
$("input[type='radio']").on( "change", function(event, ui) {
    $("input[name*=fontsize]:checked").each(function() {
        $(".txtwrapper").css('font-size', $(this).val());
    });
    $("input[name*=colour]:checked").each(function() {
        $(".bgcolour").css('background-color', $(this).val());
    });
});
</script>
</body>
</html>

As I say above code works fine. My problem is that this functionality is in many different pages and if I want to add another font size or background colour I would have to edit lots of different single page resources.
So i am trying to separate the just the html code for "content" div of the accessibillity page into an external html file so I can just edit this and it will be pulled into all single page resources.
I can get the html snippet into the div ok but the font size or the background colour never change.

Here is the main page and the snippet being brought in.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<style type="text/css">
.txtwrapper {
font-size: 16px;
}
.bgcolour {
background-color: rgb(250,250,250);
}
#settings {
width: 200%;
}
</style>
<title>Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page" id="page" data-theme="c">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  <div data-role="content" class="txtwrapper bgcolour"> Some text here to see it working.
    <div><a data-role="button" href="#page1" data-icon="gear"
data-iconpos="left">Accessibility Settings</a></div>
  </div>
  <div data-role="footer">
    <h3>Footer</h3>
  </div>
</div>

<div  data-role="page" id="page1" data-add-back-btn="true">
  <div data-role="header">
    <h1>Accessibilty Settings</h1>
  </div>
  <div data-role="content" class="txtwrapper bgcolour" id="selectedTarget">
   /*HTML snippet here*/
    </div>
  <div data-role="footer">
    <h3>Footer</h3>
  </div>
</div>
<script>
$(document).ready(function(){
    $('#selectedTarget').load('accessSnippet.html');
});
</script>

<script>
$("input[type='radio']").on( "change", function(event, ui) {
    $("input[name*=fontsize]:checked").each(function() {
        $(".txtwrapper").css('font-size', $(this).val());
    });
    $("input[name*=colour]:checked").each(function() {
        $(".bgcolour").css('background-color', $(this).val());
    });
});
</script>
</body>
</html>

and the snippet

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Font Size</legend>
    <input type="radio" name="fontsize" id="small" value="16px"  checked="checked"/>
    <label for="small">Small</label>
    <input type="radio" name="fontsize" id="medium" value="20px" />
    <label for="medium">Medium</label>
    <input type="radio" name="fontsize" id="large" value="24px"  />
    <label for="large">Large</label>
  </fieldset>
</div>
<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Bg Colour</legend>
    <input type="radio" name="colour" id="grey" value="rgb(250,250,250)"  checked="checked"/>
    <label for="grey">grey</label>
    <input type="radio" name="colour" id="cream" value="rgb(255,254,204)" />
    <label for="cream">cream</label>
    <input type="radio" name="colour" id="blue" value="rgb(197,255,255)"  />
    <label for="blue">blue</label>
  </fieldset>
</div>
Sample text showing how it will look.

Any pointers guidance or help is greatly appreciated. Im pretty new to this so I'm riot sure if this is even going to be possible.
You guys were a great help getting me started a few months back so I was hoping to draw on your wealth of knowledge again.

Thanks.
Steve.