Inline, Internal, and External CSS

Cascading Style Sheets (CSS) offer different ways to style your web page. Let's explore the three main methods: Inline, Internal, and External CSS.

1. Inline CSS:

Inline CSS is applied directly to individual HTML elements using the style attribute. While convenient for quick styling, it's not the most recommended method for large-scale projects.

<!DOCTYPE html>
<html>
<head>
  <title>Inline CSS Example</title>
</head>
<body>

  <h1 style="color: blue;">Hello, World!</h1>
  <p style="font-size: 18px; text-align: center;">This is a styled paragraph.</p>

</body>
</html>

2. Internal (or Embedded) CSS:

Internal CSS is placed within the <style> tag in the head section of your HTML document. It allows you to apply styles to multiple elements on the same page.

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    h1 {
      color: green;
    }
    p {
      font-size: 16px;
      text-align: center;
    }
  </style>
</head>
<body>

  <h1>Hello, World!</h1>
  <p>This is a styled paragraph.</p>

</body>
</html>

3. External CSS:

External CSS involves creating a separate CSS file and linking it to your HTML document. This method is highly recommended for maintaining clean and organized code, especially in larger projects.

styles.css:

/* styles.css */
h1 {
    color: purple;
  }
  
  p {
    font-size: 20px;
    text-align: center;
  }

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <h1>Hello, World!</h1>
  <p>This is a styled paragraph.</p>

</body>
</html>

By using external CSS, you can apply consistent styles across multiple HTML pages, promoting easier maintenance and scalability. Choose the method that suits your project's size and complexity while maintaining a good balance between convenience and organization.