Retour au cours

Lesson 7: Core Selectors: Type Selectors (Element Selectors)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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.