Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to use inline CSS (Style Sheet) in HTML?

HTML Web Development Front End Technology

Inline CSS allows you to apply styling directly to individual HTML elements using the style attribute. This method is useful for quick, element-specific styling without creating separate CSS files or <style> blocks.

Inline CSS is one of three ways to apply CSS to HTML elements −

  • Inline CSS − Using the style attribute directly within HTML tags.

  • Internal CSS − Using <style> tags in the document head.

  • External CSS − Linking to separate CSS files.

Inline CSS takes the highest precedence and will override internal and external styles applied to the same element.

Syntax

Following is the syntax for applying inline CSS −

<tag style="property1: value1; property2: value2;">Content</tag>

Multiple CSS properties are separated by semicolons within the style attribute value.

Basic Text Styling

Following example demonstrates basic inline CSS for text formatting −

<!DOCTYPE html>
<html>
<head>
   <title>Inline CSS - Text Styling</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: bisque;">
   <h1 style="font-family: fantasy; color: navy; text-align: center;">HTML Tutorial</h1>
   <p style="background-color: yellow; padding: 10px; border-radius: 5px;">HTML is used to structure a web page and its content.</p>
   <p style="color: darkgreen; font-size: 18px; font-weight: bold;">This paragraph uses inline CSS for styling.</p>
</body>
</html>

The output displays styled text with different colors, backgrounds, and formatting −

HTML Tutorial                                    (fantasy font, navy color, centered)
HTML is used to structure a web page and its content. (yellow background, rounded corners)
This paragraph uses inline CSS for styling.     (dark green, larger, bold text)

Styling Headings

Following example shows inline CSS applied to heading elements −

<!DOCTYPE html>
<html>
<head>
   <title>Inline CSS - Headings</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: seagreen;">
   <h1 style="font-family: fantasy; color: white; text-shadow: 2px 2px 4px black;">Main Heading</h1>
   <h2 style="background-color: whitesmoke; padding: 15px; border-left: 5px solid orange; margin: 20px 0;">HTML is used to structure a web page and its content.</h2>
   <h3 style="color: yellow; text-decoration: underline;">Sub-heading Example</h3>
</body>
</html>

The output shows various heading styles with backgrounds, shadows, and decorations −

Main Heading                                     (white text with shadow on green background)
HTML is used to structure a web page and its content. (whitesmoke background with orange left border)
Sub-heading Example                              (yellow underlined text)

Styling Tables

Following example demonstrates inline CSS for table formatting −

<!DOCTYPE html>
<html>
<head>
   <title>Inline CSS - Tables</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <table style="border-collapse: collapse; width: 100%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
      <tr style="background-color: #4CAF50;">
         <th style="border: 1px solid #ddd; padding: 12px; color: white; text-align: left;">Firstname</th>
         <th style="border: 1px solid #ddd; padding: 12px; color: white; text-align: left;">Lastname</th>
         <th style="border: 1px solid #ddd; padding: 12px; color: white; text-align: left;">Age</th>
      </tr>
      <tr style="background-color: #f2f2f2;">
         <td style="border: 1px solid #ddd; padding: 12px;">Peter</td>
         <td style="border: 1px solid #ddd; padding: 12px;">Griffin</td>
         <td style="border: 1px solid #ddd; padding: 12px;">45</td>
      </tr>
      <tr>
         <td style="border: 1px solid #ddd; padding: 12px;">Lois</td>
         <td style="border: 1px solid #ddd; padding: 12px;">Griffin</td>
         <td style="border: 1px solid #ddd; padding: 12px;">43</td>
      </tr>
   </table>
</body>
</html>

The output displays a professional-looking table with borders, padding, alternating row colors, and shadow effects −

????????????????????????????????
? Firstname   ? Lastname ? Age ? (green header with white text)
????????????????????????????????
? Peter       ? Griffin  ? 45  ? (light gray background)
????????????????????????????????
? Lois        ? Griffin  ? 43  ? (white background)
????????????????????????????????

Styling Forms

Following example shows inline CSS applied to form elements −

<!DOCTYPE html>
<html>
<head>
   <title>Inline CSS - Forms</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f0f8ff;">
   <form style="max-width: 400px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1);">
      <h2 style="text-align: center; color: #333; margin-bottom: 20px;">Contact Form</h2>
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">Name:</label>
      <input type="text" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">Email:</label>
      <input type="email" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px;">
      
      <button type="submit" style="width: 100%; background-color: #4CAF50; color: white; padding: 12px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">Submit</button>
   </form>
</body>
</html>

The output creates a styled contact form with rounded corners, shadows, and hover effects.

Inline CSS vs Other CSS Methods Inline CSS Highest priority Element-specific Quick styling Hard to maintain Increases file size No reusability Internal CSS Document-wide In <style> tags Reusable in page Better organization Single file only External CSS Separate .css files Multiple pages Best maintenance Cached by browser Professional approach

Advantages and Disadvantages

Following table compares the pros and cons of inline CSS −

Advantages Disadvantages
Highest CSS priority (overrides other styles) Poor maintainability for large projects
Quick and easy for single elements Increases HTML file size
No external file dependencies No style reusability across elements
Useful for email templates Mixes content with presentation
Good for testing and prototyping Difficult to implement responsive design
Dynamic styling with JavaScript No pseudo-classes or media queries support

Common Use Cases

Inline CSS is most appropriate for −

  • Email templates − Many email clients strip external and internal CSS.

  • Quick prototyping − Testing styles during development.

  • Dynamic styling − JavaScript-generated styles based on user interactions.

  • Overriding specific styles − When you need to override external CSS for particular elements.

  • One-off styling − Unique styles that won't be reused elsewhere.

Conclusion

Inline CSS provides immediate, element-specific styling

Updated on: 2026-03-16T21:38:53+05:30

4K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements