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.
But as soon I reload my page the CSS source file changed to like this.
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 :
My chrome screen :
When I push F4(Reload Page) :
It seems like my CSS file has gone.
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)
2- make sure the local override is checked.
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.
Related
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
color: #fff;
background-color: #5995DA; /* Blue */
padding: 20px 0;
display: flex;
justify-content: center;
}
.menu {
border: 1px solid #fff;
width: 900px;
display: flex;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='/css/style.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='date'>Aug 19, 2016</div>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</body>
</html>
this is my html it works fine in my browser my biggest issue is my css when i try checking that my code works in my google browser only my html shows up no matter when i do but when i past the code in the stack overflow snippit it works i dont understand it. im still new to coding.
Go the inspect page section and check whether the css file is imported properly.
Right click on the text that is displayed on the web page and click Inspect
Elements Tab
Select the Elements tab as show in the image
On the below Please select the Style Tab. There you can see the CSS style that you used in the css file.(Not the whole will be displayed. Only the HTML used inspect will be displayed.)
Style Tab
Additional note:
style image
If you are seeing like this(check the above image) click that and it will take you the css file. If it's now displaying then check the import of the css file in the tag.
Check the CSS file Name - style.css
and check the page and folder name - **/css/style.css
Please like the answer
You can view the css currently in use by the loaded webpage in the developer tools of your browser by right-click and inspecting the opened page.
You can see what, if any, css file is loaded, experiment with different values, and figure out where to go from there
enter image description hereBelow my code runs fine, but when I preview the html file in browser, none of the styling shows up. When I inspect the element in Chrome dev tools, it shows that it is still trying to just access "style.css" instead of the path I wrote in. I cleared browser cache, I closed and reopened the page, refreshed it, saved the file and closed IDE, etc. What am I doing wrong?
body {
background: -webkit-linear-gradient(-45deg,#FFFED4,#FFEEFF)
}
h1, p, h3{
font-family: Arial;
color: black;
}
h1 {
font-size: 60px;
text-align: center;
}
p {
font-size: 25px;
text-align: center;
}
img {
display: block;
margin-left:auto;
margin-right: auto;
width: 50%;
}
h3 {
font-size: 25px;
font-family: Helvetica;
position: relative;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>We Apologize</title>
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<link rel="icon" type="image/gif/png" href="./resources/img/Brighton-McFarlane13.png">
</head>
<body>
<main>
<h1>We apologize</h1>
<p>The site is under construction right now, but we are doing our best to bring it to life! Check back in a few weeks to see the final product!</p>
<img src="https://i.imgur.com/YjMR0E6.jpg">
</main>
<article>
<p>Soon this site will be a portfolio, shop, and forum for the Brighton McFarlane YouTube Channel!</p>
<img src=./resources/img/Brighton-McFarlane12.png>
<h3>Thanks for stopping by!</h3>
</article>
</body>
<html>
sounds like an issue with your relative path. I cannot see how your file directory is set up but try href="resources/css/style.css"
if it still doesn't work you need to move up a folder.
href="../resources/css/style.css"
hope this helps!
Well turns out I'm an idiot and updated the file path of the html file and Atom didn't automatically update where the file was located, it created some sort of imaginary copy of it. I saved the file to the proper folder and it is working now.
If the resources folder is in the root of your site/folder structure, remove the . before the slash.
<link rel="stylesheet" type="text/css" href="/resources/css/style.css">
What does "./" (dot slash) refer to in terms of an HTML file path location?
/ means the root of the site;
./ means the current directory;
../ means the parent of the current directory.
At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
I'm adding an accessibility tool of users being able to increase the font-size of all the text on the page, and being able to go back to the default font-size if they wanted to. I have made a second CSS file which holds the css rules for the text to increase. However when I click on the icons I made for the text larger/text smaller it does not work. Can anybody understand why? Thanks for the help.
HTML code on the home page:
<div id="font-size-buttons">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmin.png" width="25" height"25" alt="Switch to original text size and colours">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmax.png" width="30" height="30" alt="Switch to larger text and improved colour contrast">
</div>
Some of the default CSS stylesheet code:
.body {
height: 100%;
overflow: auto;
padding-bottom: 25px;
font-size: 0.75em;
}
/* accessibility */
#font-size-buttons {
float: right;
clear: both;
margin-right: 5px;
}
And the CSS from the alternative stylesheet:
body {
font-size: 1.5em;
}
And the linking stylesheet code at the top of my index.html page:
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="http://me14ch.leedsnewmedia.net/slate/notaccessible.css" rel=alternate stylesheet" type="text/css" title="access"/>
The website link: www.me14ch.leedsnewmedia.net/slate
That's because changeCSS is not defined.
in onclick="...."> you execute a piece of Javascript, in your case a function called changeCSS with the variables 'notaccessible.css' and 2.
But nowhere in your code you have a function called changeCSS. So you either have to write that function, or change your html.
[edit]
made a little example fiddle
I have this very simple file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
While the stylesheet is style.css
h1 {
.color: blue;
.font-style: italic;
}
Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"
h1 {
color: rgb(0, 15, 173);
}
But then why isnt the style.css getting loaded, while Im using the same correct code as above.
Already referred to CSS not working in stylesheet didnt help either
Just remove the "." from your style style.css ie
h1 {
color: blue;
font-style: italic;
}
You are defining css attributes as class names.
Ur code:
h1 {
.color: blue;
.font-style: italic;
}
How it should be:
h1{
color:blue;
font-style: italic;
}
The dott, which you used infront of the css attributes does just get used with classnames. For example:
Html:
<div class="ClassName"></div>
<div id="ClassName"></div>
CSS:
.ClassName{
font-size:12px;
}
#ClassName{
font-size:12px;
}
<!-- #className = div id -->
<!-- .className = div class -->
I'll give a tip how to divide and conquer problems like this:
First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).
Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.
And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.