The style Attribute

The `style` Attribute

Global Attribute

The style attribute allows you to apply CSS styles directly to an HTML element using inline CSS declarations. While convenient for quick styling and dynamic changes, it should be used sparingly in favor of external stylesheets.

Syntax

<element style="property: value; property: value;">Content</element>

Values

Value	Description
`CSS declarations`	One or more CSS property-value pairs separated by semicolons

Examples

Basic Usage

<p style="color: #2563eb; font-size: 18px; font-weight: bold;">
This text is styled inline with blue color, larger size, and bold weight.
</p>

<p style="background-color: #fef3c7; padding: 15px; border-left: 4px solid #f59e0b;">
This paragraph has a yellow background with padding and a left border.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p style="color: #2563eb; font-size: 18px; font-weight: bold;">
This text is styled inline with blue color, larger size, and bold weight.
</p>

<p style="background-color: #fef3c7; padding: 15px; border-left: 4px solid #f59e0b;">
This paragraph has a yellow background with padding and a left border.
</p>

Multiple Properties

<div style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
">
<h2 style="margin: 0 0 10px 0; font-size: 24px;">Inline Styled Card</h2>
<p style="margin: 0; opacity: 0.9;">Multiple CSS properties applied inline</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
">
<h2 style="margin: 0 0 10px 0; font-size: 24px;">Inline Styled Card</h2>
<p style="margin: 0; opacity: 0.9;">Multiple CSS properties applied inline</p>
</div>

Dynamic Styling with JavaScript

<div id="box" style="width: 100px; height: 100px; background: #3b82f6; transition: all 0.3s;">
</div>

<button onclick="changeColor()">Change Color</button>
<button onclick="changeSize()">Change Size</button>
<button onclick="resetStyle()">Reset</button>

<script>
const box = document.getElementById('box');

function changeColor() {
  box.style.background = '#' + Math.floor(Math.random()*16777215).toString(16);
}

function changeSize() {
  const newSize = Math.floor(Math.random() * 100 + 50);
  box.style.width = newSize + 'px';
  box.style.height = newSize + 'px';
}

