Q1. Among these selectors which selector has the highest specificity ranking for selecting the anchor link element?
ul li a
a
.example a
div a
Q2. Using an attribute selector, how would you select an <a> element with a "title" attribute?
Note: an alternative to the question below.
Q3. What is the CSS selector for an <a> tag containing the title attribute?
Note: an alternative to the question above.
Q4. CSS grid and flexbox are now becoming a more popular way to create page layouts. However, floats are still commonly used, especially when working with an older code base, or if you need to support an older browser version. What are two valid techniques used to clear floats?
Q5. What element(s) do the following selectors match?
1) .nav {
...;
}
2) nav {
...;
}
3) #nav {
...;
}
1. An element with an ID of "nav"
2. A nav element
3. An element with a class of "nav"
1. An element with a class of "nav"
2. A nav element
3. An element with an id of "nav"
1. An element with a class of "nav"
2. A nav element
3. A div with an id of "nav"
Q6. When adding transparency styles, what is the difference between using the opacity property versus the background property with a rgba() value?
Q7. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?)
Q8. CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?
Q11. Three of these choices are true about class selectors. Which is NOT true?
Note:an alternative to the question below.`
Q12. What is not true about class selectors?
Note:an alternative to the question above.`
Q13. There are many properties that can be used to align elements and create page layouts such as float, position, flexbox, and grid. Of these four properties, which one should be used to align a global navigation bar that stays fixed at the top of the page?
Q14. In the shorthand example below, which individual background properties are represented?
background: blue url(image.jpg) no-repeat scroll 0px 0px;
Q16. When elements overlap, they are ordered on the z-axis (i.e., which element covers another). The z-index property can be used to specify the z-order of overlapping elements. Which set of statements about the z-index property are true?
Note:an alternative to the question below.`
Q17. When elements within a container overlap, the z-index property can be used to indicate how those items are stacked on top of each other. Which set of statements is true?
1. Larger z-index values appear on top elements with a lower z-index value.
2. Negative and positive numbers can be used.
3. The z-index can be used only on positioned elements.
1. Smaller z-index values appear on top of elements with a larger z-index value.
2. Negative and positive numbers can be used.
3. The z-index can be used with or without positioned elements.
1. Smaller z-index values appear on top of elements with a larger z-index value.
2. Negative and positive numbers can be used.
3. The z-index must also be used with positioned elements.
1. Larger z-index values appear on top of elements with a lower z-index value.
2. Only a positive number can be used.
3. The z-index must also be used with positioned elements.
Note:an alternative to the question above.`
Q18. What is the difference between the following line-height settings?
line-height: 20px;
line-height: 2;
Q19. In the following example, what color will paragraph one and paragraph two be? (Alternative: In this example, what color will paragraphs one and two be?)
section p {
color: red;
}
section + p {
color: blue;
}
Q20. What are three valid ways of adding CSS to an HTML page?
1. External; CSS is written in a separate file.
2. Inline; CSS is added to the <head> of the HTML page.
3. Internal; CSS is included within the HTML tags.
1. External; CSS is written in a separate file and is linked within the <header> element of the HTML file.
2. Inline; CSS is added to the HTML tag.
3. Internal; CSS is included within the <header> element of the HTML file.
1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
2. Internal; CSS is included within the <header> element of the HTML file.
3. Inline; CSS is added to the HTML tag.
1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
2. Inline; CSS is added to the HTML tag.
3. Internal; CSS is included within the <head> element of the HTML file.
Q21. Which statement is true for the SVG image format?
Q22. In the example below, when will the color pink be applied to the anchor element?
a:active {
color: pink;
}
Q23. To change the color of an SVG using CSS, which property is used?
Q24. When using position: fixed, what will the element always be positioned relative to?
Q25. By default, a background image will repeat _
Q26. When using media queries, media types are used to target a device category. Which choice lists current valid media types?
Q27. How would you make the first letter of every paragraph on the page red?
Q28. In this example, what is the selector, property, and value?
p {
color: #000000;
}
"p" is the selector
"#000000" is the property
"color" is the value
"p" is the selector
"color" is the property
"#000000" is the value
"color" is the selector
"#000000" is the property
"#p" is the value
"color" is the selector
"p" is the property
"#000000" is the value
Q29. What is the rem unit based on?
Q30. Which choice would give a block element rounded corners?
Q31. In the following media query example, what conditions are being targeted?
@media (min-width: 1024px), screen and (orientation: landscape) { … }
Q32. CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element's transformation origin. By default, what is the location of the origin?
Q35. When using the Flexbox method, what property and value is used to display flex items in a column?
Q36. Which type of declaration will take precedence?
Q37. The flex-direction property is used to specify the direction in which flex items are displayed. What are the values used to specify the direction of the items in the following examples?
­
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;
Q38. There are two sibling combinators that can be used to select elements contained within the same parent element; the general sibling combinator (~) and the adjacent sibling combinator (+). Referring to the example below, which elements will the styles be applied to?
h2 ~ p {
color: blue;
}
h2 + p {
background: beige;
}
Q40. When using Flexbox, the "justify-content" property can be used to distribute the space between the flex items along the main axis. Which value should be used to evenly distribute the flex items within the container shown below?
justify-content: space-around;
justify-content: center;
justify-content: auto;
justify-content: space-between;
Q41. There are many advantages to using icon fonts. What is one of those advantages?
Icon fonts increase accessibility.
Icon fonts can be used to replace custom fonts.
Icon fonts can be styled with typography-related properties such as font-size and color.
Icon fonts are also web-safe fonts.
Q42. What is the difference between 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
display:none hides the element from view and removes it from the normal flow of the document. visibility:hidden will hide the element but maintain the space it previously occupied.
There is no difference; both will hide the element on the page
Q43. What selector and property would you use to scale an element to be 50% smaller on hover?
element:hover {scale: 0.5;}
element:hover {transform: scale(0.5);}
element:hover {scale: 50%;}
element:hover {transform: scale(50%);}
Q44. Which statement regarding icon fonts is true?
Icon fonts can be inserted only using JavaScript.
Icon fonts are inserted as inline images.
Icon fonts require browser extensions.
Icon fonts can be styled with typography-related properties such as font-size and color.
Q45. The values for the font-weight property can be keywords or numbers. For each numbered value below, what is the associated keyword?
font-weight: 400;
font-weight: 700;
bold; normal
normal; bold
light; normal
normal; bolder
Q46. Using the:nth-child pseudo class, what would be the most efficient way to style every third item in a list, no matter how many items are present, starting with item 2?
Q55. What is the ::placeholder pseudo-element used for?
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.
Q56. Which statement is true of the single colon (:) 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, use single colon notation (:).
Only the new CSS3 pseudo-elements require the double colon notation while the CSS2 pseudo-elements do not.
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.
Q57. Which choice is not a valid value for the font-style property?
normal
italic
none
oblique
Q58. When would you use the @font-face method?
to set the font size of the text
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
Q59. You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to if your users are using Retina displays?
2000 x 1400 pixels
200 x 100 pixels
800 x 400 pixels
400 x 200 pixels
Q60. In Chrome's Developer Tools view, where are the default styles listed?
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
Q61. While HTML controls document structure, CSS controls ___.
semantic meaning
content meaning
document structure
content appearance
Q62. What is the recommended name you should give the folder that holds your project's images?
images
#images
Images
my images
Q63. What is the advantage of using inline CSS?
It is easier to manage.
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.
Q64. Which W3C status code represents a CSS specification that is fully implemented by modern browsers?
Proposed Recommendation
Working Draft
Recommendation
Candidate Recommendation
Q65. Are any of the following declarations invalid?
color: red; /* declaration A */
font-size: 1em; /* declaration B */
padding: 10px 0; /* declaration C */
Declaration A is invalid.
Declaration B is invalid.
Declaration C is invalid.
All declarations are valid.
Q66. Which CSS will cause your links to have a solid blue background that changes to semitransparent on hover?
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.
Q81. What property is used to adjust the space between text characters?
font-style
text-transform
font-variant
letter-spacing
Q82. What is the correct syntax for changing the cursor from an arrow to a pointing hand when it interacts with a named element?
.element {cursor: pointer;}
.element {cursor: hand;}
.element {cursor: move-hand;}
.element {cursor: pointer-hand;}
Q83. What is the effect of this style?
background-position: 10% 50%;
The background image is placed 10% from the left and 50% from the top of its container
The background image is placed 10% from the bottom and 50% from the left of its container
The background image is placed 10% from the right and 50% from the bottom of its container
The background image is placed 10% from the top and 50% from the left of its container
Q84. How will the grid items display?
grid-template-columns: 2fr 1fr;
The first column will be twice the height of the second column and will be as wide as the content.
The first column will be half the size of the container, and the second column will absorb the remaining space.
The first column will be twice as wide as the second column and will fit proportionally within the grid container.
The first column will be twice the width and height of the second column and will fit proportionally within the grid container.
Q85. Which style rule would make the image 50% smaller during a hover?
<img id="photo" alt="" src="..." />
img#photo:hover {scale: 0.5;}
img#photo:hover {transform: scale(0.5);}
img#photo {hover-scale: 0.5;}
img#photo:hover {size: smaller;}
Q86. Which CSS properties can you use to create a rounded corner on just the top-left and top-right corners of an element?
A. border-radius: 10px 10px 0 0;
B. border-top-left-radius: 10px; and border-top-right-radius: 10px;
C. border-radius: 10px 0;
D. border-top-radius: 10px;
A and C
C and D
B and C
A and B
Q87. Review the HTML example below. Then choose the list of selectors that select the <p>, from lowest to highest specificity.
input[type="text"] selects all the input with type text, and :not([disabled]) select all the elements not having the attribute "disabled". Combining both only selects all the input elements with type attribute as "text" and not having "disabled" attribute.`
Q90. How can you create a semi-transparent background color?
background-color: hsl(0, 0, 0, 0.5);
background-color: rgbx(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 1);
rgba is a funtion in css. rgba stands for red, green, blue, and alpha. The value of alpha can be between 0 and 1 both inclusive with 0 being fully transparent and 1 being fully opaque.
Q103. What is the output of the margin value when used within this context, assuming that its containing element is larger than 800px?
.example {
width: 800px;
margin: 0 auto;
}
The example element will have 0 margin space around the whole element. The auto value will center align the element horizontally and vertically within its container.
The example element will have 0 margin spaces on the left and right. It will be sized automatically on the top and bottom, which will center align the element within its container.
The example element will have 0 margin spaces on the top and bottom. The margin will be sized automatically on the left and right, which may center-align the element within its container.
The margin value is invalid because it's missing a unit measurement after the 0.
Q104. There are currently four viewport-percentage lengths that can be used to define the value relative to the viewport size: vw, vh, vmin, and vmax. If the current viewport size has a width of 800px and a height of 600px, what will these values be equivalent to in pixels?
Q110. Which items are valid values for the font-size property?
A. font-size: xsmall
B. font-size: 50%
C. font-size: 1em
D. font-size: 20px
C, D
B, C, D
A, C
A, B, C, D
Q111. In this image, the blue box and sample text are both contained within the same parent element. The blue box is floated on the left margin of the container. Why is it not contained in the container?
Floating the blue box increased its height.
Floating the blue box on the left also moves it down.
Floating the blue box actually shifts it to the right and down.
Floating the blue box took it out of document flow and the container is sized only to the sample text.
Q112. Given this code, which CSS declaration of .overlay will span the entire width and height of its container?
:visited styles are applied after the link has been opened.
:active styles are applied on mouse click and hold.
:hover styles are applied on mouse over or mouse click and hold.
:focus styles are applied when a Tab key on a keyboard is used to navigate through links.
:visited styles are applied after the link has been opened.
:active styles are applied on mouse click.
:hover styles are applied on mouseover.
:focus styles are applied on mouse click and hold, or when a Tab key on a keyboard is used to navigate through links.
:visited styles are applied after the link has been opened.
:active styles are applied on mouse click only and before mouse release.
:hover styles are applied on mouseover.
:focus styles are applied when a Tab key on a keyboard is used to navigate through links.
:visited styles are applied on mouse hold.
:active styles are applied when the link has been opened.
:hover styles are applied on mouseover.
:focus styles are applied when a Tab key on a keyboard is used to navigate through links.
asymmetric, so that the transition going from the initial state to the end state is different from the transition going from the end state back to the initial state.
one-sided, so that there is only one transition and it goes from the initial state to the end state.
symmetric, so that the transition going from the initial state to the end state is the reverse of the transition going from the end state back to the initial state.
one-sided, so that there is only one transition and it goes from the end state to the initial state.
Q160. Which of the following statements is TRUE for CSS?
An inline style sheet should be used when a single document has a unique style
An external style sheet is ideal when the style is applied to many pages
Both and b above
An external style sheet can be written in HTML
Q161. In CSS, margin collapsing only happens with?
The horizontal margins of inline elements in the normal flow.
The vertical margins of block elements in the normal flow.
The horizontal margins of block elements in the normal flow.
The vertical margins of inline elements in the normal flow.
Q162. Which of the following CSS selectors selects all
elements that are the direct child of a element?
div p
div > p
Tdiv + p
div ~ p
Q163. In CSS, the box-sizing property is used to control how an element's total width and height are calculated. Which value of box-sizing includes the element's padding and border within its total width and height?
content-box
padding-box
margin-box
border-box
Q164. In CSS, which of the following is NOT an effect of an inert attribute?
Prevents the click event from being fired when the user clicks on an element.
Makes the element interactive.
Prevents the focus event from being fired when an element gains focus.
Hides the element and its content from assistive technologies by excluding them from the accessibility tree.
Q165. What elements does the accent-color property target?
Line break tags
Hyperlink tags
Input tags
Image tags
Q168. What are the valid values of the text-align property?
left, bottom, top, right
left, right, up, bottom
left, center, right, justify
side, justify, up, down
Q169. What is the difference between visibility: hidden and display: none?
Both will hide the element on the page, but display: none has greater 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
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element from the document. It does not take up any space.
There is no difference; both will hide the element on the page
Q170. Which of the following is NOT a valid CSS selector?
p
.class
#id
-
Q171. What is the difference between a class and an id in CSS?
Classes can only be applied to one HTML element, while IDs can be used multiple times.
IDs are denoted by a period (.) followed by the ID name, while classes use a hash (#).