Article is originally published @ bepractical
Hey developers , in this article I am going to show you where does css can be placed inside your html file .
So let’s get started : )
Method to place css in html file
- External css
- Internal css
- Inline css
External css
In this method , you have to write css in an external file and then link that css file in html file .
Let’s assume that you have made an style.css file in your html file directory , and wrote some css code in it . Then in html file you can link the css file like below example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Home Page</title>
</head>
<body>
<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>
</body>
</html>
<link /> tag is used to link css files in html file . Attribute href is used to give location of css file .
Your style.css does not contain any html tags and file will look something like this
#banner{
background-color: lightblue;
}
#banner p{
color: navy;
margin-left: 20px;
}
Let’s move toward the second method i.e., Internal css
Internal css
This is the second method to place css in html file . In this method there is no need to make an external file for css and link it to the html file .
In this method css is placed inside the html file inside <style> tag of <head> tag like the below code .
<!DOCTYPE html>
<html>
<head>
<style>
#banner{
background-color: lightblue;
}
#banner p{
color: navy;
margin-left: 20px;
}
</style>
<title>My Home Page</title>
</head>
<body>
<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>
</body>
</html>
Inline css
In this method all the css is applied in the style attribute of that tag like the example below . Style attriubte can contain any number of css properties .
Read full article here 👉 https://bepractical.tech/where-does-css-placed-in-html-3-places-for-css/
Top comments (0)