Just delving into the world of HTML, CSS, and JS. Recently followed a tutorial on creating a "Rock Paper Scissors" game website on YouTube. Currently facing an issue while setting up the CSS file in the initial stages. Here's what I've tried.
@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;
}
In my HTML document, I included it in the header section as per my learning process.
<!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 verified the file paths and they seem correct. However, upon launching the HTML page, the styles are not being applied. Initially, I inspected the sources through Chrome developer tools, and everything seemed fine.
But after refreshing the page, the CSS source link changed unexpectedly.
This issue is specific to the Chrome browser as it works fine on Microsoft Edge.
Images for reference:
HTML CSS image -https://i.sstatic.net/rXAkb.jpg
Chrome display -https://i.sstatic.net/XCx3m.jpg
Upon reloading the page -https://i.sstatic.net/QY1hb.jpg
Seems like the CSS file disappears upon refresh.