function resetStyle() {
  box.style.width = '100px';
  box.style.height = '100px';
  box.style.background = '#3b82f6';
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<div id="box" style="width: 100px; height: 100px; background: #3b82f6; transition: all 0.3s;">
</div>

<button onclick="changeColor()">Change Color</button>
<button onclick="changeSize()">Change Size</button>
<button onclick="resetStyle()">Reset</button>

<script>
const box = document.getElementById('box');

function changeColor() {
  box.style.background = '#' + Math.floor(Math.random()*16777215).toString(16);
}

function changeSize() {
  const newSize = Math.floor(Math.random() * 100 + 50);
  box.style.width = newSize + 'px';
  box.style.height = newSize + 'px';
}

function resetStyle() {
  box.style.width = '100px';
  box.style.height = '100px';
  box.style.background = '#3b82f6';
}
</script>

Overriding Styles

<style>
.styled-text {
  color: #dc2626;
  font-size: 16px;
  font-weight: normal;
}
</style>

<p class="styled-text">
This text uses the class styles: red, 16px, normal weight.
</p>

<p class="styled-text" style="color: #2563eb; font-weight: bold;">
This text has inline styles that override the class: blue and bold.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-text {
  color: #dc2626;
  font-size: 16px;
  font-weight: normal;
}
</style>

<p class="styled-text">
This text uses the class styles: red, 16px, normal weight.
</p>

<p class="styled-text" style="color: #2563eb; font-weight: bold;">
This text has inline styles that override the class: blue and bold.
</p>

When to Use Inline Styles

Appropriate Use Cases

1. Dynamic Styling via JavaScript

<div id="progress-bar" style="width: 0%; background: #3b82f6; height: 20px;"></div>

<script>
  let progress = 0;
  const bar = document.getElementById('progress-bar');

  setInterval(() => {
    progress = Math.min(progress + 10, 100);
    bar.style.width = progress + '%';
  }, 500);
</script>

2. User-Generated Content

<!-- Email templates or CMS content where external CSS isn't available -->
<div style="background: #f0f0f0; padding: 20px;">
  User-generated content with safe inline styles
</div>

3. Quick Prototyping

<!-- Testing styles before moving to stylesheet -->
<button style="background: #10b981; color: white; padding: 10px 20px;">
  Prototype Button
</button>

When to Avoid Inline Styles

Use External Stylesheets Instead

<!-- Avoid: Inline styles for static content -->
<div style="margin: 20px; padding: 15px; background: #f0f0f0;">
  Content
</div>

<!-- Better: Use classes -->
<div class="content-box">
  Content
</div>

<style>
  .content-box {
    margin: 20px;
    padding: 15px;
    background: #f0f0f0;
  }
</style>

CSS Property Syntax

Common Properties

<!-- Typography -->
<p style="font-family: Arial, sans-serif; font-size: 18px; line-height: 1.6;">
Typography example
</p>

<!-- Colors and Backgrounds -->
<div style="color: #1e293b; background-color: #f1f5f9; border: 2px solid #cbd5e1;">
Colors and backgrounds
</div>

<!-- Spacing -->
<div style="margin: 20px; padding: 15px;">
Spacing example
</div>

<!-- Layout -->
<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
Flexbox layout
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Typography -->
<p style="font-family: Arial, sans-serif; font-size: 18px; line-height: 1.6;">
Typography example
</p>

<!-- Colors and Backgrounds -->
<div style="color: #1e293b; background-color: #f1f5f9; border: 2px solid #cbd5e1;">
Colors and backgrounds
</div>

<!-- Spacing -->
<div style="margin: 20px; padding: 15px;">
Spacing example
</div>

<!-- Layout -->
<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
Flexbox layout
</div>

Shorthand Properties

<!-- Longhand -->
<div style="
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-color: #dbeafe;
padding: 15px;
">
Longhand properties
</div>

<!-- Shorthand (preferred) -->
<div style="
margin: 10px 20px;
background: #dbeafe;
padding: 15px;
">
Shorthand properties
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Longhand -->
<div style="
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-color: #dbeafe;
padding: 15px;
">
Longhand properties
</div>

<!-- Shorthand (preferred) -->
<div style="
margin: 10px 20px;
background: #dbeafe;
padding: 15px;
">
Shorthand properties
</div>

JavaScript Style Manipulation

Setting Styles

// Single property
element.style.backgroundColor = '#3b82f6';
element.style.fontSize = '18px';

// Multiple properties
element.style.cssText = 'color: white; background: #3b82f6; padding: 20px;';

// Using setProperty
element.style.setProperty('color', 'white');
element.style.setProperty('--custom-var', '#3b82f6');

Getting Styles

// Get inline style value
const color = element.style.color;

// Get computed style (includes all styles, not just inline)
const computed = window.getComputedStyle(element);
const fontSize = computed.fontSize;

Removing Styles

<p id="text" style="color: #dc2626; font-weight: bold; font-size: 20px;">
Styled text with multiple inline styles
</p>

<button onclick="removeColor()">Remove Color</button>
<button onclick="removeAll()">Remove All Styles</button>

<script>
const text = document.getElementById('text');

function removeColor() {
  text.style.color = '';
}

function removeAll() {
  text.removeAttribute('style');
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<p id="text" style="color: #dc2626; font-weight: bold; font-size: 20px;">
Styled text with multiple inline styles
</p>

<button onclick="removeColor()">Remove Color</button>
<button onclick="removeAll()">Remove All Styles</button>

<script>
const text = document.getElementById('text');

function removeColor() {
  text.style.color = '';
}

function removeAll() {
  text.removeAttribute('style');
}
</script>

CSS Custom Properties (Variables)

Inline styles can set and use CSS custom properties:

<div style="--theme-color: #8b5cf6; --spacing: 20px;">
<div style="
  background: var(--theme-color);
  color: white;
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  border-radius: 8px;
">
  Using CSS custom properties inline
</div>
<div style="
  border: 2px solid var(--theme-color);
  padding: var(--spacing);
  border-radius: 8px;
">
  Reusing the same variables
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div style="--theme-color: #8b5cf6; --spacing: 20px;">
<div style="
  background: var(--theme-color);
  color: white;
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  border-radius: 8px;
">
  Using CSS custom properties inline
</div>
<div style="
  border: 2px solid var(--theme-color);
  padding: var(--spacing);
  border-radius: 8px;
">
  Reusing the same variables
</div>
</div>

Specificity and the Cascade

Inline styles have very high specificity (1,0,0,0):

<style>
#my-text {
  color: #dc2626;
  font-weight: bold;
}

.text-class {
  color: #2563eb;
}

p {
  color: #059669;
}
</style>

<p id="my-text" class="text-class">
This is green (element selector)
</p>

<p id="my-text" class="text-class" style="color: #8b5cf6;">
This is purple (inline style wins!)
</p>

<p id="my-text" class="text-class" style="color: #8b5cf6;">
<span style="color: inherit;">Even with inherit, parent inline wins</span>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
#my-text {
  color: #dc2626;
  font-weight: bold;
}

