🔵 CSS Q3 / 21

What are the different types of CSS (inline, internal, external)?

AI-Powered Answer ✓ Answered

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It defines how elements should be rendered on screen, paper, or in other media. There are three primary ways to incorporate CSS into an HTML document: inline, internal (embedded), and external.

1. Inline CSS

Inline CSS is used to apply a unique style to a single HTML element. It is defined directly within the HTML tag using the 'style' attribute. This method is generally not recommended for styling entire web pages, as it mixes content and presentation, making maintenance difficult and violating the separation of concerns principle.

Example

html

<p style="color: blue; font-size: 16px;">This is a blue paragraph with inline CSS.</p>

Advantages: - Quick and easy for small, specific style changes. - Overrides other CSS styles (high specificity). Disadvantages: - Leads to poor separation of concerns (HTML and CSS mixed). - Difficult to maintain and update styles across multiple elements. - Not reusable.

2. Internal CSS (Embedded CSS)

Internal CSS is defined within the <style>...</style> tags in the <head> section of an HTML document. This method is useful for applying unique styles to a single HTML page. While better than inline CSS for separation within a page, it still means styles are not reusable across multiple pages.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    body {
      background-color: lightgray;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      color: darkgreen;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Welcome</h1>
  <p>This paragraph is styled with internal CSS.</p>
</body>
</html>

Advantages: - Useful for single-page styling when styles are not needed externally. - Keeps HTML and CSS separate within a single file. Disadvantages: - Not reusable across multiple HTML pages. - Increases the size of the HTML document.

3. External CSS

External CSS is the most common and recommended method for applying styles. Styles are defined in a separate .css file and then linked to the HTML document using the <link> tag within the <head> section. This approach promotes excellent separation of concerns, reusability, and easier maintenance.

Example (HTML File: index.html)

html

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>My Blog Post</h1>
  <p>This content is styled by an external stylesheet.</p>
  <button>Click Me</button>
</body>
</html>

Example (CSS File: styles.css)

css

body {
  background-color: #f4f4f4;
  font-family: 'Open Sans', sans-serif;
  margin: 20px;
}

h1 {
  color: #333;
  text-align: left;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
}

p {
  color: #555;
  line-height: 1.6;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Advantages: - Promotes full separation of concerns (HTML for content, CSS for presentation). - Styles can be reused across multiple HTML pages, making website-wide changes easy. - Improves website loading performance by allowing CSS files to be cached by the browser. - Cleaner and more organized HTML documents. Disadvantages: - Requires an extra HTTP request to fetch the CSS file (minimal impact).

← All CSS questions