Stylesheet not loading

HTML-CSS
1

I am working on the JavaScript cash register project.

I have
``

`` in the head of my HTML. I tried "/styles.css" and "./styles.css" with the dame result: the stylesheet is not applied.

Is the stylesheet for that project named styles.css or something else? I am sure everything I did was saved.

2

Hi,
I am unsure since you didn’t share your code, but did you try styles.css?

3

hey, try not to open multiple topics for a single project or step in fcc.
(remember that for next time)

4

That’ what I did. Other lines in the css or HTML shouldn’t affect this.

The css is below:

``
body {
margin: 0;
padding: 0;
display: block;
}

h1 {
text-align: center;
margin-bottom: 10px;
}

.purchase-btn, clear-btn {
width: 100px;
height: 60px;
margin-right: 40px;
border-width: 3px;
font-size: 18px;
color:white;
background-color: green;
}
``

5

post the html too so we can see it

6

I don’t know how that happened. Sorry.

7

Normally, adding styles.css to your href should work. But yeah share your HTML too please.

8 
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cash Register</title>
</head>

<body>
  <h1 class="main-title">Cash Register</h1>
  <div class = "input-container">
    <label for="cashPaid">Cash</label>
   <input value="' name="cash" id="cash" class="cash"  type="number">
    <button id="purchase-btn" class="purchase-btn">Purchase</button>
    <button id="clear-btn" class=">Clear</button>
  </div>
  <div id="change-due"></div>
  <script src="script.js"></script>
</body>

</html>
9

Try adding your code, then select all and ctrl + e or just use preformatted text from the toolbar. Right now we don’t see your code.

10

Not really my problem, but I will try again.

``

Cash Register

Cash Register

Cash Purchase

``

11

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
12

Ok.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cash Register</title>
</head>

<body>
  <h1 class="main-title">Cash Register</h1>
  <div class = "input-container">
    <label for="cashPaid">Cash</label>
   <input value="' name="cash" id="cash" class="cash"  type="number">
    <button id="purchase-btn" class="purchase-btn">Purchase</button>
    <button id="clear-btn" class=">Clear</button>
  </div>
  <div id="change-due"></div>
  <script src="script.js"></script>
</body>

</html>
13

Your code works perfectly for me ( your link to your styles). The styles apply too, and I don’t think there is a problem in that part. Try maybe reloading the page.

14

looks like you have some errors in this html
Can you fix them all and see if that helps?
https://validator.w3.org/nu/#textarea

15

Yeah. But there is an inconsistentency. The HTML in the guided lessons and all og the responsivve Web Design lessons and projects have the closing forward slash on self-closing “void” tags. It was how I was taught.

Why is the code validator flagging this as an error?

16

the validator should mention why.
It is not important for this test but in general I don’t use the closing slash myself on self-closing elements.

(also I think it is tagging those as ‘info’ not ‘error’)

17

Thede didn’t seem be marked as warnings. There were other things in the errata that seem to indicate a different release of HTML.

18

when I try I see they are marked as info. You have other more serious issues to fix.

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 6, column 3; to line 6, column 26

s.css">↩  <meta charset="UTF-8" />↩  <me

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 7, column 3; to line 7, column 57

F-8" />↩  <meta http-equiv="X-UA-Compatible" content="IE=edge" />↩  <me

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 8, column 3; to line 8, column 74

dge" />↩  <meta name="viewport" content="width=device-width, initial-scale=1.0" />↩  <ti
19

Ok. I saw XML 1.0 mentioned in the errata. Yes, I was incorrect. Those entries were marked as"info". Thank you.

20

I corrected the code and got a new set of errors that seem out of context. The code and errata are below. I edited to keep only the errors and warnings for briefness.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"    content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cash Register</title>
</head>

<body>
  <h1 class="main-title">Cash Register</h1>
    <label for="cash">Cash</label>
   <input value=0 name="cash" id="cash"  class="cash"  type="number">
  <button id="purchase-btn"  class="purchase-btn">Purchase</button>
  <button id="clear-btn"  class=">Clear</button>
  <div id="change-due"></div>
  <script src="script.js"></script>
</body>

</html>

Error: No space between attributes.
At line 16, column 12

on>↩

</d

Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.
At line 16, column 22

id=“change-due”>

:leftwards_arrow_with_hook: <scr

Warning: Attribute change-due" is not serializable as XML 1.0.
From line 15, column 3; to line 16, column 23

button>↩ <button id=“clear-btn” class=">Clear:leftwards_arrow_with_hook:

Error: Attribute change-due" not allowed on element button at this point.
From line 15, column 3; to line 16, column 23

button>↩ <button id=“clear-btn” class=">Clear:leftwards_arrow_with_hook:

Error: Stray end tag div.
From line 16, column 24; to line 16, column 29

ange-due">:leftwards_arrow_with_hook: <sc

Error: End tag for body seen, but there were unclosed elements.
From line 18, column 1; to line 18, column 7

:leftwards_arrow_with_hook::leftwards_arrow_with_hook:</htm

Error: Unclosed element button.
From line 15, column 3; to line 16, column 23

button>↩ <button id=“clear-btn” class=">Clear:leftwards_arrow_with_hook:

Line 16, div with id of “change-due”:

No space BETWEEN attributes: There is only one attribute. Between indicates that there are two.

Quote in attribute: I found that all of my quotes are matched. The attribute is supposed to be quoted.

My button tags and body taghave both opening and closing

“change-due” on element button might be happening because of other errors.

Again, I had the validator set for HTML5. Why is it always confounding the evaluation with XML1?

It is frustrating and confusing. Can you help me to understand this. It doesn’t add up.