How to add external CSS to HTML?

I want to be able to link external css as my code is getting too big. I have saved a notepad with the name “color.css” that changes text to green. I have looked at tutorials but it doesn’t seem to link?
Code:

<html>
<head>
<link rel="stylesheet" type="text/css"href="/color.css" >//I also tried putting color.css without the relative path
<title>First CSS tutorial</title>
</head>
<body>
<p>Type or copy paste some text here….Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Ipsum.</p>
</body>
</html>
<link rel="stylesheet" type="text/css" href="color.css">

if color.css in the same directory as index.html, you don’t need to put /color.css.

if its color.css is in a sperate file called cssFolder (for example) you would use

<link rel="stylesheet" type="text/css" href="cssFolder/color.css">

Do you need to save the html into a file? I put the html code on codepen.

Yea so you’re html and css should be in the same file like this:


if you do that … then you link the external css with:

<link rel="stylesheet" type="text/css"href="color.css" >
1 Like

I got it! Thank you!

1 Like

Nice! Happy Coding :smile:

1 Like