How can you apply inline styles in HTML?

Difficulty: 2/10

style attribute, specificity, maintainability

Applying Inline Styles in HTML

Inline styles in HTML allow you to apply CSS rules directly to an individual element using the style attribute. This method affects only the specific element where the style is applied.

Key Points About Inline Styles

1
Use the style attribute inside an HTML tag to define CSS properties.
2
Multiple CSS properties can be applied, separated by semicolons.
3
Inline styles override external and internal CSS unless !important is used elsewhere.

Example Usage

In short: Inline styles are useful for quick, element-specific styling, but for maintainability and consistency, internal or external CSS is generally preferred.

Scenario Questions

0-2 years experience

1We have a simple landing page and need a button that is red with white text, but we can't edit the CSS file. How would you make that happen using only HTML?
2If you add style="margin-top:10px;" to a <p> tag, what will the rendered page look like compared to adding the same rule in a stylesheet?

2-5 years experience

1You inherited a feature where some elements have inline background colors that aren't matching the new design system. How would you go about fixing it without breaking existing functionality?

Follow-up Questions

What are the pros and cons of using inline styles versus external stylesheets?
How does CSS specificity affect an element styled inline?
Can you think of scenarios where inline styles could cause security or performance concerns?