css - Inline Style

Inline CSS is a way of applying styles directly to an individual HTML element using the style attribute.

Syntax:

Inline CSS is written inside the opening tag of an HTML element:

html
example:
<p style="color: blue; font-size: 16px;">This is a paragraph.</p>

Key Points:

  • Location: Inside the HTML tag using the style attribute.

  • Format:

     
    style="property: value; property2: value2;"

  • Overrides: Inline styles have the highest priority in the CSS cascade (unless !important is used elsewhere), so they override styles from internal or external stylesheets.

Example:

html
 
<h1 style="color: red; text-align: center;">Welcome!</h1>

This will make the <h1> text red and center-aligned.

Pros:

  • Quick for small changes.

  • Good for testing or debugging.

Cons:

  • Not reusable.

  • Clutters HTML.

  • Harder to maintain and scale in large projects.

When to Use:

 

  • Simple styling in small projects or emails.

  • Temporary or test styles.

  • When you absolutely need to override other CSS (though not recommended long-term).