Integrating HTML with CSS

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) work together to create visually appealing and well-structured web pages. Here's a comprehensive guide on how to integrate HTML with CSS, covering various ways to add styles to different HTML elements.

  1. Inline Styles:
    • Inline styles are added directly to HTML elements using the style attribute.
      • <p style="color: red; font-size: 16px;">This is a paragraph with inline styles.</p>
      Output:-

      This is a paragraph with inline styles.
    • Pros: Quick and straightforward.
    • Cons:Not recommended for larger projects due to maintenance challenges.

  2. Internal Styles:
    • Internal styles are defined within the HTML file using the <style> element in the <head>.
      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Styles</title>
    <style>
    
        p {
            color: green;
            font-size: 18px;
        }

        h1 {
            color: blue;
        }
    
    </style>
</head>
<body>

    <h2>This is a heading</h2>
    <p>This is a paragraph with internal styles.</p>

</body>
</html>
      Output:

      This is a heading

      This is a paragraph with internal styles.

    • Pros:Keeps styles within the HTML file.
    • Cons:Limited reusability, especially in larger projects.

  3. External Styles
    • External styles involve creating a separate CSS file and linking it to the HTML file.

      • style.css 
          /* styles.css */
p {
    color: red;
    font-size: 20px;
}

h1 {
    text-decoration: underline;
    color: blue;
}

      index.html 
          <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>External Styles</title>
         <link rel="stylesheet" href="styles.css">   
    </head>
    <body>

        <h2>This is another heading</h2>
        <p>This is another paragraph with external styles.</p>

    </body>
    </html>
      Output:

      This is another heading

      This is another paragraph with external styles.


    • Pros:Encourages a clean separation of concerns (HTML vs. CSS).
    • Cons: Requires an additional file and an HTTP request.