Add Inline CSS

What is Inline CSS?

Inline CSS is a method of styling HTML elements by using the style attribute directly inside an HTML tag. The CSS rules apply only to the element where they are written. Inline CSS is useful for applying quick styles to individual elements without creating a separate stylesheet or using a <style> tag.

Why Use Inline CSS?

Inline CSS is useful when you want to style a single HTML element without affecting other elements on the page. It is commonly used for quick testing, email templates, overriding existing styles, or applying unique styling to a specific element.

Syntax of Inline CSS

<h1 style="color: blue;">Hello World</h1>

Step 1: Add the Style Attribute

Select the HTML element that you want to style and add the style attribute. Then write one or more CSS properties inside quotation marks.

<p style="color:red;">
This text is red.
</p>

Step 2: Add Multiple CSS Properties

You can apply multiple CSS properties by separating each property with a semicolon (;) inside the style attribute.

<h2 style="color:green; background:#f2f2f2; padding:15px;">
Learning Inline CSS
</h2>

How Inline CSS Works

When the browser reads an HTML element containing the style attribute, it immediately applies the specified CSS properties to that element only. These styles do not affect any other elements unless they also have their own inline styles.

Example of Inline CSS

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>

<body style="background:#f5f9ff; font-family:Arial;">

<h1 style="color:#0056b3;">
Welcome to Academic Block
</h1>

<p style="color:#333; font-size:18px;">
This paragraph is styled using Inline CSS.
</p>

<button style="background:#007BFF;
color:white;
padding:10px 20px;
border:none;
border-radius:5px;
cursor:pointer;">
Click Me
</button>

</body>
</html>

Advantages of Inline CSS

Simple

Easy to Use

Apply styles directly to an HTML element.

Quick Testing

Fast Changes

Perfect for testing individual CSS properties.

Element Specific

No Global Impact

Only the selected element receives the styles.

No Extra File

Convenient

No need for an external stylesheet or style tag.

Email Friendly

Better Compatibility

Widely used in HTML email templates.

Common Mistakes

Beginners often forget quotation marks around the style attribute, omit semicolons between CSS properties, misspell CSS property names, or try to use CSS selectors inside the style attribute. These mistakes can prevent the styles from working correctly.

<!-- Incorrect -->

<h1 style=color:red>Heading</h1>


<!-- Correct -->

<h1 style="color:red;">Heading</h1>

Best Practices

Use Inline CSS only for styling individual elements.
Separate multiple CSS properties with semicolons.
Keep property names and values inside quotation marks.
Avoid using Inline CSS for large websites.
Prefer Internal or External CSS for reusable styles.
Keep inline styles short and easy to read.
Do not duplicate the same inline styles on many elements.
Use Inline CSS mainly for quick styling, testing, or email templates.

Web Resources on How to add Inline CSS

1. MDN Web Docs : Getting started with CSS.
2. Elementor.com : How To Add CSS To HTML? Inline, Internal & External CSS
3. University Webflow.com : Inline style

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.