How to Create and Style Tags in CSS: Simple Guide

In CSS, you create styles for HTML tags by writing a selector that matches the tag name, like p for paragraphs. Then, you add style rules inside curly braces { } to change how those tags look on the page.

Syntax

The basic syntax to create a CSS rule for an HTML tag is:

• selector: the HTML tag name you want to style (e.g., p, h1).
• { }: curly braces that contain the style declarations.
• property: value;: style settings inside the braces that define how the tag looks.

css

selector {
  property: value;
  property2: value2;
}

Example

This example shows how to style all paragraph (p) tags with blue text and a larger font size.

css

p {
  color: blue;
  font-size: 1.5rem;
}

Output

All paragraphs on the page will appear with blue text and larger font size.

Common Pitfalls

Common mistakes when creating CSS tags include:

• Forgetting to use the correct tag name as the selector.
• Missing curly braces { } around style rules.
• Not ending each property with a semicolon ;.
• Confusing tag selectors with class or ID selectors (which use . or #).

css

/* Wrong: missing braces and semicolons */
p
  color: red;
  font-size: 20px;

/* Right: correct syntax */
p {
  color: red;
  font-size: 20px;
}

Quick Reference

Selector	Description	Example
p	Selects all paragraph tags	p { color: green; }
h1	Selects all level 1 headings	h1 { font-weight: bold; }
a	Selects all links	a { text-decoration: none; }
div	Selects all div containers	div { margin: 1rem; }

Key Takeaways

Use the HTML tag name as the CSS selector to style all tags of that type.

Always wrap style rules inside curly braces { } and end each property with a semicolon.

Tag selectors apply styles to every matching tag on the page.

Do not confuse tag selectors with class (.) or ID (#) selectors.

Check syntax carefully to avoid common mistakes like missing braces or semicolons.