diff options
Diffstat (limited to 'css/02-inline-styling-with-css-properties')
| -rw-r--r-- | css/02-inline-styling-with-css-properties/index.html | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/css/02-inline-styling-with-css-properties/index.html b/css/02-inline-styling-with-css-properties/index.html new file mode 100644 index 0000000..d59c5ca --- /dev/null +++ b/css/02-inline-styling-with-css-properties/index.html @@ -0,0 +1,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> + |