HTML elements use the style attribute to apply CSS styling rules directly to individual elements. Inline styles allow developers to customize element colors, backgrounds, font sizes, alignments, and spacing.
style Attribute SyntaxInline styles are written as attribute key-value pairs using the format style="property: value;". Multiple CSS declarations are separated by semicolons.
<p style="color: blue; font-size: 18px; text-align: center;">Styling text with inline CSS.</p>
Here are the primary CSS properties applied via the HTML style attribute:
color: Controls text color using color names (red), hex codes (#10b981), or RGB/HSL values (rgb(15, 23, 42)).background-color: Sets the background color behind text or block container elements.font-family: Specifies the typography font stack used for text rendering (Arial, Inter, sans-serif).font-size: Sets text size using relative (rem, em) or absolute (px) units.text-align: Controls text horizontal alignment (left, center, right, justify).border: Adds border lines around elements (1px solid #cbd5e1).CSS styles apply according to specificity rules. Inline styles override internal <style> tags and external stylesheet rules unless !important is used.
flowchart TD
A["Inline Style (style='color:red;')"] -->|Highest Specificity| B["Renders on Page"]
C["Internal Stylesheet (<style>)"] -->|Overridden by Inline| A
D["External Stylesheet (.css)"] -->|Overridden by Internal & Inline| C
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Inline Styles Example</title>
</head>
<body style="background-color: #f8fafc; font-family: 'Segoe UI', Tahoma, sans-serif; color: #1e293b; margin: 0; padding: 20px;">
<!-- Card container with inline background, padding, and border radius -->
<div style="background-color: #ffffff; padding: 24px; border-radius: 8px; border: 1px solid #e2e8f0; max-width: 600px; margin: 0 auto;">
<!-- Styled header text -->
<h1 style="color: #2563eb; font-size: 28px; text-align: center; margin-top: 0;">Dashboard Overview</h1>
<!-- Highlight callout box -->
<p style="background-color: #dbeafe; color: #1e40af; padding: 12px; border-left: 4px solid #2563eb; margin: 16px 0;">
<strong>Pro Tip:</strong> Inline styles are great for quick prototypes or dynamic backend templating.
</p>
<!-- Centered styled text paragraph -->
<p style="font-size: 16px; line-height: 1.6; text-align: justify;">
This component demonstrates styling HTML elements using inline CSS properties directly on tags.
</p>
</div>
</body>
</html>
style="..." attribute strings (e.g., style="color:red font-size:14px") breaks CSS parsing for subsequent properties.font-weight: bold; or font-style: italic; instead of wrapping styled elements in non-semantic legacy tags.Create an HTML <div> container styled with a dark background (#0f172a), white text (#ffffff), centered alignment, 16px padding, and a rounded border (8px radius)!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.