Unable to send jquery variable to php script $.ajax is not a function error [duplicate]

Hi I am trying to update my css file by using a combination of php ajax and jquery, I am doing it like this as I want users to be able to download the css file with the modified values in it. However I am getting an

$.ajax is not a function

error in my code and I'm not exactly sure why, I have included the full jquery library in my code, I have tried using jQuery.ajax instead of $.ajax but this still hasnt resolved it.

this is the version of jquery i am using

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

this is my code

 $(document).ready(function(){   
   $("#colorpicker").on("change",function(){
     var backgroundColour = $(this).val();
     console.log(backgroundColour);

     $.ajax({url: "styles.php", type: "post", data: backgroundColour});

  });
 });