CODEWITHSUNDEEP
htmlcss
HYUNG JUN GU
HYUNG JUN GU

Reputation: 124

Why does in chrome browser CSS file has a problem?

I'm very new to HTML, CSS, and JS. I've just watched a youtube lecture for making the "Rock Paper Scissors" game website. At the very early stage, I'm stuck when I make a CSS file. Like this.

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@600&display=swap');

*{
    margin: 0;
    padding : 0;
    box-sizing: border-box;
}

header{
    background : white;
    padding: 20px;
}

header > h1{
    color :  #25272E;
    text-align: center;
    font-family: Asap, sans-serif;
}

body{
    background-color: #25272E;
}

.score-board{
    margin : 20px auto;
    border : 3px solid white;
    border-radius: 4px;
    width : 200px;
    text-align: center;
    color : white;
    font-size: 40px;
    padding : 15px 20px; /*top-bottom left-right */
    font-family: Asap, sans-serif;
    position : relative;
}
.badge{
    background : #E2584D;
    color: white;
    font-size: 14px;
    padding : 2px 10px;
    font-family: Asap, sans-serif;

}

#user-label{
    position : absolute;
    top: 0px;
    left : 0px;
}

And in my HTML file, I just add it to the header. Like the way, I've learned.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Rock Paper Sissors Game</title>
        <link rel="stylesheet" type="text/css" href="css/page_styles.css">
    </head>
    <body>
        <header>
            <h1>Rock Paper Sissors</h1>
        </header>
        <div class="score-board">
            <div id = "user-label" class="badge">user</div>
            <div id = "computer-label"class="badge">comp</div>
            <span id="user-score">0</span>:<span id="computer-score">0</span>
        </div>
        <div class="result">
            <p>Paper covers Rock. You Win!</p>
        </div>
        <div class="choices">
            <div class="choice" id="r">
                <img src="images/hand_rock.png" alt="">
            </div>
            <div class="choice" id="p">
                <img src="images/hand_paper.png" alt="">
            </div>
            <div class="choice" id="s">
                <img src="images/hand_sissors.png" alt="">
            </div>
        </div>
        <p id="action-message">Make your move</p>
    </body>
</html>

I've double-checked the file's location and there is no problem at all. But whenever I launched the HTML file, my page style doesn't change at all. For the first time, I checked the sources of HTML through the inspecting function in Chrome. It was like this.

img_1

But as soon I reload my page the CSS source file changed to like this.

img_2

I really don't know why my CSS file not working in Chrome browser. Coz in Microsoft's Edge the problem doesn't appear.

My Html CSS image :

img_3

My chrome screen :

img_4

When I push F4(Reload Page) :

img_5

It seems like my CSS file has gone.

Upvotes: 0

Views: 90

Answers (1)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Ok first your CSS file is fine and it is not gone at all. To find the CSS file and check it out go to your editor and navigate to the CSS link:

<link rel="stylesheet" href="assets/css/style.css">

hover over the href and alt + click you will find your file, another way to locate your CSS file in the editor and reveal in Explorer.

If you were able to find your CSS file make sure you are adding the accurate path in your link tag.

In case you still can't find the file please use the search in your PC it will show up for sure.

Also based on the images you posted every single change you were making is only restricted to the copy on the browser. Since you were using the page option as I have seen from the images you showed us, try to use a hard reload by clicking ctrl + shift + R maybe that will solve the Chinese letters thing. or close the page and try to reopen it after the hard reload.

Also if you added body { background-color-:red; } at the top of your page it will be overridden by your CSS code Since order matters.

body {
    background-color: #25272E;
}

another thing since you are using the developer tools to make changes to your files, here is a tip for you do please use this feature to make the changes apply to your local copy too.

1- navigate to Sources > overrides > selete folder to override (your project folder) first step

2- make sure the local override is checked.

second image

3- choose the file you want to edit after that save your changes and reload the changes will happen and your local copy has been changed as well.

I'm not sure if this what you are trying to say. But anyway I hope this was helpful.

Upvotes: 2

Related Questions