HTML/CSS: id, div, class & Inline Styling

Understanding the core building blocks of web styling

The ID Selector

• Unique identifier for one specific element
• Defined with a # prefix in CSS
• Used with id="name" in HTML
• Highest specificity in CSS (over classes and tags)
• Ideal for unique page sections or elements

Example:

<!-- HTML --> <div id="header">Website Header</div> /* CSS */ #header { background-color: #3498db; padding: 20px; color: white; }

Tip: Each id must be unique within a page. Use for elements that appear only once.

The DIV Element

• A block-level container element
• Used for grouping content
• Has no inherent styling or semantic meaning
• Essential for layout structure
• Often combined with classes for styling

Example:

<div class="container"> <div class="row"> <div class="column">Left Column</div> <div class="column">Right Column</div> </div> </div> /* CSS */ .container { width: 100%; max-width: 1200px; margin: 0 auto; } .row { display: flex; } .column { flex: 1; padding: 15px; }

Tip: Use divs for layout structure and grouping, but prefer semantic HTML5 elements (header, section, article) when appropriate.

The CLASS Selector

• Used for multiple elements with shared styling
• Defined with a . prefix in CSS
• Applied with class="name" in HTML
• Elements can have multiple classes
• Perfect for reusable components and styles

Example:

<!-- HTML --> <button class="btn primary">Primary</button> <button class="btn secondary">Secondary</button> /* CSS */ .btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } .primary { background-color: #3498db; color: white; } .secondary { background-color: #e74c3c; color: white; }

Tip: Use classes for styling multiple elements. They promote reusable CSS and cleaner HTML.

Inline Styling

• Applied directly to an element with the style attribute
• Uses style="property: value;" syntax
• Has the highest specificity in CSS
• Best for quick overrides and testing
• Generally not recommended for production

Example:

<!-- HTML --> <div style="color: #e74c3c; font-weight: bold; padding: 10px; border: 1px solid #c0392b;"> This text is styled with inline CSS </div>

Tip: Avoid inline styles for production code. They make maintenance difficult and override external stylesheets.

Visual Examples

ID Example
#unique-element

DIV Example
Block Container

CLASS Example
.reusable-style

INLINE Example
style="..."

Comparison of Selectors

Selector Type	Syntax	Use Case	Specificity	Reusability
ID	#identifier	Unique elements	Highest (100)	Low (single use)
Class	.classname	Reusable styles	Medium (10)	High
DIV	div	Structural containers	Low (1)	High
Inline	style="..."	Quick overrides	Maximum (1000)	None

Best Practices Summary:

• Use classes for styling multiple elements
• Reserve IDs for unique elements that require JavaScript hooks or anchor links
• Use divs for structural purposes but prefer semantic HTML5 elements
• Avoid inline styles except for quick testing or dynamic styles generated by JavaScript
• Remember CSS specificity: Inline > ID > Class > Element

HTML/CSS Selectors Guide | Understanding id, div, class & Inline Styling

Created with HTML, CSS, and best practices