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 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
#2 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
#3 How to correctly define media query?
The correct syntax uses “parantheses” and “colon”.
Documentation & Specification
https://developer.mozilla.org/en-US/docs/Web/CSS/@media
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3.org/TR/mediaqueries-4/
#4 How to clear float?
The correct answer is “clear: both”
Documentation & Specification
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
https://www.w3.org/TR/CSS2/visuren.html#flow-control
Useful StackOverflow posts
#5 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
#6 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
#7 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
#8 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
#9 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.
#10 Which selector has the highest specificity?
The ID selector (defined by #) has the highest specificity.
Documentation & Specification
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://www.w3.org/TR/selectors-4/#specificity-rules
