Skip to content

inline.mdx

Latest commit

 

History

History
109 lines (75 loc) · 4.15 KB

inline.mdx

File metadata and controls

109 lines (75 loc) · 4.15 KB
title Inline Styles
description Learn how to apply CSS directly to HTML elements using the style attribute. Understand the advantages, disadvantages, and when to use inline styles.
keyword
CSS Inline Style
HTML style attribute
CSS basics
Frontend Styling
Inline vs External CSS
tags
CSS Inline Style
HTML style attribute
CSS basics
Frontend Styling
Inline vs External CSS
sidebar_label 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 (;).

<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>

This Heading is Styled Inline

This text is styled inline. It's quick, but usually not the best practice.

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)

:::danger 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?

:::tip 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.

Situation Recommended Action
Styling a whole website External Stylesheets (Next lesson!)
Quickly testing a color change Inline Style (Temporarily, then remove)
Building HTML Email Templates Inline Style (Often required for compatibility)
Making responsive layouts External CSS (Inline cannot do this)

Interactive Practice

Try changing the properties in the live editor below!