askvity

How to Add CSS into HTML?

Published in CSS Fundamentals 3 mins read

There are three main ways to add CSS (Cascading Style Sheets) into your HTML (HyperText Markup Language) document: inline, internal, and external.

1. Inline CSS

Inline CSS involves adding style attributes directly within HTML elements. This method is suitable for applying unique styles to individual elements.

How it works:

  • Use the style attribute inside the opening tag of the HTML element you want to style.
  • The value of the style attribute contains CSS declarations, consisting of properties and their corresponding values.

Example:

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

Pros:

  • Quick and easy for applying styles to individual elements.
  • Overrides external and internal styles.

Cons:

  • Not maintainable for larger projects.
  • Mixing content and presentation makes the code harder to read and update.
  • Difficult to reuse styles across multiple elements or pages.

2. Internal CSS

Internal CSS involves embedding CSS rules within the <style> tag inside the <head> section of your HTML document.

How it works:

  • Place a <style> tag within the <head> section of your HTML file.
  • Write CSS rules inside the <style> tag, targeting HTML elements by their tag name, class, or ID.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    p {
      color: green;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with internal CSS.</p>
</body>
</html>

Pros:

  • Convenient for styling a single page.
  • Centralized CSS rules within the HTML document.

Cons:

  • Not suitable for large projects with multiple pages.
  • CSS rules are not reusable across different HTML files.
  • Can lead to larger HTML files and slower page load times.

3. External CSS

External CSS involves creating separate .css files that contain your CSS rules and then linking these files to your HTML document using the <link> tag. This is the most preferred and maintainable method for larger projects.

How it works:

  • Create a new file with a .css extension (e.g., styles.css).
  • Write your CSS rules in the .css file.
  • Link the .css file to your HTML document using the <link> tag within the <head> section. The rel attribute should be set to "stylesheet" and the href attribute should point to the location of your .css file.

Example:

HTML File (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is a paragraph with external CSS.</p>
</body>
</html>

CSS File (styles.css):

body {
  background-color: #f0f0f0;
}

p {
  color: red;
}

Pros:

  • Highly maintainable and scalable for larger projects.
  • CSS rules are reusable across multiple HTML files.
  • Clean separation of content (HTML) and presentation (CSS).
  • Improved page load times due to browser caching of CSS files.

Cons:

  • Requires managing separate .css files.
  • Slightly more complex setup compared to inline or internal CSS.

In summary, you can add CSS to HTML using inline styles for individual elements, internal styles within the <head> tag for page-specific styling, or external stylesheets linked via the <link> tag for reusable and maintainable styling across multiple pages. External CSS is generally preferred for larger projects.

Related Articles