Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I stuck on the number 13 of the task and for some reason I don’t understand why, I searched similar examples and they look just like mine styles.css but I can’t pass it.

System gives me note: “You should define a --color0 variable in your root selector”

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Availability Table</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<table>
    <thead>
    <tr>
        <th></th>
        <th scope="col">Monday</th>
        <th scope="col">Tuesday</th>
        <th scope="col">Wednesday</th>
        <th scope="col">Thursday</th>
    </tr> 
    </thead>
    <tbody>
    <tr class="sharp">
        <th scope="row" class="time">10am</th>
        <td class="available-1"></td>
        <td class="available-3"></td>
    </tr>
    <tr class="sharp">
        <th scope="row" class="time">11am</th>
        <td class="available-5"></td>
        <td class="available-2"></td>
    </tr>
    <tr class="half">
        <th scope="row" class="time">12pm</th>
        <td class="available-2"></td>
        <td class="available-4"></td>
    </tr>
    <tr class="half">
        <th scope="row" class="time">1pm</th>
        <td class="available-5"></td>
        <td class="available-4"></td>
    </tr>
    </tbody>
</table>
</body>

</html>

/* file: styles.css */
:root {
--color0: lightgreen;
--color1: teal;
--color2: green;
--color3: #00FF00;
--color4: #228B22;
--color5: darkgreen;
--solid-border: 2px solid black;
--dashed-border: 2px dashed gray;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.0.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Hi @dreamsofmyfriend
It looks like you may have already declared the variables, but i think the tests are also checking whether you actually used them in the right places!

For example, defining --color0 in :root is only part of the requirement!! you also need to apply it to .available-0 , and the same idea for the rest of the colors!

Please try reading that instruction carefully one more time. It asks you to:

  • define the variables in :root
  • and use them to set the background colors of the corresponding .available-# classes

Double-check both parts!!

Hope that helps :slightly_smiling_face:

3

I continued with the assignment and completed setting the background colors of the corresponding . available-# classes but nothing changed. Still doesn’t let me to go to next topics.

:root {

--color0: lightgreen;

--color1: teal;

--color2: green;

--color3: #00FF00;

--color4: #228B22;

--color5: darkgreen;

--solid-border: 2px solid black;

--dashed-border: 2px dashed gray;

}

.available-0 {

  background-color: var(--color0);

}

.available-1 {

  background-color: var(--color1);

}

.available-2 {

  background-color: var(--color2);

}

.available-3 {

  background-color: var(--color3);

}

.available-4 {

  background-color: var(--color4);

}

.available-5 {

  background-color: var(--color5);

}

.sharp td {

  border-bottom: var(--solid-border);

}

.half td {

  border-bottom: var(--dashed-border);

}
4

are you sure you are working with the correct css file?

5

I think your problem is that you have a single line in front of ‘color’ when defining the background color.

Try the dashed line:

background-color: var(- - color#);

6

Welcome to the forum @fivossf!

I edited the last post to make it more readable. Now you should be able to see that there are two dashes in front of the colors used. I’m pretty sure the issue here was exactly what @ILM pointed out. The CSS filename had a typo.

Happy coding!

7

Thank you for the response.It is more clear now.Yeah i see the issue that ILM pointed.Thank you all for helping us in this journey.

8

this is all I know on that stage of my learning

9

yeh nothing seems like working

I am stuck with the same message no matter what I am doing “You should define a --color0 variable in your root selector.”

10

You are NOT working with the correct CSS stylesheet. There is a typo in the filename.

11

my bad I really didn’t see that typo… it was stupid of me