Categories
CSS Web development

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

Do you like this gif? Check more gifs in theĀ store.

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 <heads> ection.


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!

Leave a Reply

Your email address will not be published. Required fields are marked *