3 Ways to Add CSS link into HTML

Share This Post

CSS rules start work after they are being added to HTML. In this post, you’re going to learn how to add CSS links with 3 way differences:

What is a CSS Link?

A style sheet, or stylesheet as they are sometimes called in web development circles (though this term can also be used for non-style related files).

Consists mainly of two things: written text and formatting specifications such as color combinations.

Answer:

Adding a CSS file to your HTML is fairly simple. You just need to use the tag. The link tag should be placed between the tags in your HTML document. You can put it anywhere you want, but inserting it between these two other tags helps keep your code organized and easy to read.

Here’s an example of how to add a CSS file to your HTML document:

3 Ways 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 Ways to Add Javascript Code in HTML

spot_img

Related Posts

Python for Loop Iteration: How to Easily Manipulate a List

One of the most powerful features of the Python...

How To Get First Characters of a String in Python

Way to find the first characters of a string...

How To Convert Tuple To String In Python

In this post, you will learn how to convert...

How To Convert String to Double in Python

Good to hear, that you want to convert a...

Python TypeError: String Index Out Of Range Solution

A string is an array of characters and part...

How To Remove Empty Strings From a List Of Strings

On this page, we will discuss how to remove...
- Advertisement -spot_img