CSS - HTML Elements Coverage

Print this lesson

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 20–30 minutes

Understand default browser (user agent) styles and set consistent, accessible baselines across elements.

Learning Objectives

Review default element styles and normalize where helpful.
Apply practical, readable defaults for text, tables, lists, code, etc.

Details & Examples

Headings & Paragraphs

h1,h2,h3{ line-height:1.2; margin: .8em 0 .4em; }
p{ margin:.6em 0; }

Links

a{ color: var(--accent); text-decoration: underline; }
a:hover{ text-decoration-thickness: 2px; }

Lists

ul,ol{ padding-left: 1.2em; }
li{ margin:.25em 0; }

Tables

table{ width:100%; border-collapse: collapse; }
th, td{ border:1px solid var(--border); padding:.5rem; text-align:left; }
caption{ caption-side: bottom; color: var(--muted); font-size:.9em; }

Code & Pre

code{ background: rgba(148,163,184,.15); padding:2px 6px; border-radius:6px; }
pre{ background:#0a0f1a; color:#e2e8f0; padding:14px 16px; border-radius:10px; }

Blockquote

blockquote{ border-left: 3px solid var(--border); padding-left: .8rem; color: var(--muted); font-style: italic; }

Details/Summary

details{ border:1px solid var(--border); border-radius:10px; padding:.4rem .6rem; background:rgba(148,163,184,.06); }
summary{ cursor:pointer; }

Checks for Understanding

Why normalize UA styles?

Show answers

To achieve consistent rendering across browsers and improve readability.

Exercises

Apply a baseline reset for headings, paragraphs, and lists; verify consistent spacing across modern browsers.
Style tables with collapsed borders, cell padding, and a caption; ensure readability in light and dark modes.