Untitled

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Styling Methods</title> <!-- Internal Styles --> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; margin: 0; padding: 20px; } .internal-box { background-color: lightblue; padding: 20px; border-radius: 10px; display: inline-block; width: 50%; margin-top: 10px; } </style> <!-- External Stylesheet Link --> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>CSS Styling Methods</h1> <!-- Inline Style Example --> <p style="color: red; font-size: 18px; font-weight: bold;"> This paragraph is styled using inline CSS. </p> <!-- Internal Stylesheet Example --> <div class="internal-box"> This div is styled using an internal stylesheet. </div> <!-- External Stylesheet Example --> <button class="external-button">Styled with External CSS</button> </body> </html>
Editor is loading...