So, there are mainly three ways to add CSS to any HTML document. One of the ways, we have already seen.
In this method, we can simply add CSS to the particular HTML tag using the style keyword.
<h1 style=" color : red ">Hell, I'm Using In line CSS</h1>Ouput :
This way minute styling of the HTML document can be easily done without any hassles.
But still, generally, this method of adding CSS is not advised as it can create confusion in the tags and thus decrease the readability of code.
Also, with this method of styling, you can’t use quotations within inline CSS. The quotations will be treated as the end of style and therefore stopping the block of code.
This method would sound similar to you because we used this method originally to write our first CSS code.
Let’s try that again using another property. Create a style tag in the head of the HTML document and write the following code.
<style>
body {
color: turquoise;
background-color: brown;
text-decoration: underline;
}
</style>
This tag selects the body and performs 3 operations on the text written in the body. Therefore the output would look like this-
Ouput :
As the name suggests, in this method we explicitly create a file name style (name can be changed) with the extension ‘.css’. Then we link this file in the head tag of the HTML document.
This style sheet can be linked with any number of documents thus making it easy to use everywhere.
Let’s look at the implementation of the same. First, you need to create a file with the name “style.css” in the same folder where your HTML file is present. Later using the following command in the Head tag the file would be linked with the HTML document.
<link rel="stylesheet" href="style.css" type="text/css">Here, “rel” defines the relationship between a linked resource and the current document, and “style.css” is the file we have created. Right now my file is already in the same directory as the HTML file so I don’t need to give the absolute path.
As you can see, I used the basic functionality of VS code and directly created a file called “style.css”. (I used ctrl+click to open the popup bar)
These were some ways in which you can link your CSS to your HTML file. But as a rule of thumb, external CSS is the best method to do so.