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:
Contents
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="<style>" title="<style>" /> <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