custom css

Hello community, so there i have a problem with adding custom css code to my javascript , I have added this javascript in my header.php file

<script type="text/javascript">
$ = jQuery;

$(function(){
  var introguide = introJs();
  // var startbtn   = $('#startdemotour');

  introguide.setOptions({
    steps: [
    {
      element: '.menu-item-1488',
      intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',
      position: 'bottom'
    },
    {
      element: '.menu-item-1488',
      intro: 'Click this main logo to view a list of all Hongkiat demos.',
      position: 'bottom'
    },
    {
      element: '.menu-item-1488',
      intro: 'Hover over each title to display a longer description.',
      position: 'bottom'
    },
    {
      element: '.readtutorial a',
      intro: 'Click this orange button to view the tutorial article in a new tab.',
      position: 'right'
    },
    {
      element: '.nav-menu',
      intro: "Each demo will link to the previous & next entries.",
      position: 'bottom'
    }
    ]
  });

  introguide.start();

});
</script>

and in order for it to work i have to include theese also

<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/demo-style.css">
<link rel="stylesheet" type="text/css" href="/css/introjs.css">

But if i add this to my header, whole page depends on theese css files , and my layout gets all fuzzy , sorry for noobish questions and thank you for help!