02. Inline CSS
Introduction
Section titled “Introduction”Inline CSS applies styles directly to HTML elements using the style attribute. While convenient for quick styling, inline styles have limitations and should be used sparingly. Understanding when and how to use inline CSS helps maintain clean, maintainable code.
Basic Usage
Section titled “Basic Usage”<p style="color: red; font-size: 18px;">Red text</p>Multiple Properties
Section titled “Multiple Properties”<div style="background-color: blue; color: white; padding: 20px;"> Styled div</div>When to Use
Section titled “When to Use”Quick Testing
Section titled “Quick Testing”<div style="border: 1px solid red;">Testing</div>Dynamic Styles
Section titled “Dynamic Styles”<div style="background-color: var(--bg-color);"> Dynamic styling</div>Email HTML
Section titled “Email HTML”<p style="color: #333; font-family: Arial;">Email content</p>Limitations
Section titled “Limitations”No Reusability
Section titled “No Reusability”Styles can’t be reused:
<!-- Repeated styles --><p style="color: blue;">Text 1</p><p style="color: blue;">Text 2</p>Hard to Maintain
Section titled “Hard to Maintain”Difficult to update:
<!-- Change color in many places --><p style="color: blue;">Text</p>No Pseudo-classes
Section titled “No Pseudo-classes”Can’t use :hover, :focus, etc.:
<!-- No hover effect possible --><a style="color: blue;">Link</a>Best Practices
Section titled “Best Practices”Use Sparingly
Section titled “Use Sparingly”<!-- Good: For dynamic or one-off styles --><div style="display: none;" id="hidden">Content</div>
<!-- Avoid: For repeated styles --><p style="color: blue;">Text</p><p style="color: blue;">More text</p>Prefer External CSS
Section titled “Prefer External CSS”<!-- Good: External CSS --><link rel="stylesheet" href="styles.css">
<!-- Avoid: Inline for everything --><div style="...">Content</div>