HTML File (index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styling Methods in CSS</title> <!-- Internal CSS --> <style> body { font-family: Arial, sans-serif; } .internal-style { color: green; background-color: lightgray; padding: 10px; border-radius: 5px; } </style> <!-- External CSS --> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Styling Methods in CSS</h1> <!-- Inline CSS --> <p style="color: red; font-size: 20px;">This paragraph is styled with inline CSS.</p> <!-- Internal CSS --> <p class="internal-style">This paragraph is styled with internal CSS.</p> <!-- External CSS --> <p id="external-style">This paragraph is styled with external CSS.</p> </body> </html> |
CSS File (styles.css)
#external-style { color: blue; font-weight: bold; text-decoration: underline; } |
Explanation of the Code
HTML File (index.html)
Header section
Body section
CSS File (styles.css)
includes CSS rules that style a particular paragraph with color, text decoration, and font weight for the #external-style ID. Especially in bigger projects where several web pages share the same styles, this external stylesheet shows how styles can be controlled independently from HTML, improving reusability and maintainability.
HTML File (index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styling Methods in CSS</title> <!-- Internal CSS --> <style> body { font-family: Arial, sans-serif; } .internal-style { color: green; background-color: lightgray; padding: 10px; border-radius: 5px; } </style> <!-- External CSS --> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Styling Methods in CSS</h1> <!-- Inline CSS --> <p style="color: red; font-size: 20px;">This paragraph is styled with inline CSS.</p> <!-- Internal CSS --> <p class="internal-style">This paragraph is styled with internal CSS.</p> <!-- External CSS --> <p id="external-style">This paragraph is styled with external CSS.</p> </body> </html> |
CSS File (styles.css)
#external-style { color: blue; font-weight: bold; text-decoration: underline; } |
Explanation of the Code
HTML File (index.html)
Header section
Body section
CSS File (styles.css)
includes CSS rules that style a particular paragraph with color, text decoration, and font weight for the #external-style ID. Especially in bigger projects where several web pages share the same styles, this external stylesheet shows how styles can be controlled independently from HTML, improving reusability and maintainability.
Copyrights © 2024 letsupdateskills All rights reserved