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 .

<!DOCTYPE html>
<html>
<head>
<title>My Home Page</title>
</head>
<body>

<h1 style = "color:green;font-size:25px;font-weight:300;" >Welcome to Homepage !</h1>
<p style = "color:red;font-size:18px;font-weight:300;font-style:italic;">Greetings :)</p>

</body>
</html>

Priority of styles

When there is more than one method is used to apply styling in html , then priority is given to styles according to below hierarchy .

  • Inline Style ( first priority )
  • Internal style (second priority )
  • External style ( third priority )

In this way the priority of style in html file is decided .

So that’s all for this aritcle readers : ) . You can

Follow me on Linkedin : Anand Raj

Follow our Linkedin page : Be Practical

Join Our Telegram community over here

Checkout our latest course on udemy

where does css placed in html - bepractical.tech

Chat Application with Javascript , Jquery and Firebase

Rating : 4.8

2.5 Total Hours | 27 Lectures | Intermediate

Enroll Now

Next Article : Easiest way to connect database with javascript : 3 simple steps

Thanks for reading ✌