Add Jquery and Css in Wordpress

i want to put this html im my wordpress... I use page builer so i put it in my page.. How can i connect it with my jquery as well as with my Css? I am trying to put a lightbox in Wordpress. Im a newbie in Wordpress.. Can you please help me? Thanks in advance. ( Sorry if my English are bad :) )

Html code:

 <div class="frontleft">
 <a class="fancybox" rel="group" href="./images/frontpages/large/wratwnspor.jpg" title="Ωρα των σπορ"><img class="f1" src="./images/frontpages/small/wratwnspor.jpg" alt="Ωρα των σπορ"></a>   
 <a class="fancybox" rel="group" href="./images/frontpages/large/goal.jpg" title="Goal"><img class="f2" src="./images/frontpages/small/goal.jpg" alt="goal"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/sportday.jpg" title="Sportday"><img class="f3" src="./images/frontpages/small/sportday.jpg" alt="sportday"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/larg/live.jpg" title="Live"><img class="f4" src="./images/frontpages/small/live.jpg" alt="live"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/fwstwnspor.jpg" title="Φως των σπορ"><img class="f4" src="./images/frontpages/small/fwstwnspor.jpg" alt="Φως των σπορ"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/protathlitis.jpg" title="Προταθλητης"><img class="f4" src="./images/frontpages/small/protathlitis.jpg" alt="Προταθλητης"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/gauros.jpg" title="Γαυρος"><img class="f4" src="./images/frontpages/small/gauros.jpg" alt="Γαυρος"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/prasinh.jpg" title="Πρασινη"><img class="f4" src="./images/frontpages/small/prasinh.jpg" alt="Πρασινη"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/gata.jpg" title="Γατα"><img class="f4" src="./images/frontpages/small/gata.jpg" alt="Γατα"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/arena.jpg" title="Αρενα"><img class="f4" src="./images/frontpages/small/arena.jpg" alt="Αρενα"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/provlepseis.jpg" title="Προβλεψεις"><img class="f4" src="./images/frontpages/small/provlepseis.jpg" alt="Προβλεψεις"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/pamestoixima.jpg" title="Παμε Στοιχημα"><img class="f4" src="./images/frontpages/small/pamestoixima.jpg" alt="Παμε Στοιχημα"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/kingbet.jpg" title="Kingbet"><img class="f4" src="./images/frontpages/small/kingbet.jpg" alt="Kingbet"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/matchmoney.jpg" title="matchmoney"><img class="f4" src="./images/frontpages/small/matchmoney.jpg" alt="matchmoney"></a>
</div>

My JQuery code:

      <script type="text/javascript">
        $(document).ready(function() {
        $(".fancybox").fancybox();
        });
    </script>

And i wanna link my jquery as well css... Where should i put my files as well..

    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>


<!-- FancyBox -->
    <script src="js/fancybox/jquery.fancybox.js"></script>
    <script src="js/fancybox/jquery.fancybox-buttons.js"></script>
    <script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
    <script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
    <script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

   CSS:
         <link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
    <link rel="stylesheet" href="./css/newspaperstyle.css" type="text/css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">