Html Inline CSS

Inline CSS in HTML allows you to apply styles directly to an individual HTML element using the style attribute. It is a simple way to change the color, font size, background, spacing, and other visual properties of an element without creating a separate CSS rule.

Inline CSS is useful for quick styling and small examples. However, for larger websites, internal or external CSS is usually easier to maintain.

What Is Inline CSS?

Inline CSS is a method of applying CSS directly inside an HTML opening tag. The CSS declarations are written as the value of the style attribute.

Here is a simple example:

<h1 style="color: blue;">Welcome to Web Development</h1>
<p style="font-size: 18px;">Learn HTML and CSS step by step.</p>

In this example, the heading appears blue, and the paragraph uses a font size of 18 pixels.

If you are new to HTML, start by understanding HTML attributes and how they provide additional information about HTML elements.

Inline CSS Syntax

The basic syntax of inline CSS is:

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

The syntax contains three main parts:

• Element: The HTML element you want to style.
• Property: The CSS property you want to change, such as color or font-size.
• Value: The value assigned to the property, such as red or 20px.

For example:

<p style="color: green; font-size: 20px;">
  This paragraph uses inline CSS.
</p>

Multiple CSS declarations can be included in the same style attribute. Separate each declaration with a semicolon.

Common Inline CSS Examples

Inline CSS can control many visual properties of an HTML element.

Change Text Color

Use the color property to change the text color.

<h2 style="color: red;">This heading is red</h2>

Change Font Size

Use the font-size property to adjust the size of text.

<p style="font-size: 24px;">This text is larger.</p>

Change Background Color

Use the background-color property to set an element’s background.

<p style="background-color: yellow;">
  This paragraph has a yellow background.
</p>

Add Padding

The padding property adds space between an element’s content and its border.

<div style="padding: 20px; background-color: #eaf2ff;">
  This box has padding.
</div>

Apply Multiple Styles

You can combine several CSS properties in one style attribute.

<button style="background-color: blue; color: white; padding: 10px 20px; border: none;">
  Click Me
</button>

This example creates a blue button with white text and additional padding.

Complete Inline CSS Example

The following example demonstrates several inline styles in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline CSS Example</title>
</head>
<body>
  <h1 style="color: navy; text-align: center;">
    Welcome to Web4Learners
  </h1>

  <p style="font-size: 18px; color: #333;">
    Learn website development with simple tutorials.
  </p>

  <div style="background-color: #eaf2ff; padding: 15px;">
    <p style="color: #1769aa;">This is a styled content box.</p>
  </div>
</body>
</html>

Save the code as index.html and open it in a browser to see the styles applied directly to the elements.

Advantages of Inline CSS

Inline CSS has several advantages for simple styling tasks.

• It is easy to learn and use.
• It does not require a separate CSS file.
• It is useful for quick demonstrations and small examples.
• It allows you to apply styles to a specific element.
• It can be convenient when generating HTML dynamically.

Disadvantages of Inline CSS

Despite its simplicity, inline CSS has limitations.

• It can make HTML code harder to read.
• Reusing the same styles across many elements requires repeating declarations.
• Updating a website’s design becomes more difficult.
• It mixes content with presentation.
• Inline styles can override ordinary stylesheet rules, making styling conflicts harder to manage.

For reusable styles, learn about CSS classes and CSS IDs.

Inline CSS vs. Internal CSS vs. External CSS

Feature	Inline CSS	Internal CSS	External CSS
Location	Inside an HTML element	Inside a <style> element	In a separate .css file
Reusability	Limited	Within the document	Across multiple pages
Maintenance	Difficult for large projects	Moderate	Easier for larger websites
Best use	One-off styling	Single-page styling	Multi-page websites

Explore internal CSS and external CSS to understand these approaches in more detail.

Frequently Asked Questions

What is the style attribute in HTML?

The style attribute allows you to apply CSS declarations directly to an HTML element.

Can I use multiple CSS properties in inline CSS?

Yes. Write multiple declarations inside the same style attribute and separate them with semicolons.

Is inline CSS good for large websites?

Generally, no. External stylesheets are easier to maintain and reuse across multiple pages.

Does inline CSS have higher priority?

Inline styles generally take precedence over ordinary author stylesheet declarations for the same property. However, !important declarations, cascade layers, and other cascade rules can affect the result.

Final Thoughts

Inline CSS is a straightforward way to style individual HTML elements. It is helpful for quick examples and small changes, but using internal or external CSS is usually better for maintaining larger websites. Learning all three methods will help you choose the right approach for each project.