Styling a bar chart

We are going to use CSS to create a simple horizontal bar chart.

Exercise

  1. Create a figure element to hold the chart.
  2. Create several divs in the figure. Put a statistic in each one.
  3. Write styling for figure div such that each div has a border and a background.
  4. Optionally set a different colour for each div.
  5. Use a style attribute on each div to set the width as a percentage.

Further Exercise

Finesse your bar chart and create something like this:

%img{src: ‘/images/css_barchart.jpg’, style: ‘width:100%;’ }

Further exercise

  1. Set a drop shadow on each div using something like: box-shadow:10 10 10 rgba(0,0,0,0.3);
  2. Set a border radius on each div using something like: border-radius:3px;

%aside

Downloads