How To Link A CSS File To HTML
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Anjali
In this tutorial we will show you how to link a CSS file to HTML, in HTML, CSS is used to give styles to a webpage. In general, the code that we write in HTML in any tag is pasted or showed on webpage as it is, with the help of browser.
As, style that we have write in first line for CSS is meant here to colors, sizes, margins, background, sizes and etc. Hence, CSS is used to give styling effects that gives an eye-catching effect to webpages.
Step By Step Guide On How To Link A CSS File To HTML :-
As, CSS is used for make a creative and colorful website because HTML itself is not enough only to make a website properly. We can use CSS in HTML in three ways, which are:
- Inline CSS
- Internal CSS
- External CSS
Here we give an example of external CSS that how you able to use this.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<link rel=”stylesheet” href=” file_link_is_given_here_with_its_path”>
</head>
<body>
<p>
this is a paragraph in red color and font size 15px
</p>
<h1>
this is heading with background color
</h1>
</body>
</html>
Whereas, the code of CSS file is as:
p{
color: red;
font-size: 15px;
border: 1px dashed black;
}
h1{
background-color: blue;
color: white;
text-align: center;
}
- 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. So, both have </head> and </title> ending tags respectively. Now, before closing head tag we have to add link tag in which we give the path in href attribute.
- For path we have to select file in which u save CSS code and it must have .css extension, after this from its properties select its path and paste in href attribute.
- <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, we create only paragraph and heading tag and write some content in it. But for CSS we have to specify about classes to these tags. So, we are able to give CSS to particular tag.
- Whereas in body of CSS, we specify some of its attributes with its value and all the attributes are written in some classes with the (.) as prefix, which indirectly indicates to particular tag where CSS is applied.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, in the passage we know about how to link a CSS file to HTML file to make a webpage more creative.
Mostly external CSS is used where all the layouts and designs in webpages are same but content is different.
You can find that website is a combination of webpage and in a webpages almost all the webpages have same layout, colors and design, but different contents.
I hope this tutorial on how to link a CSS file to HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
