I am struggling to link my html file to my css file. When I open in chrome browser I only see the html. I have used both absolute file linking and relative and have double and triple checked my file locations. Both the index.html file and style.css file are in the same folder, side-by-side, siblings.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">My App</h1>
<div class="app">
<div class="screenshot"> image</div>
<div class="description"
>This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. </div>
</div>
</body>
</html>
style.css
*{
outline: 1px soild red !important;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.image {
max-width: 460px;
}
.desription {
max-width: 705px;
}
The files are in the same folder, together.
I feel like I've read every question of this nature on here already and no one seems to have had the same issue as me. But if my code is wrong somewhere, maybe I just need a second set of eyes to see it.
I'm somewhat new to this and can't for the life of me figure it out.
Thanks for your help!
As I said in my comment, you won't "see" the CSS - it will just affect the HTML on your page.
A reason why you aren't seeing the red outline on everything is that you have a typo in your CSS:
*{
outline: 1px soild red !important;
}
Should be
*{
outline: 1px solid red !important;
}
EDIT: Once you make this change, you may need to do a hard refresh in order to clear the cached version of the CSS - in chrome you can do this by holding ctrl when you fresh, e.g. ctrl + f5.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With