.text-class {
  color: #2563eb;
}

p {
  color: #059669;
}
</style>

<p id="my-text" class="text-class">
This is green (element selector)
</p>

<p id="my-text" class="text-class" style="color: #8b5cf6;">
This is purple (inline style wins!)
</p>

<p id="my-text" class="text-class" style="color: #8b5cf6;">
<span style="color: inherit;">Even with inherit, parent inline wins</span>
</p>

Best Practices

Minimize Inline Styles

<!-- Avoid -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #f0f0f0;">
  <span style="font-weight: bold; color: #333;">Title</span>
  <button style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 4px;">
    Action
  </button>
</div>

<!-- Better -->
<div class="header">
  <span class="header-title">Title</span>
  <button class="btn btn-primary">Action</button>
</div>

Use for Dynamic Values Only

<!-- Good: Dynamic value from JavaScript -->
<div id="progress" style="width: 75%;"></div>

<!-- Avoid: Static value that could be in CSS -->
<div style="width: 75%;"></div>

Keep Inline Styles Simple

<!-- Acceptable: Simple inline adjustment -->
<img src="photo.jpg" style="max-width: 100%;" alt="Photo">

<!-- Avoid: Complex styles belong in CSS -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 30px; background: linear-gradient(to right, #f0f0f0, #ffffff);">
  Complex layout
</div>

Security Considerations

Sanitize User Input

Never directly insert user input into the style attribute:

// Dangerous - potential XSS vulnerability
element.style = userInput;

// Safer - use specific properties
element.style.backgroundColor = userInput;

// Best - validate and sanitize
if (/^#[0-9A-Fa-f]{6}$/.test(userInput)) {
  element.style.backgroundColor = userInput;
}

Performance Considerations

Avoid Excessive Inline Styles

<!-- Poor performance: Many inline styles -->
<div style="color: red;">Item 1</div>
<div style="color: red;">Item 2</div>
<div style="color: red;">Item 3</div>
<!-- ... 100 more items -->

<!-- Better: Use a class -->
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

<style>
  .item { color: red; }
</style>

Batch Style Changes

// Inefficient: Multiple reflows
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#3b82f6';

// Better: Single reflow
element.style.cssText = 'width: 100px; height: 100px; background: #3b82f6;';

// Or use classes
element.classList.add('styled-box');

Browser Support

The style attribute is supported by all browsers.

Browser	Support
Chrome	All versions
Firefox	All versions
Safari	All versions
Edge	All versions

class - Apply predefined CSS classes
id - Target elements with CSS selectors

The style Attribute

The style Attribute

Syntax

Values

Examples

Basic Usage

Multiple Properties

Dynamic Styling with JavaScript

Overriding Styles

When to Use Inline Styles

Appropriate Use Cases

1. Dynamic Styling via JavaScript

2. User-Generated Content

3. Quick Prototyping

When to Avoid Inline Styles

Use External Stylesheets Instead

CSS Property Syntax

Common Properties

Shorthand Properties

JavaScript Style Manipulation

Setting Styles

Getting Styles

Removing Styles

CSS Custom Properties (Variables)

Specificity and the Cascade

Best Practices

Minimize Inline Styles

Use for Dynamic Values Only

Keep Inline Styles Simple

Security Considerations

Sanitize User Input

Performance Considerations

Avoid Excessive Inline Styles

Batch Style Changes

Browser Support

Related Attributes

Specifications

The `style` Attribute