In this article we will show you the solution of how to include css in html, majority people know if don’t know this tutorial help you out to learn about css implementation.
You can include css in three ways inline, internal or external. From those three you can choose whatever type of method.
Three methods will give you expected or same result. The method of dentition only differ result will same and code also same.
Step By Step Guide On How To Include CSS In HTML :-
In our program we are shown three type of usage for your understanding.
Within example code we used three h1 tags each one styled by different method of css.
First h1 text styled by inline css, second h1 text styled with internal css and third one styled through external css.
In this way, we covered three types of style implementation and error-free result.
Instead of h1 you can choose any other html element with other css styles.
<!DOCTYPE html>
<html>
<head>
<title>Including Process Of CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>
.incss{
color: green;
}
</style>
<h1 style="color: red;">This is inline css style</h1>
<h1 class="incss">This is internal css style</h1>
<h1 id="excss">This is external css style</h1>
</body>
</html>
style.css
#excss{
color: brown;
}
- <!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.
- Next we defined <link> tag, which is used to attach or import externally defined or separately defined css file to this html file. So now you can use defined in external file css styles in this html file.
- Here ‘rel’ attribute denotes type of file, src-used to set path of file to full-fledged apply that styles in the current file.
- If you want to use external method, then you have to follow same rule with your exact file path information.
- 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.
- In body section first we defined style pair tags, this is internal style category. In html file you can define as much you wanted css styles here. We provide definition of css only color property with required value.
- In body of webpage we defined three h1 tags with respected texts, ‘This is inline css style, This is internal css style, This is external css style’.
- In first h1 tag we used inline css style method, so you have as like given example define style tag at the open tag of html element with required styles, separated by semicolon (;).
- From these three inline having first priority, then internal and only external. Reason is inline pattern directly injecting styles for selected elements than other two. In this order it gives priority, if you giving 3 types of style to same element with same property except values.
- Then, as we said order-wise it will takes css for that particular element. The inline style only replicate on webpage. May everyone know for remaining purpose once we tell you. Check whether class or id attributes same with all type of implementation of css styles.
- Otherwise you cannot get result before execution, once check it.
- 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 include css in html file instantly.
When we executes this program on webpage of browser you can see three h1 tags with three different colors implemented by three different definition.
If you think to try modification you can do it on class or id name and styles instead color you can add any other styles with h1 texts.
As per your changes you will get result at webpage.
In case you facing any error, then you need to ensure that name of id or class names are same on html and appropriate css definitions.
I hope this article on how to include css in html helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
