3 Ways to Add CSS link into HTML

CSS rules start work after they are being added to HTML. There are 3 three ways to add CSS link into HTML and in this post, you’re going to learn how to add CSS link with 3 way different:

There are three type to add CSS link into HTML.

1. Inline-Style :

The first way is to add CSS link into HTML is by using a method called inline-styling. Inline-style means adding CSS rules directly into the HTML elements (tags) with the style attribute.

For example, if I want to change the text background-color of an element:

 


<div style="background-color: white;">

<h5 style="color: white;">Background Color is black</h5>

</div>

2. Internal CSS :

The second way is to add CSS link into HTML is by using the internal CSS way. In order to use this way, we need to use an HTML tag called <style> tag (not style attribute) and between the style tags, we can write our CSS selectors & rules:


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ah2%7B%0Acolor%3A%20black%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

<body>
<h2>This is heading</h2>
</body>

3. External CSS :

The CSS & HTML is separated best practice. In the real programming, we need to keep HTML, CSS, and JavaScript in separate files and lateral import them where necessary. This way is improves readability & makes it is easier.

For example, we can create a CSS file like this one: index.css. Inside index.css, we write our CSS rules:

I wrote in index.css file in css folder:


h2 {

color: green;

}

Then you can import index.cssto HTML using a <link> tag like below:


<head>
<link rel="stylesheet" type="text/css" href="index.css">

</head>

<body>

<h1> Test Headline </h1>

</body>

You can read more: 3 Way to Add Javascirpt Code in HTML

Leave a Comment