When learning CSS, it is important to understand how to incorporate CSS into HTML. There are three methods: Inline CSS, Internal CSS, and External CSS. Each method has its own advantages and disadvantages. In this article, we will explore the meaning of each method, examples of their use, and when it is appropriate to use each method.

3 Method Add CSS

Inline CSS

Inline CSS is a method where we add styling CSS directly to HTML elements. By adding the attribute style to an element, we can directly apply CSS to it. Here is an example.

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

In the example above, the text will appear in red with a size of 12 pixels. We can use this method for:

Faster styling
Just for temporary testing
Single elements that require special styling However, Inline CSS has many limitations. Since the style is applied to only one element, excessive use can make the HTML code less neat and difficult to manage.

Internal CSS

Internal CSS is used by writing CSS code inside the <style> tag, which is placed inside the <head> tag of the HTML document. Here is an example.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: black;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: blue;
    }
		
		p {
			color: red;
		}
  </style>
</head>
<body>
  <h1>Welcome to NganggurDev</h1>
  <p>Example using internal CSS</p>
</body>
</html>

If we write this code into a text editor and run it, the result will be:

The page background will turn black.
The font for all text will be Arial.
<h1> will be blue.
<p> will be red.

By using the Internal CSS method, we can manage multiple elements at once from a single location or page, without having to style the HTML structure like Inline CSS. However, when used for large projects with many pages, Internal CSS is very inefficient because it cannot be reused across pages.

External CSS

External CSS is the most recommended method in modern website development. CSS is written in a separate file using the .css extension and linked to HTML using the <link> tag inside the <head>. Create a file named styles.css in the same folder as index.html, then apply the following code to the styles.css file.

/* styles.css */
body {
	background-color: black;
	font-family: Arial, sans-serif;
}

h1 {
	color: blue;
}

p {
	color: red;
}

And implement the following code into the index.html file.

<html>
 <head>
	 <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <h1>Welcome to NganggurDev</h1>
   <p>Example using internal CSS</p>
 </body>
</html>

So, if we run the code above in a browser, the result will be the same as if we used the Internal CSS method. The differences are:

The code looks neat and organized.
Easy to manage.
It can be reused across multiple pages.
It supports performance because the CSS file can be cached by the browser. For these reasons, the use of the External CSS method has become the industry standard for developing large-scale and medium-scale websites.

Conclusion

By understanding the use of inline, internal, and external methods in CSS, we can write more efficient and professional code.

Thank you, see you in the next article.