title: How to include CSS inside a JavaScript file
body: <p>I'm a newbie to HTML, CSS and JS. Currently I'm working on JavaScript to create a pie chart. My doubt is how can I include a CSS <code>hover</code> function within a function.</p>
  <p>Can anyone help me include CSS <code>hover</code> inside a function in the JavaScript code below?</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      function PieChart(id, o) {
          this.includeLabels = true;
          if (o.includeLabels == undefined) {
              this.includeLabels = false;
          }
          else {
              this.includeLabels = o.includeLabels;
          }
          this.data = o.data ? o.data : [30, 70, 45, 65, 20, 130]; 
          this.labels = o.labels ? o.labels : [&quot;First&quot;, &quot;Second&quot;, &quot;Third&quot;, &quot;Fourth&quot;, &quot;Fifth&quot;, &quot;Sixth&quot;];
          this.colors = o.colors ? o.colors : [
                  [&quot;#bbddb3&quot;, &quot;#1d8e04&quot;], // green
                  [&quot;#e2f5b4&quot;, &quot;#9edd08&quot;], // yellow green
                  [&quot;#fdfbb4&quot;, &quot;#faf406&quot;], // yellow
                  [&quot;#fbd4b7&quot;, &quot;#f2700f&quot;], // orange
                  [&quot;#f8bdb4&quot;, &quot;#ea2507&quot;], // red
                  [&quot;#e2bcbd&quot;, &quot;#9e2126&quot;]  // purple
              ];
      
          this.canvas = document.getElementById(id);
      }
      
      PieChart.prototype = {
      
          select: function(segment) {
              var self = this;
              var context = this.canvas.getContext(&quot;2d&quot;);
              this.drawSegment(this.canvas, context, segment, this.data[segment], true, this.includeLabels);
          },
          draw: function() {
      
              var self = this;
              var context = this.canvas.getContext(&quot;2d&quot;);
              for (var i = 0; i &lt; this.data.length; i++) {
              this.drawSegment(this.canvas, context, i, this.data[i], true, this.includeLabels);
              }
          },
      
          drawSegment: function(canvas, context, i, size, isSelected, includeLabels) {
              var self = this;
              context.save();
              var centerX = Math.floor(canvas.width / 2);
              var centerY = Math.floor(canvas.height / 2);
              radius = Math.floor(canvas.width / 2);
      
              var startingAngle = self.degreesToRadians(self.sumTo(self.data, i));
              var arcSize = self.degreesToRadians(size);
              var endingAngle = startingAngle + arcSize;
      
              context.beginPath();
              context.moveTo(centerX, centerY);
              context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
              context.closePath();
      
              isSelected ? 
                  context.fillStyle = self.colors[i][1] :
                  context.fillStyle = self.colors[i][0];
      
              context.fill();
              context.restore();
      
              if (includeLabels &amp;&amp; (self.labels.length &gt; i)) {
                  self.drawSegmentLabel(canvas, context, i, isSelected);
                  
              }
          },
      
          drawSegmentLabel: function(canvas, context, i, isSelected) {
              var self = this;
              context.save();
              var x = Math.floor(canvas.width / 2);
              var y = Math.floor(canvas.height / 2);
              var angle = self.degreesToRadians(self.sumTo(self.data, i));
      
              context.translate(x, y);
              context.rotate(angle);
              context.textAlign = 'center';
              var fontSize = Math.floor(canvas.height / 25);
              context.font = fontSize + &quot;pt Helvetica&quot;;
      
              var dx = Math.floor(canvas.width * 0.5) - 100;
              var dy = Math.floor(canvas.height * 0.05);
              context.fillText(self.labels[i], dx, dy+dy);
              alert(self.labels[i]);
              context.restore();
          },
      
          drawLabel: function(i) {
              var self = this;
              var context = this.canvas.getContext(&quot;2d&quot;);
              var size = self.data[i];
      
              self.drawSegmentLabel(this.canvas, context, i, size, true);
              
          },
      
          degreesToRadians: function(degrees) {
          return (degrees * Math.PI)/180;
          },
      
          sumTo: function(a, i) {
              var sum = 0;
              for (var j = 0; j &lt; i; j++) {
                  sum += a[j];
              }
              return sum;
          }
      
      
      }
  &lt;/script&gt;
  </code></pre>