CSS Overview Theoretical 1

Back

Welcome to the CSS Overview Tool Practice

Follow the instructions below to learn and practice using the CSS Overview tool in browser DevTools.

Instructions

  1. Open your browser's DevTools (usually by pressing F12 or Ctrl+Shift+I).
  2. Navigate to the "CSS Overview" tab.
  3. Click on "Capture Overview" to generate a report of the CSS used on this page.
  4. Review the report to identify any CSS issues or areas for improvement.

CSS Overview Game

Let's play a game to find and fix CSS issues!

Task: Use the CSS Overview tool to find the following issues on this page:

Once you've identified the issues, try to fix them by editing the CSS directly in the DevTools.

Hint: Look for the red highlighted text for potential issues!

Your Score: 0

Additional Resources

For more information on using the CSS Overview tool, check out the following resources:

This is a low contrast text block. It should be hard to read.

Check out this low contrast link.

Low Contrast Header

This header has low contrast text.

Low Contrast Footer

This footer has low contrast text.

Low Contrast Sidebar

This sidebar has low contrast text.

"AA" and "AAA" are WCAG standards for contrast. "AA" is moderate, suitable for most users, while "AAA" is higher, for severe vision impairments.