7. Core Selectors: Type Selectors (Element Selectors)

Type Selectors (or Element Selectors) are the most fundamental selectors. They target all instances of a specific HTML element type.

How Type Selectors Work

To select all paragraphs, you use p. To select all links, you use a. The selector name is simply the name of the HTML tag without the angle brackets (<>).

html

Main Title

First paragraph.

Second paragraph, also styled.

A container.

CSS Examples

Targeting the <h1> element:

css h1 { color: #333; /* Dark gray */ border-bottom: 2px solid #ccc; }

Targeting all <p> elements:

css p { font-size: 16px; line-height: 1.5; margin-bottom: 15px; }

Targeting the <body> element (often used for global styles):

css body { background-color: ghostwhite; }

Advantages

Simplicity: Easy to write and understand.
Global Reach: Perfect for setting default styles for generic content elements (like how all p tags should look).

Caution: If you want different paragraphs on the same page to look different, the Type Selector is too broad. This is where Class and ID selectors come in.