TechQA.

How do I solve a problem with a CSS file?

243 views Asked by At

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 class="container">
                <div class="circle">
                    <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 class="circle">
                    <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>

html css sass syntax-error object-expected
Original Q&A
3

There are 3 answers

6
Kip On

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. ✌️

2
xTrimy On

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 class="container">
                <div class="circle">
                    <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 class="circle">
                    <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>

0
Darklegend On

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.

Related Questions in HTML

Related Questions in CSS

Related Questions in SASS

Related Questions in SYNTAX-ERROR

Related Questions in OBJECT-EXPECTED

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions