Skip to main content

Inline Styles

You've learned that CSS is how we add style. The next question is: where do we put the CSS code?

The easiest, fastest, and most immediate way to apply a style is by using Inline Styles. This method involves writing CSS rules directly inside the HTML element you want to style using the style attribute.


How to Write Inline Styles​

Inline styles are written directly within the starting tag of any HTML element.

The Syntax​

Inside the HTML tag, you use the style attribute, and its value is the CSS property and value, separated by a colon (:). If you have multiple styles, separate them with a semicolon (;).

index.html
<tagname style="property-1: value-1; property-2: value-2;">Content</tagname>

Basic Example​

Let's say you have a paragraph and you only want that specific paragraph to be red and large.

<h2 style="color: purple; border-bottom: 2px solid purple;">
  This Heading is Styled Inline
</h2>

<p style="color: red; font-size: 20px;">
  This text is styled inline. It's quick, but usually not the best practice.
</p>

Advantages and Disadvantages​

While inline styling is simple, it comes with significant drawbacks that make it unsuitable for large projects.

Advantages (When to Use It)​

  • Quick Fixes: Perfect for making a one-off change quickly to see an effect, especially when debugging.
  • Targeting: It only affects one specific element, which can be useful when you must override global styles (though there are better ways).
  • Email Templates: Inline styles are often required for styling HTML emails because many older email clients strip out external CSS files.

Disadvantages (Why to Avoid It)​

Separation of Concerns

Inline styles completely violate the golden rule of web development: Separation of Concerns. The visual style should never be mixed with the structural content (HTML).

  • Maintenance Nightmare: If you need to change the font size of 50 paragraphs, you have to edit 50 individual lines of HTML.
  • No Reusability: You cannot define a style once and apply it to multiple elements—you must repeat the style block for every element.
  • Performance: The browser has to read and render the style for every single tag, which can slow down page rendering compared to using an external stylesheet.
  • No Advanced CSS: You cannot use powerful CSS features like Media Queries (for responsiveness), Animations, or complex selectors with inline styles.

When Should I Use Inline Styles?​

Best Practice

For almost all web development projects, you should avoid inline styles and use an External Stylesheet (<link>) instead.

Think of inline styles as the last resort or the quick test environment.

SituationRecommended Action
Styling a whole websiteExternal Stylesheets (Next lesson!)
Quickly testing a color changeInline Style (Temporarily, then remove)
Building HTML Email TemplatesInline Style (Often required for compatibility)
Making responsive layoutsExternal CSS (Inline cannot do this)

Interactive Practice​

Try changing the properties in the live editor below!