Element Selectors: Tag-Based Styling and Resets

Master CSS Element Selectors. Learn how to style HTML tags directly, configure global resets, and group tag styles.

Introduction

Every browser (Chrome, Firefox, Safari) has a built-in stylesheet called the User Agent Stylesheet. When you load a plain HTML page with no CSS, this stylesheet is what makes <h1> tags large and bold, adds bullet points to <li> tags, and injects margins around the <body>.

To control your website's layout, you must override these browser defaults. This is done using Element Selectors (also known as Tag Selectors). Element selectors target HTML tags directly, allowing you to establish global style baselines for typography, margins, and layouts.

What You Will Learn

How to write element selectors targeting HTML tags directly.
The concept of Group Selectors to keep stylesheets DRY (Don't Repeat Yourself).
Why and how to use global style Resets (like Box-sizing and Margin resets).
Best practices for setting typography baselines.

Prerequisites

CSS Selectors: How to Target HTML Elements

Detailed Explanation: Element & Grouping Selectors

Element selectors target all instances of a specific HTML tag on a page:

/* Targets all paragraph tags */
p {
  color: #334155;
  font-size: 16px;
}

Grouping Selectors

If you want to apply the same font family and color to multiple headings, instead of writing:

/* Bad: Code Duplication */
h1 { font-family: sans-serif; color: blue; }
h2 { font-family: sans-serif; color: blue; }
h3 { font-family: sans-serif; color: blue; }

You can group selectors by separating them with commas (,):

/* Good: Grouped Selectors */
h1, h2, h3 {
  font-family: sans-serif;
  color: blue;
}

Note: A single typo in a grouped selector (like forgetting a comma) can invalidate the entire block. Ensure commas are placed correctly.

Global Resets

Different browsers have slightly different default margins and paddings for headers, lists, and body tags. This causes websites to look inconsistent across devices.

To prevent this, developers run a CSS Reset at the very top of their stylesheets to clear all browser margins and paddings:

/* Global Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Changes how widths are calculated */
}

Visual Learning Diagram (Mermaid)

graph TD
    UserAgent[User Agent Stylesheet <br> Browser Defaults: margins, padding] -->|Overwritten by| Resets[CSS Global Resets: * margin: 0]
    Resets -->|Styled by| Element[Element Selectors: body, p, h1]
    Element -->|Customized by| Classes[Class Selectors: .card, .btn]

Code Examples

Example 1: Global Baseline styling

Here is how to set up baseline styling for a clean blog document:

/* Reset margins and set font on body */
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}

/* Group headings for styling */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* Style main copy paragraphs */
p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Style lists */
ul, ol {
  margin-left: 20px;
  margin-bottom: 20px;
}

Example 2: Resetting Button Elements

Browsers render <button> elements with ugly gray borders and gradients. We can reset them globally using element selectors:

button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

Summary

Element selectors target HTML tags globally to override default User Agent Stylesheets. By grouping selectors using commas and applying global resets at the top of stylesheets, developers build a consistent, cross-browser design baseline.

Next Tutorial

How do we apply reusable classes to target specific groups of elements without styling the entire tag? Let's check: Class Selectors.

← Back to Syllabus