In this tutorial we will show you how to link CSS with HTML, in HTML, we know that there are three types of CSS and all of them are used for same work, but their styles, patterns and their ways that how we use them are different.
Already in our previous sessions we talk about CSS and their types. And today, we will show you that how to link an external CSS file in html
Step By Step Guide On How To Link CSS With HTML :-
As, there are three ways to add CSS in html. That are:
- Inline CSS
- Internal CSS
- External CSS
And first two from them do not generate any external file that we have to link in our html file. So, the last one that is external CSS.
In which an external file is created which need to link in html file. But except the concept of linking file, all the work is same in all CSS types.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="para">
this is mine para
</p>
<h1 class="heading">
this is heading tag, you can use any
</h1>
<div class="div">
you can also use div
</div>
</body>
</html>
Style.css file
.para{
font size:20px;
font-family: arial;
width: 200px;
height:100px;
background-color:red;
}
.heading{
font size:20px;
font-family: arial;
width: 200px;
height:100px;
background-color:black;
}
.div{
font size:20px;
font-family: arial;
width: 200px;
height:100px;
background-color:white;
}
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- Both have </head> and </title> ending tags respectively. But in this before closing head tag, we have to link CSS file and for this we have to use link tag and its attributes like rel and href. Where rel is used to define about what type of sheet is it and in href we have to give the CSS file name with its location.
- Here, we save the CSS file in same folder of HTML. So, we simply type the name.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create three different tags to show you that external CSS can be applied to any tag in html. After this the content is written according to developer’s choice.
- But before finishing this, we have to give the class name, you can use any name, but the name used here is exactly same to the class name in CSS file.
- In CSS file, we have to write the class name and a dot as prefix after this curly brackets are opened and then the property which you want to give the tag of same class name.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we find that the link is only used in external CSS and the name of the class name in CSS file must be same to the class name as in HTML file. I hope this tutorial on how to link CSS with HTML helps you.
About Pragati
