How to externally link css

<link rel="stylesheet" type="text/css" href="/product-style.css\">
	<title> Learn More</title>
	<h1>Learn More</h1>
</head>


<style>
div.safety{
 margin-right:100px;
}
p.article-1{
	font-family: sans-serif;
}





</style>

I tried externally linking my css to my html page but when I refresh it it doesn’t change at all.

i think you are missing a dot
e.g ./product-style.css\

It should be

<link rel="stylesheet" type="text/css" href="product-style.css">
2 Likes

place the css file in the directory where your HTML file is located. secondly, do not use the slash(/) in the href. Also, in external css file, you do not need to keep the css code inside style tag (<style> & </style>

2 Likes
<link rel="stylesheet" type="text/css" href="product-style.css">

You don’t need to use / inside the href however if your css file is in another flder you will be using

<link rel="stylesheet" type="text/css" href="fldrnm/product-style.css">
 <link rel="stylesheet" type="text/css" href="style.css">

div.safety{
 margin-right:100px;
}
p.article-1{
	font-family: sans-serif;
}

p.article-2{
	font-family: sans-serif;
}

I tried linking it again it’s in same folder as the index .html

Sometimes browsers don’t refresh as you might hope. Try a hard refresh.

still ain’t change at all

@abaaskills I checked the inspector and the css doesn’t even show up

OK, take the tags out of your .css file.
You only need the tags if your css is included in the html file.

@Spiderant


div.safety{
 margin-right:100px;
}
p.article-1{
	font-family: sans-serif;
}

p.article-2{
	font-family: sans-serif;
}

done

<!DOCTYPE html>
<html>
<head> 
	
	<title> Learn More</title>
          <h1>Learn More</h1>
         <link rel="stylesheet" type="text/css" href="style.css" media="screen">

</head>

still won’t even link I have everything in the same folder I have one main page and one subpage I tried to link it to the sub page and nothing.

remove the h1 from inside the head, that goes inside the body

what’s the name of your css file?

How do you know it is not linking?
Do you have more code in your HTML file?

  1. The h1 tag should not be in the head.
  2. There is no closing html tag.
  3. Your css is referencing tags that are not in your html. (e.g. div tag, p tag)

Yor HTML file should be looking like this:

<!DOCTYPE html>
<html>
<head> 
         <link rel="stylesheet" type="text/css" href="style.css" media="screen">
	<title> Learn More</title>
</head>
<body>
          <h1>Learn More</h1>
<!-- more code here if you need -->
</body>
</html>

Try this please.
And remove media="screen" for now.

FWIW

Thanks! that helped finally got it to link