HTML
HTML Inline Style: Syntax, Usage, and Examples
The HTML inline style attribute applies CSS styles directly to an element. Unlike internal or external stylesheets, inline styles affect only the specific element where they are defined.
How to Apply Inline Style in HTML
You can add inline styles using the style attribute inside an HTML tag. Each style property appears as a key-value pair, separated by a colon. Semicolons separate multiple styles within the attribute.
Basic Syntax
<p style="color: blue; font-size: 16px;">This is a styled paragraph.</p>
This paragraph appears in blue with a font size of 16 pixels.
Using Inline Styles for Multiple Properties
You can apply multiple styles within the style attribute.
<h1 style="color: red; background-color: yellow; padding: 10px;">
Styled Heading
</h1>
Here, the heading text appears red, the background turns yellow, and padding surrounds the text.
When to Use Inline Styles in HTML
Inline styles provide a quick way to apply styles without requiring a separate CSS file. However, use them sparingly for maintainability.
Overriding External Styles
If an element requires a specific look that differs from global styles, an inline style ensures it remains unchanged.
<button style="background-color: green; color: white;">Click Me</button>
Even if a CSS file sets a different button color, this inline style keeps the button green.
Applying Styles Dynamically with JavaScript
Inline styles work well with JavaScript to change styles dynamically.
<p id="text" style="color: black;">Click the button to change my color.</p>
<button onclick="document.getElementById('text').style.color = 'red';">
Change Color
</button>
When the button is clicked, the paragraph text turns red.
Quick Styling for Prototyping
Developers often use inline styles when testing designs before moving styles into a stylesheet.
Examples of Inline Styling in HTML
Centering Text
<div style="text-align: center;">Centered Text</div>
This centers the text inside the div element.
Adding Borders
<p style="border: 2px solid black; padding: 10px;">
This paragraph has a border.
</p>
A black border surrounds this paragraph.
Setting Background Color
<h2 style="background-color: lightblue;">Heading with Background Color</h2>
This heading appears with a light blue background.
Learn More About Inline Styles in HTML
Which HTML Attribute Defines Inline Styles?
The style attribute defines inline styles in HTML.
<p style="color: gray;">This is gray text.</p
This ensures the text color remains gray regardless of external stylesheets.
How to Add Inline Style in HTML Dynamically
JavaScript allows you to modify styles dynamically using the style property.
document.getElementById("myElement").style.fontSize = "20px";
This changes the font size of an element with the ID myElement.
Using Inline Styles with Important CSS Rules
Although inline styles have high specificity, external stylesheets can override them using !important.
p {
color: black !important;
}
Even if an inline style sets color: red, this rule forces black text.
Inline Styles vs. Internal and External CSS
While inline styles offer quick styling, they do not scale well in large projects. Internal styles (<style> within <head>) and external stylesheets (.css files) provide better maintainability.
Combining Inline Styles with Classes
Although classes usually define styles in a separate stylesheet, you can combine them with inline styles when needed.
<p class="main-text" style="color: blue;">Styled with both class and inline style.</p>
The inline style overrides conflicting class styles.
The HTML inline style attribute provides a simple way to apply styles directly to elements. While useful for quick modifications and JavaScript-driven changes, avoid using inline styles as a substitute for external stylesheets in large projects.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.