How to link my HTML file to my CSS file
I am trying to link my html file to my css file. When I open the Chrome browser, I only see html. I have used both absolute and relative file linking and I have double and triple file checks. The index.html and style.css files are in the same folder, side by side, brothers and sisters.
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.
It seems to me that I have read every question of this nature here already, and no one seems to have had the same question as me. But if my code is wrong somewhere, maybe I just need a second set of eyes to see it.
I am a bit new to this and cannot be understood by life.
Thank you for your help!
source to share
As I said in my comment, you won't see "CSS" - it will just affect the HTML on your page.
The reason you don't see the red outline in everything is because you have a typo in your CSS:
*{
outline: 1px soild red !important;
}
Should be
*{
outline: 1px solid red !important;
}
EDIT: After you make this change, you might need a hard update to clear the cached version of the CSS - in chrome, you can do this by holding ctrl when you are fresh, eg. ctrl + f5.
source to share
Yours link
is fine. I downloaded it locally.
Your style is *
not working because it solid
has a spelling error.
outline: 1px solid red !important;
Next time use the chrome debugger to make sure the style.css file is loaded, then you might find out something is wrong elsewhere (like your css). If it is not loaded correctly, an error will occur (e.g. style.css was not found).
source to share