In this tutorial we will show you the solution of how to link external CSS to HTML, as we know css used to style html elements, here we used css as external method then only we can link that external css file to html file.
We inserted background image to body element by using style property ‘background-image’. The url value contain path information of image to be set as background on webpage.
Using ‘background-size’ property we sets background image to entire screen of webpage and it has many options like ‘auto, contain or cover’ so we have to use which one has behavior to cover screen size.
Step By Step Guide On How To Link External CSS To HTML :-
We can implement styles using three types (i.e inline, external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
Here we used external style method and in our program we defined block of style properties to style body of html webpage.
First we have to sets body element width and height to ‘100%’ then only we can cover entire screen after that we have to insert background image then using ‘background-size’ property value to ‘cover’ we fits background to screen size.
<!DOCTYPE html> <html> <head> <title>EXTERNAL CSS</title> <link rel="stylesheet" href="ext.css"> </head> <body> </body> </html>
ext.css
body{
background-image: url("background.jpg");
background-size:cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Here we defined styles at separate file to style <body> element and for access those styles we need to link that ext.css file to our html page so we used <link> tag and using attribute ‘href’ we linked css file, ‘rel’ attribute refers type of file ‘stylesheet’.
- Within CSS file we sets ’width and height’ property used to cover screen size so we set’s value to ‘100%’ then ‘background-image’ property used to insert background.
- The ‘background-size’ property value sets as ‘cover’ used to fit background image size to screen size and ‘background-repeat’ property used to avoid image repeat which is occur only when our image size is too small it will repeatedly display same image to fill element size so we have to sets to ‘no-repeat’ value.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here. Here we added all styles to <body> tag by as we seen earlier at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to link css external file to html.
When we have to use external file contains we need to link those file using respective importing tags from html and we have to confirm that location of file we are given otherwise it can’t available on our html page.
Here we seen about how to link css external file but we have options to link external ‘script files or cdn, txt file, json files’.
So later we will see about those all thing. I hope this tutorial on how to link external CSS to HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
