Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Example</title>
</head>
<body style="font-family: Arial, sans-serif; 
            background-color: #f0f0f0; 
            margin: 0; 
            padding: 0;">


    <div id="main-content" style="padding: 40px; 
            background-color: #ffffff; 
            border: 1px solid #ddd; 
            max-width: 800px; 
            margin: 20px auto;">
        <h1 style="color: #333; 
            text-align: center; 
            padding: 20px;">Welcome to Inline CSS Styling</h1>


        <p style="color: #666; 
            font-size: 18px; 
            line-height: 1.6; 
            margin: 20px;">
            This is an example of inline styling. Each HTML element has its own <code>style</code> attribute for defining CSS rules.
        </p>
        <p style="color: #0056b3;  
            font-weight: bold; 
            margin: 20px;">
            This paragraph uses an inline style to set specific text color and font weight.
        </p>
    </div>

</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter