Basic CSS

February 28, 2021 By Temani Afif

This a training quiz. There is no timer so take your time to answer the questions.
You will get the correct answers at the end.

Your Result

-

Great! you are now ready to tackle the real quiz: https://css-challenges.com/basic-css/

#1 Which of the following is an invalid value of the display property?

“inline-float” doesn’t exist. Each property has a set of defined values (also called the syntax of the property).

From the specification

https://drafts.csswg.org/css-display/#the-display-properties

Then

The Same information can also be found within the MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/display

#2 Which CSS property can be used with negative values?

In this list only “margin” can be used with negative value. Many properties accept negative value and such information is implicit unless defined otherwise so in most of the case we try to search for “negative values are invalid with XX” instead of “negative value are allowed for XX”

For padding: https://drafts.csswg.org/css-box-3/#padding-physical

Negative values for padding properties are invalid.

For width:  https://drafts.csswg.org/css-sizing-3/#sizing-values

Negative values are invalid.

There is no generic rule. It depends on each property.

#3 What is the default value of the box-sizing property?

The default value is content-box. Each property has a default value (also called initial value) that you can find

Within its MDN page

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#formal_syntax

Within the specification

https://drafts.csswg.org/css-sizing-3/#box-sizing

#4 Which of the following is a valid pseudo element?

Only “::before” is the valid one here.

Documentation & Specification

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#index

https://www.w3.org/TR/css-pseudo-4/

PS: do not confuse “pseudo element” (like ::before) with “pseudo classes” (like ::hover)

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

https://drafts.csswg.org/selectors-4/#pseudo-classes

#5 padding: 0 20px 0 0; is equivalent to

When used with 4 values, padding means [top right bottom left] so the correct answer is “padding-right:20px;”. “padding” is called the shorthand property and “padding-right” the longhand one.

Documentation & Specification

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

https://www.w3.org/TR/css-cascade-4/#shorthand

#6 How to select all the elements?

We use the “*” [asterisk symbol] called “univeral selector”.

Documentation & Specification

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

https://drafts.csswg.org/selectors-4/#the-universal-selector

#7 How to clear float?

#8 How to correctly define media query?

#9 Which selector has the highest specificity?

#10 Which of the following is an inherited property?

color is an inherited property. To check if a propery is inherited or not you can:

Check its MDN page

https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition

Check the Specification

https://drafts.csswg.org/css-color-3/#color

I am done