title: Style of axis tick labels in d3.js
body: <p>The following script creates a point scale axis with three labels and a title. The body css selector defines the font-family and font-size of all text elements in the body. While the axis title is influenced by the css rules, the axis tick labels are not, although they are themselves text elements. I know I can set the tick label style using the .axis text selector. Maybe I am missing something obvious here, but what prevents the tick labels from being rendered with the body selector?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;script src="d3.min.V4.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  
  body {
    font-family: Courier;
    font-size: 18px;
  }
  
  &lt;/style&gt;
  
  &lt;body&gt;
  
  &lt;/body&gt;
  
  &lt;script&gt;
  
  var margin = {top: 20, right: 60, bottom: 40, left: 70},
      width = 600,
      height = 100;
  
  var svg = d3.select('body').append('svg')
                         .attr('width', width)
                         .attr('height', height);
  
  var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]);
  
  // Add the x Axis
   svg.append("g")
       .attr("transform", "translate(0," + (height - margin.bottom) + ")")
       .attr("class", "axis")
     .call(d3.axisBottom(xScale)
       );
  
  //x axis title
  svg.append('text')
     .text('Colors')
     .attr('x', width/2)
     .attr('y', height - 5)
     .style("text-anchor", "middle");
  
  
  &lt;/script&gt;
  </code></pre>