How to apply CSS to HTML?

Applying CSS to HTML

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in a markup language like HTML. In other words, CSS is used to control the appearance and layout of web pages. There are several ways to apply CSS to an HTML document, and each method has its own advantages and disadvantages.

Inline CSS

Inline CSS is the simplest way to apply styles to an HTML element. It involves adding the style attribute directly to the HTML element and specifying the CSS properties and values. For example:

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

Inline CSS is easy to use and can be a quick way to apply styles to a specific element. However, it can become cumbersome and difficult to manage when you have a large number of elements to style, as the styles are scattered throughout the HTML code.

Internal CSS

Internal CSS, also known as embedded CSS, involves placing the CSS rules within the <style> element in the <head> section of the HTML document. For example:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
    h1 {
      color: green;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Welcome to my web page</h1>
  <p>This is a paragraph with internal CSS.</p>
</body>
</html>

Internal CSS is more organized than inline CSS, as the styles are centralized in the <style> element. This makes it easier to manage and maintain the styles for the entire document. However, it still has the limitation of being specific to a single HTML document.

External CSS

External CSS involves placing all the CSS rules in a separate file with a .css extension, and then linking this file to the HTML document using the <link> element in the <head> section. For example, let's say we have a CSS file named styles.css with the following content:

p {
  color: blue;
  font-size: 14px;
}

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

And the corresponding HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to my web page</h1>
  <p>This is a paragraph with external CSS.</p>
</body>
</html>

External CSS is the most common and recommended way to apply styles to an HTML document. It separates the presentation (CSS) from the structure (HTML), making the code more modular, maintainable, and reusable. Additionally, external CSS files can be cached by the browser, improving the performance of your web pages.

Here's a Mermaid diagram that summarizes the different ways to apply CSS to HTML:

graph TD A[HTML Document] --> B[Inline CSS] A[HTML Document] --> C[Internal CSS] A[HTML Document] --> D[External CSS] B[Inline CSS] --> E[Style attribute] C[Internal CSS] --> F[Style element] D[External CSS] --> G[Link element]

In summary, the three main ways to apply CSS to HTML are:

Inline CSS: Directly in the HTML element using the style attribute.
Internal CSS: Within the <style> element in the HTML document's <head>.
External CSS: In a separate CSS file linked to the HTML document using the <link> element.

Each method has its own advantages and disadvantages, and the choice will depend on the specific requirements of your project and the level of organization and maintainability you need.