MakeW3web

Inline vs. Internal vs. External CSS

Inline, internal, and external are three ways to add Cascading Style Sheets (CSS) to HTML documents. Here's a brief explanation of each with examples:

1. Inline CSS: Inline CSS is added directly to HTML elements using the "style" attribute. Inline styles affect only the element they are added to and are not reusable.

Example:

<p style="color: blue; font-size: 16px;">This text is styled inline.</p>

In this example, the "style" attribute is used to add inline CSS to the "h1" element. The CSS styles "color: red;" and "font-size: 24px;" are applied only to this specific "h1" element.

2. Internal CSS: Internal CSS is added to the "head" section of an HTML document using the "style" tag. Internal styles affect all the HTML elements within the document and are reusable within that document.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
    h1 {
      color: red;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

In this example, the "style" tag is used to add internal CSS to the "head" section of the HTML document. The CSS styles "color: red;" and "font-size: 24px;" are applied to all "h1" elements within the document.

3. External CSS: External CSS is added to an HTML document using a separate CSS file. External styles affect all the HTML elements within the document and are reusable across multiple documents.

Example:

HTML File:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

CSS File (style.css):

h1 {
  color: red;
  font-size: 24px;
}

In this example, the "link" tag is used to link the HTML document to an external CSS file named "style.css". The CSS styles "color: red;" and "font-size: 24px;" are applied to all "h1" elements within the HTML document.

In summary, inline CSS is used for quick and specific styling, internal CSS is used for styles that are used throughout the document, and external CSS is used for styles that are used across multiple documents.

Was this page helpful?