CSS: Formatting Visual Data

with Joseph Lowery
please wait ...
CSS: Formatting Visual Data
Video duration: 0s 1h 37m Intermediate


Having a complete toolbox at your disposal to properly structure and display data is critically important to a successful web design. In this course, author Joseph Lowery covers basic styling for numbered, bulleted, and definition lists, plus structuring and formatting tables with CSS. He also includes instructions on creating charts and graphs with the HTML5 Canvas element. Each section of the course highlights advanced CSS, HTML5, and JavaScript techniques that increase interactivity, yield responsive designs, and heighten the user experience.

Topics include:
  • Adding custom number characters to lists
  • Managing hanging indents
  • Styling nested lists
  • Understanding definition lists
  • Highlighting table content
  • Creating alternating row colors (zebra stripes)
  • Building bar graphs and pie charts


- [Voiceover] Hi, I'm Joe Lowery. Thanks for joining me for CSS Formatting Visual Data. In this course, we're gonna be examining how you can optimally style your data for the web. So that it best represents your information and meshes visually with a look and feel of your site. We'll cover the gamut of data structures from the straightforward ordered and unordered list to the wildly underused definition list. We'll also examine the workhorse of structural data, tables. In addition to demonstrating core techniques, we'll explore many more advanced options including custom numbering with trailing characters, image bullets, zebra-striping, and responsive tables.

Finally, we'll take a look at using the HTML5 Canvas element to visualize our data. With Canvas, we can build bar charts, pie charts, and even Venn diagrams and so we will. Ready to bring a little sparkle to your data? Me too, let's get started.

please wait ...