Painting circle with CSS

Question

Hey!

I'm trying to paint the <circle> element with CSS but I can't do it. I can paint it in HTML with fill="white" but if I do it with CSS it just doen's work. Can anyone tell please what I am doing wrong?

My code:
https://code.sololearn.com/W8HvacmQu8ik

Thanks!

Answer 1

first, you're confusing HTML & SVG...
the <circle> element is a svg element, not an html one.

second, your css target is the class named "circle" (dot before identifier), not the so named elements...

For the last mistake, you could ađd the 'class="circle"' to the element you want to target with css, or remove the dot to target all circle elements.

For the first and primary question, you must replace "background-color" by "fill" (svg css syntaxe is quite different from html, even if you could mix both in only one stylesheet)

Answer 2

So dump of me! Totally forgot about class identification, thanks. I also wanted to add box-shadow but as I understand you can't add shadows to circles without using <filter> element which is complex and is not fully supported by al the browsers. But I guess I can make a rectangle with rounded anhles so it looks like a circle.