How do I solve a problem with a CSS file?-CodePudding

I am a new user and this is my first post on StackOverflow.
I wanted to try to code an Infinity RGB animation using HTML and CSS and to get the work done, I followed this video's instructions (https://youtu.be/dxquAfnHhqg).
When I ended coding, in my CSS file appeared 2 errors at line 3 margin 0; and line 4 padding 0;, where both "0s" are underlined and with the message colon expectedcss(css-colonexpected) and I don't know how to fix them even if I perfectly copied the source code shown in the video (the CSS coding in the video starts at 1:00).
I also searched here on StackOverflow, I tried to change my file extension from .css to .sass but I didn't manage to solve this problem.
Also when I run my program, it only shows me a full-screen multicolor gradient background, while there should be the Infinity animation.
It would be very helpful if you tried to explain to me what is the problem and how to solve it.
Thank you guys for your time and for your help.

Here is the source code:

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateColor 8s linear infinite;
}
@keyframes animateColor
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}
section.container
{
    display: flex;  
}
section.container.circle
{
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 -7.5px;
}
section.container.circle span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
    /* 360 / 20 = 18deg */
}
section.container.circle span::before
{
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 7.5px);
    width: 15px;
    height: 15px;
    background-color: #00ff0a;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff0a,
    0 0 20px #00ff0a,
    0 0 40px #00ff0a,
    0 0 60px #00ff0a,
    0 0 80px #00ff0a,
    0 0 100px #00ff0a;
    transform: scale(0.1);
animation: animate 4s linear infinite;
animation-delay: calc(0.1 * var(--i));
}
@keyframes animate
{
    0%
    {
        transform: scale(1);
    }
    50% , 100%
    {
        transform: scale(0.1);
    }
}
section.container.circle:nth-child(2)
{
    transform: rotate(-180deg);
}
section.container.circle:nth-child(2) span::before
{
animation-delay: calc(-0.1s * var(--i));
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Infinity Dots Animation Effects</title>
        <link rel="stylesheet" href="styleInfinity.css">
    </head>
    <body>
        <section>
            <div >
                <div >
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
                <div >
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
            </div>
        </section>
    </body>
</html>

CodePudding user response：

The main reason why the results weren't showing, is that you wrote the CSS in an incorrect way.

To summarize, section.container.circle is not the same as section .container .circle.

Could you address the difference? It's the spaces between each class/tag name

Please refer to this https://www.w3schools.com/cssref/css_selectors.asp to understand how CSS selectors work.

Also, as Kip answered, you had an error with margin: 0; and some minor incorrectly written CSS within your original code that I fixed.

Here's the final working code:

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateColor 8s linear infinite;
}
@keyframes animateColor
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}
section .container
{
    display: flex;  
}
section .container .circle
{
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 -7.5px;
}
section .container .circle span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
    /* 360 / 20 = 18deg */
}
section .container .circle span::before
{
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 7.5px);
    width: 15px;
    height: 15px;
    background-color: #00ff0a;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff0a,
    0 0 20px #00ff0a,
    0 0 40px #00ff0a,
    0 0 60px #00ff0a,
    0 0 80px #00ff0a,
    0 0 100px #00ff0a;
    transform: scale(0.1);
animation: animate 4s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate
{
    0%
    {
        transform: scale(1);
    }
    50% , 100%
    {
        transform: scale(0.1);
    }
}
section .container .circle:nth-child(2)
{
    transform: rotate(-180deg);
    
}
section .container .circle:nth-child(2) span::before
{
animation-delay: calc(-0.1s * var(--i));
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Infinity Dots Animation Effects</title>
        <link rel="stylesheet" href="styleInfinity.css">
    </head>
    <body>
        <section>
            <div >
                <div >
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
                <div >
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
            </div>
        </section>
    </body>
</html>

CodePudding user response：

As the error says it expect a colon (:) replace with margin:0; padding:0;

In CSS you open with a colon :have value; and close with a semicolon. ✌️

CodePudding user response：

i can see your code has some issues first is you should put colon : in margin and padding. Now come to your code as i can see you forgot to separate the classes it should be like this. section .container .circle span::before, and this mistake is every if you correct it your code should work now.