- Element Selectors: Target specific elements (e.g.,
div, p, h1).
Syntax: element-name {}
- Class Selectors: Target elements with a specific class attribute.
Syntax:
.class-name {}
- ID Selectors: Target elements with a specific ID attribute. Unique within the page.
Syntax:
#id-name {}
- Attribute Selectors: Target elements based on specific attribute values.
Syntax:
[attribute-name="value"] {}
- Universal Selector: Matches all elements.
Syntax:
* {}
- Descendant Selectors: Selects elements nested within others.
Syntax:
ancestor-element descendant-element {}
- Child Selectors: Selects elements immediately nested within others.
Syntax:
parent-element > child-element {}
Example:
To style the <p> elements with the class "paragraph":
.paragraph {
color: blue;
font-size: 1.2rem;
}