How to link my external style sheet?
How to link my external style sheet?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css"> - external stylesheet
<div class = "idiot" href = "css.css">Purchase!</div>
<title></title>
</head>
<body>
</body>
<style type="text/css">
.idiot { cursor:pointer; }
.idiot:link { color: gray; }
.idiot:visited { color: red; }
.idiot:hover { color: black; }
.idiot:active { color: blue; }
</style>
</html>
Under here is what is written in the external stylesheet-
body { background-color:black; }
So, I click on the link, but nothing pops up, and nothing even happens at all.
href
<a href="css.css"><div class = "idiot">Purchase!</div></a>
<div class = "idiot" onclick="javascript:window.location'">Purchase!</div>
Your file is probably named wrong or not in the same folder. Are there any error messages in the browser dev console?
– Capricorn
Jun 3 at 13:32
1 Answer
1
There are many things wrong with your code. The head is reserved for meta-tags, links, the title etc. You can not define elements (like div) in there.
meta
link
title
div
You correctly linked your stylesheet with:
<link rel="stylesheet" type="text/css" href="css.css">
Be sure to check if the path inside href is correct and css.css is indeed in the same folder as your HTML-file.
href
css.css
All styling should be done inside the css.css from now on. It gets applied automatically so you don't have to and are not allowed to use href inside a div. You also can not click anything right now because that would require something like <a href="dest">Link</a>.
css.css
href
div
<a href="dest">Link</a>
Here is a snippet:
body {
background-color: green;
}
.idiot {
cursor: pointer;
width: 100px;
height: 100px;
background-color: orange;
color: black;
}
.idiot:link {
background-color: gray;
}
.idiot:visited {
background-color: red;
}
.idiot:hover {
background-color: black;
color: white;
}
.idiot:active {
background-color: blue;
}
<html>
<head>
<title>title of the website</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="idiot">
Purchase!
</div>
</body>
</html>
Be sure to put all CSS code into your stylesheet. I added some styling to your div so you can see the difference properly. I also added background-color to make the difference more drastic since color only styles the text.
background-color
color
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You cannot set a
hrefattribute for a div. Either try<a href="css.css"><div class = "idiot">Purchase!</div></a>or<div class = "idiot" onclick="javascript:window.location'">Purchase!</div>– Wais Kamal
Jun 3 at 13:32