blob: d59c5ca138b7fea0da9738b0a89d3aa32ebc1660 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!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 style="background-color: #f4f7f6; font-family: Arial, sans-serif; padding: 20px;">
<!-- Styled Heading -->
<h1 style="color: #2c3e50; text-align: center; border-bottom: 2px solid #2c3e50; padding-bottom: 10px;">
Welcome to My Website
</h1>
<!-- Styled Paragraph -->
<p style="color: #34495e; font-size: 16px; line-height: 1.6; max-width: 600px; margin: 20px auto;">
This paragraph is styled using <strong>inline CSS</strong>. The font size, color, line height, and alignment are controlled directly inside the HTML tag via the <code style="background-color: #e0e0e0; padding: 2px 6px; border-radius: 4px;">style</code> attribute.
</p>
<!-- Styled Call-to-Action Box -->
<div style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; text-align: center; max-width: 400px; margin: 30px auto;">
<h2 style="color: #e74c3c; margin-top: 0;">Special Offer!</h2>
<p style="color: #7f8c8d;">Get access to exclusive web development content today.</p>
<!-- Styled Button -->
<button style="background-color: #2ecc71; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer;">
Sign Up Now
</button>
</div>
</body>
</html>
|
