CSS Interview Prep Quiz
Last updated
Last updated
Plus Css Cheat Sheet (82 questions total)
Scroll Down To skip to quiz:
### Source:
#### Q1. In the following example, which selector has the highest specificity ranking for selecting the anchor link element?
[x] .example a
[ ] div a
[ ] a
[ ] ul li a
<a>
element with a "title" attribute?[x] a[title]{…}
[ ] a > title {…}
[ ] a.title {…}
[ ] a=title {…}
[ ] Use the “clearfix hack” on the floated element and add a float to the parent element.
[ ] Use the overflow property on the floated element or the “clearfix hack” on either the floated or parent element.
[ ] Use the “clearfix hack” on the floated element or the overflow property on the parent element.
[x] Use the “clearfix hack” on the parent element or use the overflow property with a value other than “visible.”
1) .nav {...}
2) nav {...}
3) #nav {...}
[ ]
[ ]
[x]
[ ]
rgba()
value?[ ] Opacity specifies the level of transparency of the child elements. Background with an rgba()
value applies transparency to the background color only.
[ ] Opacity applies transparency to the background color only. Background with an rgba()
value specifies the level of transparency of an element, as a whole, including its content.
[x] Opacity specifies the level of transparency of an element, including its content. Background with an rgba()
value applies transparency to the background color only.
[ ] Opacity applies transparency to the parent and child elements. Background with an rgba()
value specifies the level of transparency of the parent element only.
[ ] By default, block elements are the same height and width as the content container between their tags; inline elements span the entire width of its container.
[x] By default, block elements span the entire width of its container; inline elements are the same height and width as the content contained between their tags.
[ ] A <nav>
element is an example of an inline element. <header>
is an example of a block element.
[ ] A <span>
is an example of a block element. <div>
is an example of an inline element.
[ ] The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.
[x] The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.
[ ] The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.
[ ] The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.
[x] to control the height of the space between two lines of content
[ ] to control the height of the space between heading elements
[ ] to control the height of the character size
[ ] to control the width of the space between characters
[ ] Multiple classes can be used within the same element.
[ ] The same class can be used multiple times per page.
[ ] Class selectors with a leading period
[x] Classes can be used multiple times per page but not within the same element.
[x] position
[ ] flexbox
[ ] grid
[ ] float
background: blue url(image.jpg) no-repeat scroll 0px 0px;
[x]
[ ]
[ ]
[ ]
[ ] green
[x] yellow
[ ] blue
[ ] red
[x] Larger z-index values appear on top of elements with a lower z-index value. Negative and positive numbers can be used. z-index can only be used on positioned elements.
[ ] Smaller z-index values appear on top of elements with a larger z-index value. Negative and positive numbers can be used. z-index must also be used with positioned elements.
[ ] Larger z-index values appear on top of elements with a lower z-index value. Only positive numbers can be used. z-index must also be used with positioned elements.
[ ] Smaller z-index values appear on top of elements with a larger z-index value. Negative and positive numbers can be used. z-index can be used with or without positioned elements.
[x] The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to twice the size of the corresponding font-size value.
[ ] The value of 20px will set the line-height to 20px. The value of 2 is not valid.
[ ] The value of 20px will set the line-height to 20px. The value of 2 will default to a value of 2px.
[ ] The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to 20% of the corresponding font-size value.
[ ] Paragraph one will be blue, paragraph two will be red.
[ ] Both paragraphs will be blue.
[x] Paragraphs one will be red, paragraph two will be blue.
[ ] Both paragraphs will be red.
[ ]
[ ]
[ ]
[x]
[ ] CSS can be applied to SVGs but JavaScript cannot be.
[ ] SVGs work best for creating 3D graphics.
[x] SVGs can be created as a vector graphic or coded using SVG specific elements such as <svg>, <line>, and <ellipse>.
[ ] SVGs are a HAML-based markup language for creating vector graphics.
[ ] The color of the link will display as pink after its been clicked or if the mouse is hovering over the link.
[ ] The color of the link will display as pink on mouse hover.
[x] The color of the link will display as pink while the link is being clicked but before the mouse click is released.
[ ] The color of the link will display as pink before it has been clicked.
[ ] Use background-fill to set the color inside the object and stroke or border to set the color of the border.
[ ] The color cannot be changed with CSS.
[ ] Use fill or background to set the color inside the object and stroke to set the color of the border.
[x] Use fill to set the color inside the object and stroke to set the color of the border.
[ ] the closest element with position: relative
[x] the viewport
[ ] the parent element
[ ] the wrapper element
\_\_\_
[ ] only if the background-repeat property is set to repeat
[x] indefinitely, vertically, and horizontally
[ ] indefinitely on the horizontal axis only
[ ] once, on the x and y axis
[ ] print, screen, aural
[ ] print, screen, television
[x] print, screen, speech
[ ] print, speech, device
[x] p::first-letter { color: red; }
[ ] p:first-letter { color: red; }
[ ] first-letter::p { color: red; }
[ ] first-letter:p { color: red; }
[ ]
[x]
[ ]
[ ]
[ ] The rem unit is relative to the font-size of the p element.
[ ] You have to set the value for the rem unit by writing a declaration such as rem { font-size: 1 Spx; }
[ ] The rem unit is relative to the font-size of the containing (parent) element.
[x] The rem unit is relative to the font-size of the root element of the page.
[ ] corner-curve: 10px
[ ] border-corner: 10px
[x] border-radius: 10px
[ ] corner-radius: 10px
[x] The rule will apply to a device that has either a width of 1024px or wider, or is a screen device in landscape mode.
[ ] The rule will apply to a device that has a width of 1024px or narrower and is a screen device in landscape mode.
[ ] The rule will apply to a device that has a width of 1024px or wider and is a screen device in landscape mode.
[ ] The rule will apply to a device that has a width of 1024px or narrower, or is a screen device in landscape mode.
[x] the top left corner of the element
[ ] the center of the element
[ ] the top right corner of the element
[ ] the bottom left of the element
[ ] color: #000
[ ] color: rgb(0,0,0)
[ ] color: #000000
[x] color: 000000
[x] 2rem
[ ] 32px
[ ] 64px
[ ] 4rem
[x] flex-flow: column; or flex-direction: column
[ ] flex-flow: column;
[ ] flex-column: auto;
[ ] flex-direction: column;
[ ] any declarations in user-agent stylesheets
[x] important declarations in user stylesheets
[ ] normal declarations in author stylesheets
[ ] important declarations in author stylesheets
[x] Example 1: flex-direction: row;
Example 2: flex-direction: row-reverse;
Example 3: flex-direction: column;
Example 4: flex-direction: column-reverse;
[ ] Example 1: flex-direction: row-reverse;
Example 2: flex-direction: row;
Example 3: flex-direction: column-reverse;
Example 4: flex-direction: column;
[ ] Example 1: flex-direction: row;
Example 2: flex-direction: row-reverse;
Example 3: flex-direction: column;
Example 4: flex-direction: reverse-column;
[ ] Example 1: flex-direction: column;
Example 2: flex-direction: column-reverse;
Example 3: flex-direction: row;
Example 4: flex-direction: row-reverse;
[ ] Paragraphs 2 and 3 will be blue. The h2 and paragraph 2 will have a beige background.
[x] Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background.
[x] Paragraphs 2 and 3 will be blue. Paragraph 2 will have a beige background.
[ ] Paragraph 2 will be blue. Paragraphs 2 and 3 will have a beige background.
[x] justify-content: space-around;
[ ] justify-content: center;
[ ] justify-content: auto;
[ ] justify-content: space-between;
[ ] Icon fonts increase accessibility.
[ ] Icon fonts can be used to replace custom fonts.
[x] Icon fonts can be styled with typography related properties such as font-size and color.
[ ] Icon fonts are also web safe fonts.
display:none
and visibility:hidden
?[ ] Both will hide the element on the page, but display:none has greater browser support. visibility:hidden is a new property and does not have the best browser support
[ ] display:none hides the elements but maintains the space it previously occupied. visibility:hidden will hide the element from view and remove it from the normal flow of the document
[x] display:none hides the element from view and removes it from the normal flow of the document. visibility:hidden will hide the element but maintains the space it previously occupied.
[ ] There is no difference; both will hide the element on the page
[ ] element:hover {scale: 0.5;}
[x] element:hover {transform: scale(0.5);}
[ ] element:hover {scale: 50%;}
[ ] element:hover {transform: scale(50%);}
[ ] Icon fonts can be inserted only using JavaScript.
[ ] Icon fonts are inserted as inline images.
[ ] Icon fonts require browser extensions.
[x] Icon fonts can be styled with typography-related properties such as font-size and color.
font-weight: 400; font-weight: 700;
[ ] bold; normal
[x] normal; bold
[ ] light; normal
[ ] normal; bolder
.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }
[x] 50px, 150px, 300px
[ ] 50px, 200px, 300px
[ ] 50px, 100px, 200px
[ ] 50px, 50px, 100px
[ ]
[x]
[ ]
[ ]
[ ] a[href="#"] {...}
[ ] a[href~="#"]
[ ] a[href^="#"]
[x] a[href="#"]
[x] Only one class value can be assigned to an element.
[ ] An element can have multiple class value.
[ ] Class selectors are marked with a leading period.
[ ] More than one element can have the same class value.
[ ] Margin adds space around and inside of an element; padding adds space only inside of an element.
[x] Margin adds space around an element; padding adds apace inside of an element.
[ ] Margin adds a line around an element, padding adds space inside of an element.
[ ] Margin adds space inside of an element, padding adds space around an element.
[x] padding: 10px 10px 0px 0px;
[ ] padding: 10px 0px;
[ ] padding: 10px 0;
[ ] padding: 10px 0px 10px 0px;
[ ] The font file formats are not supported in modern browsers.
[ ] The src attribute requires a comma between the URL and format values.
[ ] There are no errors in the example.
[x] The sans-serif inclusion is problematic.
[x] position: absolute;
[ ] display: flex;
[ ] display: block;
[ ] float: left;
[x] The left margin value is equal to 5% of its parents element’s width plus 5px
[ ] The left margin value is equal to 5% of the viewport width plus 5px
[ ] The left margin value is equal to 5% of the closest positioned element’s width plus 5px
[ ] The left margin value is equal to 5% of the selected element’s width (.example) plus 5px
<a>
tag containing the title attribute?[x] a[title]
[ ] a > title
[ ] a=title
[ ] a.title
[x] .logo { position: absolute; left: 100px; top: 150px; }
[ ] .logo { position: absolute; margin-left: 100px; margin-top: 150px; }
[ ] .logo { position: absolute; padding-left: 100px; padding-top: 150px; }
[ ] .logo { position: absolute; left-padding: 100px; top-padding: 150px; }
[ ] blue
[ ] green
[x] red
[ ] yellow
::placeholder pseudo-element
used for?[x] It is used to format the appearance of placeholder text within a form control.
[ ] It specifies the default input text for a form control.
[ ] It writes text content into a hyperlink tooltip.
[ ] It writes text content into any page element.
:
) or double colon (::
) notations for pseudo-elements-for example, ::before
and :before
?[ ] All browsers support single and double colons for new and older pseudo-elements. So you can use either but it is convention to use single colons for consistency.
[ ] In CSS3, the double colon notation (::
) was introduced to create a consistency between pseudo-elements from pseudo-classes. For newer browsers, use the double colon notation. For IE8 and below, using single colon notation (:
).
[ ] Only the new CSS3 pseudo-elements require the double colon notation while the CSS2 pseudo-elements do not.
[x] In CSS3, the double colon notation (::
) was introduced to differentiate pseudo-elements from pseudo-classes. However, modern browsers support both formats. Older browsers such as IE8 and below do not.
[ ] normal
[ ] italic
[x] none
[ ] oblique
[ ] to set the font size of the text
[x] to load custom fonts into stylesheet
[ ] to change the name of the font declared in the font-family
[ ] to set the color of the text
[x]
[ ]
[ ]
[ ]
[ ] 2000 x 1400 pixels
[ ] 200 x 100 pixels
[x] 800 x 400 pixels
[ ] 400 x 200 pixels
[x] under the User Agent Stylesheet section on the right
[ ] in the third panel under the Layout tab
[ ] under the HTML view on the left
[ ] in the middle panel
[ ] semantic meaning
[ ] content meaning
[ ] document structure
[x] content appearance
[x] images
[ ] #images
[ ] Images
[ ] my images
[ ] It is easier to manage.
[x] It is easier to add multiple styles through it.
[ ] It can be used to quickly test local CSS overrides.
[ ] It reduces conflict with other CSS definition methods.
[ ] Proposed Recommendation
[ ] Working Draft
[x] Recommendation
[ ] Candidate Recommendation
[ ] Declaration A is invalid.
[ ] Declaration B is invalid.
[ ] Declaration C is invalid.
[x] All declarations are valid.
[x]
[ ]
[ ]
[ ]
[ ] div.sidebar {}
[ ] * {}
[x] div#sidebar2 p {}
[ ] .sidebar p {}
[x] blue sections on a white background
[ ] Yellow sections on a blue background
[ ] Green sections on a white background
[ ] blue sections on a red background
[ ] !elevate!
[ ] *prime
[ ] override
[x] !important
[x] a:visited
[ ] a:hover
[ ] a:link
[ ] a:focus
[ ] background-color: #aaa;
[ ] background-color: #999999;
[ ] background-color: rgba(170,170,170,0.5);
[x] background-color: rgba(170,170,170,0.2);
[ ] ."header clear" {}
[ ] header#clear {}
[x] .header.clear {}
[ ] .header clear {}
[ ] “h1” string
[ ] “a” character
[ ] “p” character
[x] “*” character
'h1'
is the _, while 'color'
is the _.[ ] property; declaration
[ ] declaration; rule
[ ] “p” character
[x] selector; property
[ ] font-weight: 400;
[ ] font-weight: medium;
[x] font-weight: 700;
[ ] font-weight: Black;
[ ] It should be the first one on the list.
[ ] Generic fonts are discouraged from this list.
[x] It should be the last one on the list.
[ ] It should be the second one on the list.
[ ] It requires you to host font files on your own server.
[ ] It uses more of your site’s bandwidth.
[ ] It offers a narrow selection of custom fonts.
[x] It is not always a free service.
[x] by using an HTML link element referring to a Google-provided CSS
[ ] by embedding the font file directly into the project’s master JavaScript
[ ] by using a Google-specific CSS syntax that directly links to the desired font file
[ ] by using a standard font-face CSS definition sourcing a font file on Google’s servers
[ ] color: #000
;
[ ] color: rgb(0,0,0)
;
[ ] color: #000000
;
[x] color: 000000
;
[ ] The .rem will be equivalent to 25px; the .em value will be 20px.
[ ] The .rem will be equivalent to 15px; the .em value will be 20px.
[ ] The .rem will be equivalent to 15px; the .em value will be 40px.
[ ] The .rem will be equivalent to 20px; the .em value will be 40px.
[ ] blue
[ ] red
[x] yellow
[ ] green
[ ] font-style
[ ] text-transform
[ ] font-variant
[x] letter-spacing
#### Q82. What is the correct syntax for changing the curse from an arrow to a pointing hand when it interacts with a named element?
[x] .element {cursor: pointer;}
[ ] .element {cursor: hand;}
[ ] .element {cursor: move-hand;}
[ ] .element {cursor: pointer-hand;}
By Bryan Guner on June 3, 2021.
Exported from Medium on August 31, 2021.