Are you front-end enough?
Quiz: Do You Know CSS?
- Modern CSS? 🤔
- Does CSS belong on your resume??? 🚀
- Multiple choice. 🤖 … How difficult can it be, eh?
Select the ONE INVALID ❌ font-size:
10cx is incorrect since cx isn’t a real CSS unit. (At least at the time of writing.)
Popular units include the familiar px, rem, em.
Newer units are useful for dynamic, responsive layouts.
ch- width of the0charactervmin- viewport minimumvmax- viewport maximumvh- viewport heightvw- viewport width
There are also several units that have always been around but are rarely used, like cm for centimeters, mm, in for inches, pt for points
10cx
10mm
10pt
10px
10vmin
Can you spot the ONE valid 👍 hex code?
Hex codes can be used to represent colors in CSS. They are prefixed with a # and must contain 3, 4, 6, or 8 hexadecimal digits.
The 3-character hex code is a shorthand for the 6-character code, where each character is repeated. The 4-character code includes an alpha channel for transparency.
For example #ABC is the same as #AABBCC, and #ABCD is the same as #AABBCCDD. To learn more about handling hex values, check out my JavaScript numbers quiz.
#A
#AB
#ABCD
#ABCDE
Which of these units is NOT a valid ❌ CSS unit?
New units like ch, vmin, vmax, vh, vw are quite useful for dynamic/responsive layouts.
There are also several units that have always been around but are rarely used, like cm for centimeters, mm, in for inches, pt for points, pc, cap for the size of capital letters, and ex which is equal to the height of the letter x.
Popular units include the familiar px for pixels, em relative to the element’s font size, and rem is secretly an homage to the forgotten 90’s band R.E.M. (ok, not really, it’s just a relative em unit that references the root element).
em
rem
cm
mm
in
pt
pc
px
ex
ch
vmin
vmax
vh
rel
vw
Which selector best matches the following HTML?
<a id="home" name="home" href="/home">Home</a>
The correct answer is a#home[name='home'], which matches both the id and name attributes. CSS selectors are case-sensitive, so #Home wouldn’t work, and spaces imply child elements, which doesn’t apply here.
The :contains() selector is not a standard CSS selector, but it is available in some JS libraries.
#Home
a [id='home']
a:contains(home)
a#home[name='home']
Which selector matches the following HTML button?
<button onclick="openModal()">Contact</button>
The correct answer is button[onclick], which targets the existence of attribute onclick.
Note that :link only targets unvisited href links, ::click is not a valid pseudo-element, and :focus targets only the focused element.
button:link
button::click
button:focus
button[onclick]
button[on-click]
Which of these selectors is invalid?
The selector c > > d {} is invalid because the child combinator is repeated without a selector between the two > characters.
The other selectors are valid. A type selector like c {} is syntactically valid CSS even if c is not a standard HTML element.
a {}
b.b {}
c > > d {}
#d {}
Which selector matches the last link in the following HTML?
<nav>
<a name="home" href="/home">Home</a>
<a name="login" href="/login">Login</a>
<a name="help" href="/help">Help</a>
</nav>
The correct selector is a:last-child, which matches the last <a> when it is also the last child of its parent. nav:nth-child(3) would match a <nav> element that is the third child of its own parent.
a :nth-child(3)
a:last-item
nav:last-of-type(a)
nav:nth-child(3)
a:last-child
Which selector will take priority?
The a#quote selector takes priority due to the ID, which has a higher specificity than tag or class-based selectors.
main article section blockquote a
blockquote a
a#quote
a.quote
How can you center “shit” in a box?
Using text-align: center; is the correct way to center text in a block element. The align properties are used for flexbox layouts, and margin: 0 auto; is used to center block elements horizontally.
The align-content property is used for grid layouts, and text-content is not a valid CSS property.
align: center;
margin: 0 auto;
align-content: center;
text-align: center;
text-content: center;
How do you center content vertically inside a block container in modern flow layout?
Using align-content is the modern way to center the contents of a block container vertically in flow layout.
The align-items and justify-content properties are used for flexbox and grid layouts, but not flow.
Both margin: 0 auto; and margin: auto; center a block element horizontally, but not vertically.
align-items: center;
justify-content: center;
align-content: center;
margin: auto;
margin: 0 auto;
What is the pixel size of the <a> link’s text in the following HTML?
<body style="font-size: 40px !important;">
<nav style="font-size: 50%;">
<a style="font-size: 25%;">HOME</a>
</nav>
</body>
The font-size for <a> calculates as 5px: 40px (body) * 50% (nav) = 20px, then 20px * 25% = 5px.
!40px
5px
20px
25px
40px
What will be the pixel size of 1.2rem for the “HOME” link in the following HTML?
<html style="font-size: 10px;">
<body style="font-size: 20px;">
<a style="font-size: 1.2rem;">HOME</a>
</body>
</html>
1.2rem translates to 12px because rem units reference the root or <html> font size, set here to 10px.
10px
12px
14px
20px
24px
34px
Similar to the previous question, what will be the pixel size of 1.2em for the “HOME” link in the following HTML?
<html style="font-size: 10px;">
<body style="font-size: 20px;">
<a style="font-size: 1.2em;">HOME</a>
</body>
</html>
1.2em translates to 24px because em units reference the inherited font size, set here to 20px.
10px
12px
14px
20px
24px
34px
Which selector has the lowest specificity?
:where(.card) .title has the lowest specificity. The :where() pseudo-class and everything inside it contributes 0-0-0, so only .title counts. :is(.card) .title keeps the specificity of .card, .card .title has two classes, and #card .title includes an ID.
:where(.card) .title
.card .title
:is(.card) .title
#card .title
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.