Ask a New Question
Menu

What's are the difference between inline css, internal css and external css.briefly explain

1 answer

Certainly! Here’s a brief explanation of the differences between inline CSS, internal CSS, and external CSS:

1. Inline CSS

  • Definition: Inline CSS is applied directly to HTML elements using the style attribute within the tag.
  • Usage: It affects only the specific element where it is applied.
  • Example: 
    <h1 style="color: blue; font-size: 20px;">This is a heading</h1>
  • Pros: Quick and easy for small changes or testing; no extra files required.
  • Cons: Can clutter HTML, reduces reusability, and makes it harder to maintain styles.

2. Internal CSS

  • Definition: Internal CSS is defined within the <style> tag in the <head> section of an HTML document.
  • Usage: It affects all elements within the document by targeting selectors.
  • Example: 
    <head>
    <style>
        h1 {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
</body>
  • Pros: Keeps styles in one place for a single document, improves organization when multiple styles are needed.
  • Cons: Styles are not reusable across different documents and can make the HTML file larger.

3. External CSS

  • Definition: External CSS is written in a separate CSS file that is linked to an HTML document using the <link> tag in the <head>.
  • Usage: Affects all HTML documents that link to the same CSS file.
  • Example: 
    /* styles.css */
h1 {
    color: blue;
    font-size: 20px;
}

    <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>This is a heading</h1>
</body>
  • Pros: Reusable across multiple HTML files, promotes separation of content and style, easier maintenance and updates.
  • Cons: Requires additional HTTP requests to load the CSS file, which can slightly affect page load time.

Summary

In summary, inline CSS is great for quick, specific changes; internal CSS works well for single-page styling; and external CSS is the best choice for large, multi-page websites due to its reusability and maintainability.