Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to link my HTML file to my CSS file [closed]

Tags:

html

css

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!

like image 769
StevieNB Avatar asked Nov 23 '25 05:11

StevieNB


1 Answers

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.

like image 172
Rory O'Keeffe Avatar answered Nov 24 '25 22:11

Rory O'Keeffe



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!