HTML Styles

Inline style attributes inject CSS properties directly into element tags, controlling colors, typography, dimensions, and visual presentation.

Style attributes empower you to customize element appearance without external stylesheets. Understanding inline styling fundamentals bridges the gap between HTML structure and CSS-based design control.

Inline Style Mechanics

Elements accept styling through the style attribute. This attribute follows a specific pattern:

Style Declaration Pattern

<tagname style="css-property:assigned-value;">

The css-property represents a stylesheet rule. The assigned-value determines the rule's setting.

Priority Rules: Inline styles override external and embedded stylesheets, possessing maximum specificity weight in the cascade hierarchy.

Controlling Background Hues

The background-color CSS property establishes element backdrop coloring:

Background Coloring Demonstrations

<h1 style="background-color:skyblue;">Master Web Development</h1>
<p style="background-color:coral;">Build professional websites through practice!</p>
<p style="background-color:silver;">Access comprehensive coding education at htmlfreecodes.com</p>

Result:

Master Web Development

Build professional websites through practice!

Access comprehensive coding education at htmlfreecodes.com

Typography Color Control

The color property governs text foreground coloring for any element:

Text Coloration Examples

<h1 style="color:navy;">Begin Your Coding Journey</h1>
<p style="color:crimson;">Crimson-colored paragraph content.</p>
<p style="color:forestgreen;">Forest green text styling.</p>
<p style="color:#9933cc;">Hexadecimal color specification.</p>

Result:

Begin Your Coding Journey

Crimson-colored paragraph content.

Forest green text styling.

Hexadecimal color specification.

HTML Fonts

The CSS font-family property defines the font to be used for an HTML element:

Font Family Examples

<h1 style="font-family:verdana;">HTML Free Codes</h1>
<p style="font-family:courier;">Learn HTML with our tutorials.</p>
<p style="font-family:'Times New Roman';">Professional web development courses.</p>

Result:

HTML Free Codes

Learn HTML with our tutorials.

Professional web development courses.

HTML Text Size

The CSS font-size property defines the text size for an HTML element:

Font Size Examples

<h1 style="font-size:300%;">HTML Free Codes</h1>
<p style="font-size:160%;">Large text for emphasis.</p>
<p style="font-size:50px;">Text with 50px font size.</p>
<p style="font-size:12px;">Small text for disclaimers.</p>

Result:

HTML Free Codes

Large text for emphasis.

Text with 50px font size.

Small text for disclaimers.

HTML Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Text Alignment Examples

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph text.</p>
<p style="text-align:left;">Left-aligned text (default).</p>
<p style="text-align:right;">Right-aligned text.</p>
<p style="text-align:justify;">Justified text spreads evenly across the full width of the container, creating straight edges on both sides.</p>

Result:

Centered Heading

Centered paragraph text.

Left-aligned text (default).

Right-aligned text.

Justified text spreads evenly across the full width of the container, creating straight edges on both sides.

HTML Borders

The CSS border property defines a border around an HTML element:

Border Examples

<h1 style="border:2px solid Tomato;">HTML Free Codes</h1>
<p style="border:2px solid DodgerBlue;">Blue border paragraph.</p>
<p style="border:2px solid Violet;">Violet border paragraph.</p>
<p style="border:2px dashed red;">Dashed red border.</p>
<p style="border:3px dotted green;">Dotted green border.</p>

Result:

HTML Free Codes

Blue border paragraph.

Violet border paragraph.

Dashed red border.

Dotted green border.

HTML Padding and Margin

The CSS padding property defines the inner space, and margin defines the outer space around an element:

Padding and Margin Examples

<p style="border:1px solid black; margin:30px; padding:30px;">
This paragraph has 30px margin and 30px padding.
</p>

<p style="border:1px solid black; margin:50px; padding:10px;">
This paragraph has 50px margin and 10px padding.
</p>

<p style="border:1px solid black; margin:10px; padding:50px;">
This paragraph has 10px margin and 50px padding.
</p>

Result:

This paragraph has 30px margin and 30px padding.

This paragraph has 50px margin and 10px padding.

This paragraph has 10px margin and 50px padding.

Try it Yourself

Experiment with different padding and margin values!

Try Padding & Margin

Combining Multiple Styles

You can combine multiple CSS properties in a single style attribute by separating them with semicolons:

Combined Styles Example

<h1 style="color:white; background-color:black; padding:20px; text-align:center; font-family:Arial;">
HTML Free Codes - Professional Tutorials
</h1>

<p style="color:#2c3e50; font-size:18px; line-height:1.6; text-align:justify; background-color:#ecf0f1; padding:15px; border-left:4px solid #3498db;">
Welcome to HTML Free Codes, your ultimate destination for learning web development. Our comprehensive tutorials cover HTML, CSS, JavaScript, and modern web technologies. Start your journey today at htmlfreecodes.com and become a skilled web developer.
</p>

Result:

HTML Free Codes - Professional Tutorials

Welcome to HTML Free Codes, your ultimate destination for learning web development. Our comprehensive tutorials cover HTML, CSS, JavaScript, and modern web technologies. Start your journey today at htmlfreecodes.com and become a skilled web developer.

Complete Styles Example

Here's a complete example showcasing various HTML styles:

Complete Styled Document

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Styled Page</title>
</head>
<body style="font-family:Arial, sans-serif; margin:40px;">

    <h1 style="background-color:#2c3e50; color:white; padding:20px; text-align:center; margin:0 0 30px 0;">
        HTML Free Codes
    </h1>

    <h2 style="color:#3498db; border-bottom:2px solid #3498db; padding-bottom:10px;">
        Learn Web Development
    </h2>

    <p style="font-size:18px; line-height:1.6; color:#555; text-align:justify;">
        Master HTML, CSS, and JavaScript with our comprehensive tutorials.
        Visit htmlfreecodes.com for free web development courses.
    </p>

    <div style="background-color:#ecf0f1; padding:20px; border-radius:5px; margin:20px 0;">
        <h3 style="color:#e74c3c; margin-top:0;">Featured Course</h3>
        <p style="margin-bottom:0;">HTML Fundamentals - Start your journey today!</p>
    </div>

</body>
</html>

Try it Yourself

Create your own beautifully styled webpage!

Try Complete Example

HTML Style Best Practices

Use External CSS for Large Projects

While the style attribute is useful for quick styling, it's recommended to use external CSS files for larger projects:

Inline Styles (for small changes)

<p style="color:red; font-size:16px;">Quick styling</p>

External CSS (recommended for projects)

<!-- In HTML -->
<link rel="stylesheet" href="styles.css">
<p class="highlight">Better organization</p>

<!-- In styles.css -->
.highlight {
    color: red;
    font-size: 16px;
}

Keep Styles Consistent

  • Use consistent color schemes across your website
  • Maintain uniform font families and sizes
  • Apply consistent spacing and margins
  • Use meaningful color names or hex codes
Performance Tip: Inline styles have higher specificity than external CSS, which can make them harder to override. Use them sparingly.

Test Your Knowledge

Previous HTML Paragraphs
Next HTML Formatting