What causes my CSS not to be loaded by my HTML file?

Question

All seems correct, but my CSS does not get loaded. It appears in the console on devTools (using chrome) but no CSS actually happens.

Have been through the numerous questions about this but no answers there provided a solution.
Have disabled the cache in devTools, no change, re-enabled it no change.
Have triple checked the spelling of my file names.
Moved the file to the same directory
Tried adding type="text/css" - no change.

the HTML:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Army Builder</title>
  <link href="styles.css" rel="stylesheet">
</head>
  <div id='Container'>
    <div id="unitList">Unit List
    <ul id="list" style="list-style-type:none"></ul>
    </div>
    <div id="roster">Army Roster
    <ul id="armyRoster" style="list-style-type:none"></ul>
    </div>
    <script src="scripts/main.js"></script>

  </div>

the CSS:

@charset "utf-8";

.Container {
  background-color: blue;
  display: grid;
  grid-template-rows: [one] 50px [two] 50px [rowEnd];
  grid-template-columns: [one] 150px [two] 300px [three] 150px [end];
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  text-align: center;
}

.unitList {
  background-color: red;
  grid-column: one / two;
  grid-row: one / rowEnd;
}

.roster {
  background-color: green;
  grid-column: three / end;
  grid-row: one / rowEnd;
}

I am fairly certain it must be a simply error, but my eyes can't see it ?

Please excuse the weird title, stack had some serious issues with me giving it a simple descriptive title. — Georges Le Vaillant, Jul 25 '19 at 10:10

Álvaro Tihanyi · Accepted Answer · 2019-07-25T10:16:34.677

You are using ids in your HTML but using class selectors in your CSS. Change your CSS to:

#Container {
  background-color: blue;
  display: grid;
  grid-template-rows: [one] 50px [two] 50px [rowEnd];
  grid-template-columns: [one] 150px [two] 300px [three] 150px [end];
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  text-align: center;
}

#unitList {
  background-color: red;
  grid-column: one / two;
  grid-row: one / rowEnd;
}

#roster {
  background-color: green;
  grid-column: three / end;
  grid-row: one / rowEnd;
}

Alternatively, you can change your HTML to use classes instead of ids:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Army Builder</title>
  <link href="styles.css" rel="stylesheet">
</head>
  <div class='Container'>
    <div class="unitList">Unit List
    <ul id="list" style="list-style-type:none"></ul>
    </div>
    <div class="roster">Army Roster
    <ul id="armyRoster" style="list-style-type:none"></ul>
    </div>
    <script src="scripts/main.js"></script>

</div>

Could also replace "id" with "class" in the HTML instead – DenverCoder1 Jul 25 '19 at 10:14 — DenverCoder1, Jul 25 '19 at 10:14

score 0 · Answer 2 · answered Jul 25 '19 at 10:13

0

There is mistake in you css.

In Html you are writing id which need to define in css as # and class as .

answered Jul 25 '19 at 10:13

Sumit Patel

4,530
1
10
28

What causes my CSS not to be loaded by my HTML file?

2 Answers2