DEV Community

Cover image for What's your CSS level? Take a CSS Quiz!

What's your CSS level? Take a CSS Quiz!

Temani Afif on May 15, 2023

Do you want to have some fun with CSS? What about some CSS Quizzes? ๐Ÿ‘‰ CSS Quizzes ๐Ÿ‘ˆ Selectors, Flexbox, Transform, Gradients... P...
Collapse
 
alohci profile image
Nicholas Stimpson

Hi Temani. Some great quizzes. One nit-pick though

Image description

The answer is none of the above. All four values are set by the padding declaration, not just the non-zero ones.

Collapse
 
afif profile image
Temani Afif

True, but assuming that the default value of the padding-* is equal to 0 (and that we don't have any other padding-* rules) we can safely assume that the "equivalence" is correct ๐Ÿ™‚

Collapse
 
gretseatdev profile image
GretSeat

The answer is padding right. Padding goes top, right, bottom, left.

Collapse
 
alohci profile image
Nicholas Stimpson

Padding-right is indeed the property that gets set to 20px, yes. Additionally, padding-top, padding-right and padding-bottom get set to 0px, overriding any previous values with the same or lesser precedence. In particular, this removes the default non-zero padding on ol, ul, dialog, fieldset, legend, td and th elements.

Collapse
 
miketalbot profile image
Mike Talbot โญ

Ok I got a perfect score in basic! This amazes me, I'd say even though "basic" it included things I don't use often but have a dim memory of and had to scrape my memory for :) However, now I'm scared stiff of the rest of them!!!!

Collapse
 
danwalsh profile image
Dan Walsh

Nice work! Just finished the first one; looking forward to working my way through the rest! ๐Ÿ˜Š

Collapse
 
faisaljawedkhan profile image
Faisal Jawed Khan

It's good to increase our css knowledge through these type of amazing quizzes.
Thanks for sharing amazing content.

Collapse
 
thumbone profile image
Bernd Wechner

I suck at the basic one. I mean, knowing this stuff just indicates you work a lot with it is all. I don't (and like many I don't think I want to, CSS bugs me with its complexity and endless libraries developed to make it simpler and get around shortcomings and ... and ... and ... so I dive into it when I need to with TFM in hand.)

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Technically, if content-box were the default box sizing value, we wouldn't need to specify it in CSS resets. Like some other people have pointed out, it's not a cut and dried answer. Might want to reword that question to make reference to the spec default.

Collapse
 
afif profile image
Temani Afif

Note sure what you are talking about but content-box is the default value (I am not inventing this)

Image description

Collapse
 
giangdlinh profile image
Giang Vincent

The timer run so fast that I canโ€™t have time to even read the question :v

Collapse
 
tehawanka profile image
Bartek Mendecki • Edited

yeah, time limit is ridiculous :( ย  I am phlegmatic by nature and I fail in almost all coding tests with time limits. Despite working in industry for ~7 years and nobody ever complainsย about the time of performing tasks by me. :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I suck at Flexbox/Grid ๐Ÿ˜…

Collapse
 
khairunnisaas profile image
Khairunnisaas

I can't even get perfect score in basic one ๐Ÿ˜…

Collapse
 
szeredaiakos profile image
szeredaiakos

Your skill of css is defined by features you DONT use. Fun quiz tho.

Collapse
 
fruntend profile image
fruntend

ะกongratulations ๐Ÿฅณ! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up ๐Ÿ‘