How to add CSS to HTML?

Adding CSS into HTML can be confusing because there are 3 different ways to do it.

a) external CSS
b) internal CSS
c) inline CSS

a) External CSS

This technique allows you to define a style sheet as a separate document and import it into your website. With an external style sheet, you can change a look of an entire web page by changing just one file.

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the <head> section.

Example and output:

Here is how the “mystyle.css” file looks like:

An external style sheet can be written in any text editor and must be saved with a .css extension. The external style sheet file should not contain any HTML tags.

b) Internal CSS

An internal style sheet holds CSS rules for the web page in the <head> section of the HTML document. An internal style sheet can be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the <head> section.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: pink;
}

h1 {
  color: green;
  margin-left: 35px;
}
</style>
</head>
<body>

<h1>Heading- Internal style sheet.</h1>
<p>Paragraph- Internal style sheet.</p>

</body>
</html>

Output:

c) Inline styles

Inline-styles are related to a specific HTML tag, using a style attribute with a CSS rule to style specific page elements. They are useful for quick, permanent changes.

Example and output:

Enjoy coding!

Share this: