css-quiz

Q70. You can use the ___ pseudo-class to set a different color on a link if it was clicked on. 1. a:visited 2. a:hover 3. a:link 4. a:focus

Q70. You can use the ___ pseudo-class to set a different color on a link if it was clicked on. 1. a:visited

Q1. Among these selectors which selector has the highest specificity ranking for selecting the anchor link element? -- 1. .example a 2. div a 3. a 4. ul li a --

Q1. Among these selectors which selector has the highest specificity ranking for selecting the anchor link element? -- 1. .example a 2. div a 3. a 4. ul li a -- 1. .example a

Q10. What is the line-height property primarily used for? 1. to control the height of the space between two lines of content 2. to control the height of the space between heading elements 3. to control the height of the character size 4. to control the width of the space between characters

Q10. What is the line-height property primarily used for? 1. to control the height of the space between two lines of content

Q100. Which selector is used to select the paragraph element that is a direct descendent of section? 1. section * p 2. section + p 3. section ~ p 4. section > p

Q100. Which selector is used to select the paragraph element that is a direct descendent of section? 4. section > p __ 正確答案是 4. section > p。這是因為「>」符號是用來選擇父元素直接子元素的選擇器，而「p」表示要選擇段落元素。所以「section > p」就表示選擇是 section 直接子元素的段落元素。 1. 而選擇器「section * p」則是用來選擇是 section 內任何一個子孫元素中的段落元素； 2. 選擇器「section + p」則是用來選擇是 section 元素相鄰的下一個段落元素； 3. 選擇器「section ~ p」則是用來選擇是 section 元素後面的任何段落元素。

Q101. For this code, what is the font color of the hypertext link? ul { --color: red; } p { color: var(--color); } a { color: var(--color, orange); } (p) Paragraph (/p) (ul) (li) (a href="#") list item a link (/a) (/li) (li) list item (/li) (/ul) __ 1. red 2. orange 3. blue 4. black

Q101. For this code, what is the font color of the hypertext link? 1. red __ 橘色是退回顏色(備用顏色)

Q102. Which statement is not true? 1. Specificity determines which CSS rule is applied by the browsers. 2. When two selectors apply to the same element, the one with lower specificity wins. 3. The last rule defined overrides all previous rules and even conflicting rules. 4. Rules with more specific selectors have greater specificity.

Q102. Which statement is not true?. 2. When two selectors apply to the same element, the one with lower specificity wins.

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; } __ 1. 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. 2. The example element will have 0 margin space on the left and right. It will be sized automatically on the top and bottom, which will center align the element within its container. 3. The example element will have 0 margin space 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. 4. The margin value is invalid because its missing a unit measurement after the 0.

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; } __ 3. The example element will have 0 margin space 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.

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? 10vw = ?px 10vh = ?px 10vmin = ?px 10vmax = ?px __ 1. 10vw = 80px 10vh = 60px 10vmin = 60px 10vmax = 80px 2. 10vw = 60px 10vh = 80px 10vmin = 80px 10vmax = 60px 3. 10vw = 8px 10vh = 6px 10vmin = 6px 10vmax = 8px 4. 10vw = 6px 10vh = 8px 10vmin = 8px 10vmax = 6px

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? 10vw = ?px 10vh = ?px 10vmin = ?px 10vmax = ?px __ 1. 10vw = 80px 10vh = 60px 10vmin = 60px 10vmax = 80px

Q105. Referring to the HTML markup and CSS example below, which element(s) will be targeted? p:first-of-type:first-letter { color: red; } (body) (p) Paragraph 1.(/p) (p) Paragraph 2.(/p) (article) (h1) Heading(/h1) (p)Paragraph 3.(/p) (p)paragraph 4.(/p) (/article) (section) (p) Paragraph 5. (/p) (p)Paragraph 6.(/p) (/section) (/body) __ 1. The first letter in all paragraphs will be red. 2. Only the first letter in paragraphs 1 and 5 will be red. 3. The first letter in paragraphs 1, 3, and 5 will be red. 4. Only the first letter in paragraph 1 will be red.Only

Q105. Referring to the HTML markup and CSS example below, which element(s) will be targeted? p:first-of-type:first-letter { color: red; } __ 3. The first letter in paragraphs 1, 3, and 5 will be red. __ 當使用 :first-of-type 選擇器時，它會選擇該元素的父元素中第一個出現的這種元素類型，而不僅僅是選擇第一個元素。

Q106. Which five style features are associated with the box model? 1. margin, padding, border, width, height 2. width, height, z-index, overflow, font size 3. margin, padding, font size, line height, border 4. font size, line height, letter spacing, width

Q106. Which five style features are associated with the box model? 1. margin, padding, border, width, height

Q107. Which choice will not set all links that include domain.com to pink? A. a[href$='domain.com'] { color: pink; } B. a[href='*domain.com'] { color: pink; } C. a[href*='domain.com'] { color: rgb(255, 155, 155); } D. a[href*='domain.com'] { color: pink; }

Q107. Which choice will not set all links that include domain.com to pink? B. a[href='*domain.com'] { color: pink; }

Q108. Which property and value pair could be used to apply a linear gradient effect? 1. css background: linear-gradient(#648880, #293f50); 2. css background-image: linear(#648880, #293f50); 3. css background: gradient(linear, #648880, #293f50); 4. css background-color: linear-gradient(#648880, #293f50);

Q108. Which property and value pair could be used to apply a linear gradient effect? 1. css background: linear-gradient(#648880, #293f50);

Q109. You want to add a background circle behind an icon. Which style declaration is correct? .glyphicon-bgcircle { border-radius: 50%; padding: 50px; background-color: #fdadc6; color: rgba(255, 255, 255, 1); font-size: 24px; }

Q11. Three of these choices are true about class selectors. Which is NOT true? 1. Multiple classes can be used within the same element. 2. The same class can be used multiple times per page. 3. Class selectors begin with a leading period 4. Classes can be used multiple times per page but not within the same element.

Q11. Three of these choices are true about class selectors. Which is NOT true? 4. Classes can be used multiple times per page but not within the same element.

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 __ 1. C, D 2. B, C, D 3. A, C 4. A, B, C, D

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 __ 2. 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 with the container? 1. Floating the blue box increased its height. 2. Floating the blue box on the left also moves it down. 3. Floating the blue box actually shifts it to the right and down. 4. Floating the blue box took it out of document flow and the container is sized only to the sample text.

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 with the container? 4. 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? (style) .container { position: relative; height: 200px; width: 200px; border: 1px solid black; } (/style) (div class="container") (div class="overlay")(/div) (/div) __ .overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); }

Q113. Which missing line of code would place the text on top of the image? (div class="container") (img src="grumpy-cat.gif" /) (p)The z-index property is cool!(/p) (/div) img { position: absolute; left: 0px; top: 0px; // Missing line } __ 1. z-index: 1; 2. z-index: -1; 3. z-index: 0; 4. z-index: true;

Q113. Which missing line of code would place the text on top of the image? 2. z-index: -1;

Q114. To make the font size of an element one size smaller than the font size of the element's container, which style property would you apply? 1. font-size: reduce; 2. font-size: 8px; 3. font-size: -1em; 4. font-size: smaller;

Q114. To make the font size of an element one size smaller than the font size of the element's container, which style property would you apply? 4. font-size: smaller;

Q115. Given this markup, which selector would result in the text being highlighted in yellow? (span class="highlight") #BLM (/span) __ .highlight { background-color: yellow; }

Q116. To prevent a background image from tiling in any direction, which style property would you apply? A. background-repeat: no-repeat; B. background-repeat: fixed; C. background-repeat: none; D. background-tile: none;

Q116. To prevent a background image from tiling in any direction, which style property would you apply? A. background-repeat: no-repeat;

Q117. To rotate an object 30 degrees counterclockwise, which style property would you apply? 1. transform: rotate(-30deg); 2. transform: rotate(30deg); 3. rotate: 30deg; 4. spin: 30deg;

Q117. To rotate an object 30 degrees counterclockwise, which style property would you apply? 1. transform: rotate(-30deg);

Q118. Which style rule would you apply to set the background image to display the contents of the wood.png file? 1. background-image: file('wood.png'); 2. background-image: url('wood.png'); 3. background-image: wood.png; 4. image: wood.png

Q118. Which style rule would you apply to set the background image to display the contents of the wood.png file? 2. background-image: url('wood.png');

Q119. What style rule would set the font color of only paragraph two to blue? (section) (p) paragraph one (/p) (/section) (p) paragraph two (/p) __ A. section > p { color: blue; } B. p { color: blue; } C. section + p { color: blue; } D. p + section { color: blue; }

Q119. What style rule would set the font color of only paragraph two to blue? (section) (p) paragraph one (/p) (/section) (p) paragraph two (/p) __ C. section + p { color: blue; }

Q12. What is not true about class selectors? 1. Only one class value can be assigned to an element. 2. An element can have multiple class value. 3. Class selectors are marked with a leading period. 4. More than one element can have the same class value.

Q12. What is not true about class selectors? 1. Only one class value can be assigned to an element.

Q120. You want to move an element up 100px. Which CSS property would you use? 1. transform: translateX(-100px) 2. transform: translateY(-100px) 3. transform: translateY(100px) 4. transform: translateX(100px)

Q120. You want to move an element up 100px. Which CSS property would you use? 2. transform: translateY(-100px)

Q121. Which style will horizontally center the inner (div) within the outer (div)? (div id="outer") (div id="inner") Center Me! (/div) (/div) __ A. #inner { width: 50%; } #outer { width: 100%; } B. #inner { left: 0; right: 0; position: center; } C. #inner { text-align: center; } D. #inner { width: 50%; margin: 0 auto; }

Q121. Which style will horizontally center the inner (div) within the outer (div)? (div id="outer") (div id="inner") Center Me! (/div) (/div) __ D. #inner { width: 50%; margin: 0 auto; }

Q122. Which corner will the puppy be in when these CSS rules are applied? .pen { height: 100px; width: 100px; border: 2px dashed brown; position: relative; } #puppy { position: absolute; right: 80px; bottom: 0px; } (div class="pen") (span id="puppy") :dog: (/span) (/div) __ 1. top-right corner 2. bottom-right corner 3. top-left corner 4. bottom-left corner

Q122. Which corner will the puppy be in when these CSS rules are applied? .pen { height: 100px; width: 100px; border: 2px dashed brown; position: relative; } #puppy { position: absolute; right: 80px; bottom: 0px; } (div class="pen") (span id="puppy") :dog: (/span) (/div) __ 4. bottom-left corner

Q123. Which choice uses the correct syntax for adding a hover pseudo class to (a) element? 1. a:hover {...} 2. a :hover {...} 3. a.hover {...} 4. a hover {...}

Q123. Which choice uses the correct syntax for adding a hover pseudo class to (a) element? 1. a:hover {...}

Q124. Which missing code will give "Cellar Door" a shadow? (style) #cellar-door { box-shadow: 3px 5px 10px #000; } .text-shadow { text-shadow: 3px 5px 10px #000; } (/style) (h1 _____) Cellar Door (/h1) __ 1. class="text-shadow" 2. id="cellar-door" 3. id="text-shadow" 4. class="cellar-door"

Q124. Which missing code will give "Cellar Door" a shadow? (style) #cellar-door { box-shadow: 3px 5px 10px #000; } .text-shadow { text-shadow: 3px 5px 10px #000; } (/style) (h1 _____) Cellar Door (/h1) __ 1. class="text-shadow"

Q125. Which choice is a valid example of a comment in CSS? 1. -- This line has been cancelled. 2. /* This line has been cancelled. */ 3. // This line has been cancelled. 4. # This line has been cancelled.

Q125. Which choice is a valid example of a comment in CSS? 2. /* This line has been cancelled. */

Q126. Which element(s) will be displayed in blue text? h2 ~ p { color: blue; } (section) (p) P1 (/p) (h2) H2 (/h2) (p) P3 (/p) (p)P4(/p) (/section) __ 1. P3 2. P1, P3 and P4 3. P3 and P4 4. P1

Q126. Which element(s) will be displayed in blue text? h2 ~ p { color: blue; } (section) (p) P1 (/p) (h2) H2 (/h2) (p) P3 (/p) (p)P4(/p) (/section) __ 3. P3 and P4

Q127. When these pseudo class selectors are applied to a link, what states will the styles be applied to? a:visited { ...; } a:active { ...; } a:hover { ...; } a:focus { ...; } __ 1. :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. 2. :visited styles are applied after the link has been opened. :active styles are applied on mouse click. :hover styles are applied on mouse over. :focus styles are applied on mouse click and hold, or when a Tab key on a keyboard is used to navigate through links. 3. :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 mouse over. :focus styles are applied when a Tab key on a keyboard is used to navigate through links. 4. :visited styles are applied on mouse hold. :active styles are applied when the link has been opened. :hover styles are applied on mouse over. :focus styles are applied when a Tab key on a keyboard is used to navigate through links.

Q127. When these pseudo class selectors are applied to a link, what states will the styles be applied to? a:visited { ...; } a:active { ...; } a:hover { ...; } a:focus { ...; } __ 3. :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 mouse over. :focus styles are applied when a Tab key on a keyboard is used to navigate through links.

Q128. What style rule should you use to display all input elements that have failed the validation test with a red font? __ A. input.valid[false] { color: red; } B. input:invalid { color: red; } C. input.not(valid) { color: red; } D. input.invalid { color: red; }

Q128. What style rule should you use to display all input elements that have failed the validation test with a red font? __ B. input:invalid { color: red; }

Q129. What style rule should you apply to the img element to display the element in grayscale with no color? A. img { transform: grayscale(1); } B. img { filter: grayscale(0); } C. img { transform: grayscale(0); } D. img { filter: grayscale(1); }

Q129. What style rule should you apply to the img element to display the element in grayscale with no color? D. img { filter: grayscale(1); }

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 which stays fixed at the top of the page? 1. position 2. flexbox 3. grid 4. float

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 which stays fixed at the top of the page? 1. position

Q130. Why might you create a reset style sheet? 1. to reduce page size by removing browser styles from the page rendering. 2. to start designing a page style by overriding any built-in browser styles 3. to make it easier to minify the content of your web page design 4. to increase execution time by not relying on built-in browser styles

Q130. Why might you create a reset style sheet? 2. to start designing a page style by overriding any built-in browser styles

Q131. Which option is an invalid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right? 1. padding: 10px 0px; 2. padding: 10px 10px 0px 0px; 3. padding: 10px 0; 4. padding: 10px 0px 10px 0px;

Q131. Which option is an invalid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right? 2. padding: 10px 10px 0px 0px;

Q132. How would you absolutely position an element of the logo class inside of a relatively positioned container? A. .logo { position: absolute; padding-left: 100px; padding-top: 150px; } B. .logo { position: absolute; left: 100px; top: 150px; } C. .logo { position: absolute; left-padding: 100px; top-padding: 150px; } D. .logo { position: absolute; margin-left: 100px; margin-top: 150px; }

Q132. How would you absolutely position an element of the logo class inside of a relatively positioned container? D. .logo { position: absolute; margin-left: 100px; margin-top: 150px; }

Q133. How would the (div) with the class .child be positioned within its container? (style) .container { height: 200px; width: 200px; } .child { margin: auto 0; height: 100px; } (/style) (div class="container") (div class="child") ... (/div) (/div) __ 1. horizontally centered 2. vertically centered, spanning the container's width 3. at the bottom of the container, spanning the container's width 4. at the top of the container, spanning the container's width

Q133. How would the (div) with the class .child be positioned within its container? (style) .container { height: 200px; width: 200px; } .child { margin: auto 0; height: 100px; } (/style) (div class="container") (div class="child") ... (/div) (/div) __ 4. at the top of the container, spanning the container's width

Q134. By default, a CSS transition is __ 1. 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. 2. one sided, so that there is only one transition and it goes from the initial state to the end state. 3. 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. 4. one-sided, so that there is only one transition and it goes from the end state to the initial state.

Q134. By default, a CSS transition is __ 3. 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.

Q135. Which style rule will extend the header element across an entire grid row from the first column through the last column? A. header { grid-column: 1 / auto; } B. header { grid-column: 1/-1; } C. header { grid-column: -1/1; } D. header { grid-column: 1/100%; }

Q135. Which style rule will extend the header element across an entire grid row from the first column through the last column? B. header { grid-column: 1/-1; }

Q136. To center the content of a grid cell horizontally and vertically within the cell, which style rule should you apply? A. align-items: start; justify-items: end; B. align--items: center; justify-items: center; C. align-items: middle; justify-items: middle; D. align-items: stretch; justify-items: stretch;

Q136. To center the content of a grid cell horizontally and vertically within the cell, which style rule should you apply? B. align--items: center; justify-items: center;

Q137. What style rule should you use to display all input elements that have failed the validation test with a red font? A. input.valid[false] { color: red; } B. input:invalid { color: red; } C. input.not(valid) { color: red; } D. input.invalid { color: red; }

Q137. What style rule should you use to display all input elements that have failed the validation test with a red font? B. input:invalid { color: red; }

Q139. To insert an external style sheet file into another style sheet file, which rule should you use? 1. @import 2. @link 3. @insert 4. @style

Q139. To insert an external style sheet file into another style sheet file, which rule should you use? 1. @import

Q14. In the shorthand example below, which individual background properties are represented? -- (background: blue url(image.jpg) no-repeat scroll 0px 0px;) __ background-color: blue; background-image: url(image.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 0px;

Q140. Given this code, how tall will the following element be in pixels? (style) #tall-text { display: inline; font-size: 20px; height: 200px; } (/style) (p id="tall-text") Did I grow? (/p) __ 1. 200px 2. 20px 3. 180px 4. 220px

Q140. Given this code, how tall will the following element be in pixels? (style) #tall-text { display: inline; font-size: 20px; height: 200px; } (/style) (p id="tall-text") Did I grow? (/p) __ 2. 20px

Q141. Which style rule will place an X within the grid to win the game? 1. row: 3; column: 3; 2. grid-row: 3; grid-column: 3; 3. row: 2; column: 2; 4. grid-row: 2; grid-column: 2;

Q141. Which style rule will place an X within the grid to win the game? 2. grid-row: 3; grid-column: 3;

Q142. Which CSS property is used to create an image reflection ? 1. box-relect 2. img-reflect 3. None of the above 4. reflect-img

Q142. Which CSS property is used to create an image reflection ? 1. box-relect

Q143. How many layout modes were there before the Flexbox Layout Module was introduced in CSS ? 1. 2 2. 1 3. 4 4. 3

Q143. How many layout modes were there before the Flexbox Layout Module was introduced in CSS ? 3. 4 __ 正確答案是3。在 Flexbox Layout 模組之前，CSS有以下四種佈局模式： Block layout Inline layout Table layout Positioned layout

Q143. What is the general syntax of writing the var() function ? 1. var(--name, value) 2. var(--name) 3. var(value) 4. None of the Above

Q143. What is the general syntax of writing the var() function ? 1. var(--name, value)

Q144. Which of the following components of the CSS box model are transparent ? 1. Padding 2. Margin 3. Both A and B 4. None

Q144. Which of the following components of the CSS box model are transparent ? 3. Both A and B

Q145. How are custom fonts defined using CSS ? 1. @Font-Face Rule 2. Custom font cannot be defined 3. src tags 4. None of the above

Q145. How are custom fonts defined using CSS ? 1. @Font-Face Rule

Q146. Which of the following CSS property sets what kind of line decorations are added to an element, such as underlines, overlines, etc? 1. text-decoration 2. text-style 3. text-decoration-line 4. text-line

Q146. Which of the following CSS property sets what kind of line decorations are added to an element, such as underlines, overlines, etc? 3. text-decoration-line

Q147. Which of the following CSS Property sets the stacking order of positioned elements? 1. y-index 2. z-index 3. x-index 4. all of the mentioned

Q147. Which of the following CSS Property sets the stacking order of positioned elements? 2. z-index

Q148. Which of the following property allows a marquee to be used in the case of a text-overflow? 1. overflow-marquee 2. overflow-style 3. overflow-text 4. none of the mentioned

Q148. Which of the following property allows a marquee to be used in the case of a text-overflow? 2. overflow-style

Q149. Which of the following Cascading order has the highest precedence? 1. user agent declarations 2. user normal declarations 3. author normal declarations 4. author important declarations

Q149. Which of the following Cascading order has the highest precedence? 1. user agent declarations

Q15. In this example, according to cascading and specificity rules, what color will the link be? .example { color: yellow; } ul li a { color: blue; } ul a { color: green; } a { color: red; } -- (ul) (li)(a href="#" class="example") link (/a)(/li) (li)list item(/li) (/ul) -- 1. green 2. yellow 3. blue 4. red

Q15. In this example, according to cascading and specificity rules, what color will the link be? .example { color: yellow; } ul li a { color: blue; } ul a { color: green; } a { color: red; } -- (ul) (li)(a href="#" class="example") link (/a)(/li) (li)list item(/li) (/ul) -- 2. yellow

Q150. The CSS cascade assigns a weight to each style rule ? 1. True 2. False

Q150. The CSS cascade assigns a weight to each style rule ? 1. True

Q151. The **____** represents the result of the cascade: it is the declared value that wins the cascade. 1. specified Value 2. actual value 3. computed value 4. cascaded value

Q151. The **____** represents the result of the cascade: it is the declared value that wins the cascade. 4. cascaded value

Q152. Using negative text-indent is also known as _ ? 1. The Scott Kellum method 2. The Phark method 3. Radu Darvas Technique 4. The Langridge method

Q152. Using negative text-indent is also known as _ ? 2. The Phark method

Q153. Using margin is also known as _ ? 1. Fahrner image replacement 2. The Lindsay method 3. Radu Darvas Technique 4. The Langridge method

Q153. Using margin is also known as _ ? 3. Radu Darvas Technique

Q154. If a particular rule should never be overridden by another rule, the **____** indication should be used. 1. @important 2. !important! 3. !important 4. important!

Q154. If a particular rule should never be overridden by another rule, the **____** indication should be used. 3. !important

Q155. What does CSS stand for? 1. Creative Style Sheets 2. Colourful Style Sheets 3. Cascading Style Sheets 4. Colourful Style Sheets

Q155. What does CSS stand for? 3. Cascading Style Sheets

Q156. What color would rgb(255,0,0) give? 1. Blue 2. Green 3. Red 4. Yellow

Q156. What color would rgb(255,0,0) give? 3. Red

Q157. What is the correct HTML for referring to an external style sheet? 1. (link rel="stylesheet" type="text/css" href="mystyle.css") 2. (stylesheet) mystyle.css (/stylesheet) 3. (style src= "mystyle.css") 4. None of these.

Q157. What is the correct HTML for referring to an external style sheet? 1. (link rel="stylesheet" type="text/css" href="mystyle.css")

Q158. The (link) tag goes inside: 1. the title section 2. the body section 3. the head section 4. None of the above

Q158. The (link) tag goes inside: 3. the head section

Q159. What CSS define in HTML? 1. How to send HTML elements 2. How to display HTML elements 3. How to save HTML elements 4. How to make HTML elements

Q159. What CSS define in HTML? 2. How to display HTML elements

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? -- 1. 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. 2. 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. 3. 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. 4. 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.

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? -- 1. 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.

Q160. Which of the following statements is TRUE for CSS? 1. An inline style sheet should be used when a single document has a unique style 2. An external style sheet is ideal when the style is applied to many pages 3. Both and b above 4. An external style sheet can be written in HTML

Q160. Which of the following statements is TRUE for CSS? 2. An external style sheet is ideal when the style is applied to many pag

Q161. In CSS, margin collapsing only happens with? 1. The horizontal margins of inline elements in the normal flow. 2. The vertical margins of block elements in the normal flow.3. The horizontal margins of block elements in the normal flow. 4. The vertical margins of inline elements in the normal flow.

Q161. In CSS, margin collapsing only happens with? 2. The vertical margins of block elements in the normal __ margin collapsing 是指在某些情況下，相鄰的兩個元素的 margin 會發生合併的現象。在 CSS 中，margin collapsing 只會發生在 normal flow 中的 block-level 元素的垂直 margin 上。如果相鄰的兩個元素的 margin 都是正數，則它們的 margin 會合併為其中較大的值；如果其中一個 margin 是負數，則合併後的 margin 會是兩個值的總和。而 inline-level 元素的水平 margin 則不會發生 margin collapsing。因此，選項 2「normal flow 中 block-level 元素的垂直 margin」為正確答案。

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? A 1. Larger z-index values appear on top elements with a lower z-index value. 2. Negative and positive number can be used. 3. z-index can be used only on positioned elements.

Q18. What is the difference between the following line-height settings? -- line-height: 20px; line-height: 2; -- 1. 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. 2. The value of 20px will set the line-height to 20px. The value of 2 is not valid. 3. The value of 20px will set the line-height to 20px. The value of 2 will default to a value of 2px. 4. 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.

Q18. What is the difference between the following line-height settings? -- line-height: 20px; line-height: 2; -- 1. 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.

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)paragraph one(/p) (/section) (p)paragraph two(/p) -- section p { color: red; } section + p { color: blue; } -- 1. Paragraph one will be blue, paragraph two will be red. 2. Both paragraphs will be blue. 3. Paragraphs one will be red, paragraph two will be blue. 4. Both paragraphs will be red.

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?) 3. Paragraphs one will be red, paragraph two will be blue.

Q2. Using an attribute selector, how would you select an (a) element with a "title" attribute? 1. a[title]{...} 2. a > title {...} 3. a.title {...} 4. a=title {...}

Q2. Using an attribute selector, how would you select an (a) element with a "title" attribute? 1. a[title]{...} 2. a > title {...} 3. a.title {...} 4. a=title {...} -- 1. a[title]{...}

Q20. What are three valid ways of adding CSS to an HTML page? (D) 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 of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?) 1. CSS can be applied to SVGs but JavaScript cannot be. 2. SVGs work best for creating 3D graphics. 3. SVGs can be created as a vector graphic or coded using SVG specific elements such as <svg>, <line>, and <ellipse>. 4. SVGs are a HAML-based markup language for creating vector graphics.

Q21. Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?) __ 3. SVGs can be created as a vector graphic or coded using SVG specific elements such as <svg>, <line>, and <ellipse>.

Q22. In the example below, when will the color pink be applied to the anchor element? -- a:active { color: pink; } -- 1. The color of the link will display as pink after its been clicked or if the mouse is hovering over the link. 2. The color of the link will display as pink on mouse hover. 3. The color of the link will display as pink while the link is being clicked but before the mouse click is released. 4. The color of the link will display as pink before it has been clicked.

Q22. In the example below, when will the color pink be applied to the anchor element? -- a:active { color: pink; } -- 3. The color of the link will display as pink while the link is being clicked but before the mouse click is released.

Q23. To change the color of an SVG using CSS, which property is used? 1. Use background-fill to set the color inside the object and stroke or border to set the color of the border. 2. The color cannot be changed with CSS. 3. Use fill or background to set the color inside the object and stroke to set the color of the border. 4. Use fill to set the color inside the object and stroke to set the color of the border.

Q23. To change the color of an SVG using CSS, which property is used? 4. Use fill to set the color inside the object and stroke to set the color of the border.

Q24. When using position: fixed, what will the element always be positioned relative to? 1. the closest element with position: relative 2. the viewport 3. the parent element 4. the wrapper element

Q24. When using position: fixed, what will the element always be positioned relative to? 2. the viewport

Q25. By default, a background image will repeat _ 1. only if the background-repeat property is set to repeat 2. indefinitely, vertically, and horizontally 3. indefinitely on the horizontal axis only 4. once, on the x and y axis

Q25. By default, a background image will repeat _ 2. indefinitely, vertically, and horizontally

Q26. When using media queries, media types are used to target a device category. Which choice lists current valid media types? 1. print, screen, aural 2. print, screen, television 3. print, screen, speech 4. print, speech, device

Q26. When using media queries, media types are used to target a device category. Which choice lists current valid media types? 3. print, screen, speech

Q27. How would you make the first letter of every paragraph on the page red? 1. p::first-letter { color: red; } 2. p:first-letter { color: red; } 3. first-letter::p { color: red; } 4. first-letter:p { color: red; }

Q27. How would you make the first letter of every paragraph on the page red? 1. p::first-letter { color: red; }

Q28. In this example, what is the selector, property, and value? p { color: #000000; } __ A) "p" is the selector "#000000" is the property "color" is the value B) "p" is the selector "color" is the property "#000000" is the value C) "color" is the selector "#000000" is the property "#p" is the value D) "color" is the selector "p" is the property "#000000" is the value

Q28. In this example, what is the selector, property, and value? p { color: #000000; } __ B) "p" is the selector "color" is the property "#000000" is the value

Q29. What is the rem unit based on? 1. The rem unit is relative to the font-size of the p element. 2. You have to set the value for the rem unit by writing a declaration such as rem { font-size: 1 Spx; } 3. The rem unit is relative to the font-size of the containing (parent) element. 4. The rem unit is relative to the font-size of the root element of the page.

Q29. What is the rem unit based on? 4. The rem unit is relative to the font-size of the root element of the page.

Q3. What is the CSS selector for an (a) tag containing the title attribute? 1. a[title] 2. a > title 3. a=title 4. a.title

Q3. What is the CSS selector for an (a) tag containing the title attribute? 1. a[title] 2. a > title 3. a=title 4. a.title -- 1. a[title]

Q30. Which choice would give a block element rounded corners? 1. corner-radius: 10px; 2. border-corner: 10px; 3. corner-curve: 10px; 4. border-radius: 10px;

Q30. Which choice would give a block element rounded corners? 4. border-radius: 10px;

Q31. In the following media query example, what conditions are being targeted? -- (@media (min-width: 1024px), screen and (orientation: landscape) { ... }) -- 1. The rule will apply to a device that has either a width of 1024px or wider, or is a screen device in landscape mode. 2. The rule will apply to a device that has a width of 1024px or narrower and is a screen device in landscape mode. 3. The rule will apply to a device that has a width of 1024px or wider and is a screen device in landscape mode. 4. The rule will apply to a device that has a width of 1024px or narrower, or is a screen device in landscape mode.

Q31. In the following media query example, what conditions are being targeted? -- (@media (min-width: 1024px), screen and (orientation: landscape) { ... }) -- 1. The rule will apply to a device that has either a width of 1024px or wider, or is a screen device in landscape mode.

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? 1. the top left corner of the element 2. the center of the element 3. the top right corner of the element 4. the bottom left of the element

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? 2. the center of the element

Q33. Which of the following is not a valid color value? (Alternative: Which choice is not a valid color value?) 1. color: #000 2. color: rgb(0,0,0) 3. color: #000000 4. color: 000000

Q33. Which of the following is not a valid color value? (Alternative: Which choice is not a valid color value?) 4. color: 000000

Q34. What is the vertical gap between the two elements below? (div style="margin-bottom: 2rem;") Div 1 (/div) (div style="margin-top: 2rem;") Div 2 (/div) __ 1. 2rem 2. 32px 3. 64px 4. 4rem

Q34. What is the vertical gap between the two elements below? 1. 2rem

Q35. When using the Flexbox method, what property and value is used to display flex items in a column? 1. flex-flow: column; or flex-direction: column 2. flex-flow: column; 3. flex-column: auto; 4. flex-direction: column;

Q35. When using the Flexbox method, what property and value is used to display flex items in a column? 1. flex-flow: column; or flex-direction: column

Q36. Which type of declaration will take precedence? 1. any declarations in user-agent stylesheets 2. important declarations in user stylesheets 3. normal declarations in author stylesheets 4. important declarations in author stylesheets

Q36. Which type of declaration will take precedence? 2. important declarations in user stylesheets

Q37. The flex-direction property is used to specify the direction that 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; Example 2: flex-direction: row-reverse; Example 3: flex-direction: column; Example 4: flex-direction: column-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 example below, which elements will the styles be applied to? -- h2 ~ p { color: blue; } h2 + p { background: beige; } -- (section) (p)paragraph 1 (/p) (h2)Heading (/h2) (p)paragraph 2 (/p) (p)paragraph 3 (/p) (/section) __ 1. Paragraphs 2 and 3 will be blue. The h2 and paragraph 2 will have a beige background. 2. Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background. 3. Paragraph 2 will be blue. Paragraphs 2 and 3 will have a beige background.

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 example below, which elements will the styles be applied to? 2. Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background.

Q39. Which element(s) will be blue? h2 ~ p { color: blue; } -- (section) (p) P1 (/p) (h2) H2 (/h2) (p) P3 (/p) (p) P4 (/p) (/section) -- 1. P3 2. P1, P3 and P4 3. P3 and P4 4. P1

Q39. Which element(s) will be blue? h2 ~ p { color: blue; } 3. P3 and P4

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 older browser version. What are two valid techniques used to clear floats? -- 1. Use the "clearfix hack" on the floated element and add a float to the parent element. 2. Use the overflow property on the floated element or the "clearfix hack" on either the floated or parent element. 3. Use the "clearfix hack" on the floated element or the overflow property on the parent element. 4. Use the "clearfix hack" on the parent element or use the overflow property with a value other than "visible."

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 older browser version. What are two valid techniques used to clear floats? -- 4. Use the "clearfix hack" on the parent element or use the overflow property with a value other than "visible."

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? 1. justify-content: space-around; 2. justify-content: center; 3. justify-content: auto; 4. justify-content: space-between;

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? 4. justify-content: space-between;

Q41. There are many advantages to using icon fonts. What is one of those advantages? 1. Icon fonts increase accessibility. 2. Icon fonts can be used to replace custom fonts. 3. Icon fonts can be styled with typography related properties such as font-size and color. 4. Icon fonts are also web safe fonts.

Q41. There are many advantages to using icon fonts. What is one of those advantages? 3. Icon fonts can be styled with typography related properties such as font-size and color.

Q42. What is the difference between display:none and visibility:hidden? 1. 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 2. 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 3. 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. 4. There is no difference; both will hide the element on the page

Q42. What is the difference between display:none and visibility:hidden? 3. 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.

Q43. What selector and property would you use to scale an element to be 50% smaller on hover? 1. element:hover {scale: 0.5;} 2. element:hover {transform: scale(0.5);} 3. element:hover {scale: 50%;} 4. element:hover {transform: scale(50%);}

Q43. What selector and property would you use to scale an element to be 50% smaller on hover? 2. element:hover {transform: scale(0.5);}

Q44. Which statement regarding icon fonts is true? 1. Icon fonts can be inserted only using JavaScript. 2. Icon fonts are inserted as inline images. 3. Icon fonts require browser extensions. 4. Icon fonts can be styled with typography-related properties such as font-size and color.

Q44. Which statement regarding icon fonts is true? 4. 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; -- 1. bold; normal 2. normal; bold 3. light; normal 4. normal; bolder

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; -- 2. normal; bold

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? A) li:nth-child(3 + 2n) { margin: 0 5 px; } B) li:nth-child(3n + 2) { margin: 0 5 px; } C) li:nth-child(2), li:nth-child(5), li:nth-child(8) { margin: 0 5 px; } D) li:nth-child(2n + 3) { margin: 0 5 px; }

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? B) li:nth-child(3n + 2) { margin: 0 5 px; }

Q47. Which selector would select only internal links within the current page? 1. a[href="#"] {...} 2. a[href~="#"] 3. a[href^="#"] 4. a[href="#"]

Q47. Which selector would select only internal links within the current page? 3. a[href^="#"]

Q48. What is the difference between the margin and padding properties? 1. Margin adds space around and inside of an element; padding adds space only inside of an element. 2. Margin adds space around an element; padding adds space inside of an element. 3. Margin adds a line around an element, padding adds space inside of an element. 4. Margin adds space inside of an element, padding adds space around an element.

Q48. What is the difference between the margin and padding properties? 2. Margin adds space around an element; padding adds space inside of an element.

Q49. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right? 1. padding: 10px 10px 0px 0px; 2. padding: 10px 0px; 3. padding: 10px 0; 4. padding: 10px 0px 10px 0px;

Q49. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right? 1. padding: 10px 10px 0px 0px;

Q5. What element(s) do the following selectors match to? 1) .nav { ...; } 2) nav { ...; } 3) #nav { ...; } -- (A) 1. An element with an ID of "nav" 2. A nav element 3. An element with a class of "nav" (B) They all target the same nav element. (C) 1. An element with an class of "nav" 2. A nav element 3. An element with a id of "nav" (D) 1. An element with an class of "nav" 2. A nav element 3. An div with a id of "nav"

Q5. What element(s) do the following selectors match to? 1) .nav { ...; } 2) nav { ...; } 3) #nav { ...; } -- (C) 1. An element with an class of "nav" 2. A nav element 3. An element with a id of "nav"

Q51. Which style places an element at a fixed location within its container? 1. position: absolute; 2. display: flex; 3. display: block; 4. float: left;

Q51. Which style places an element at a fixed location within its container? 1. position: absolute;

Q52. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value? .example { margin-left: calc(5% + 5px); } __ 1. The left margin value is equal to 5% of its parents element's width plus 5px 2. The left margin value is equal to 5% of the viewport width plus 5px 3. The left margin value is equal to 5% of the closest positioned element's width plus 5px 4. The left margin value is equal to 5% of the selected element's width (.example) plus 5px

Q52. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value? .example { margin-left: calc(5% + 5px); } __ 1. The left margin value is equal to 5% of its parents element's width plus 5px

Q53. Which code would you use to absolutely position an element of the logo class? 1. .logo { position: absolute; left: 100px; top: 150px; } 2. .logo { position: absolute; margin-left: 100px; margin-top: 150px; } 3. .logo { position: absolute; padding-left: 100px; padding-top: 150px; } 4. .logo { position: absolute; left-padding: 100px; top-padding: 150px; }

Q53. Which code would you use to absolutely position an element of the logo class? 1. .logo { position: absolute; left: 100px; top: 150px; }

Q54. In this example, what color will Paragraph 1 be? p:first-of-type { color: red; } p { color: blue; } .container { color: yellow; } p:first-child { color: green; } -- (div class="container") (h1)Heading(/h1) (p)Paragraph1(/p) (p)Paragraph2(/p) (/div) -- 1. blue 2. green 3. red 4. yellow

Q54. In this example, what color will Paragraph 1 be? 3. red

Q55. What is the ::placeholder pseudo-element used for? 1. It is used to format the appearance of placeholder text within a form control. 2. It specifies the default input text for a form control. 3. It writes text content into a hyperlink tooltip. 4. It writes text content into any page element.

Q55. What is the ::placeholder pseudo-element used for? 1. It is used to format the appearance of placeholder text within a form control.

Q56. Which statement is true of the single colon (:) or double colon (::) notations for pseudo-elements-for example, ::before and :before? 1. 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. 2. 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 (:). 3. Only the new CSS3 pseudo-elements require the double colon notation while the CSS2 pseudo-elements do not. 4. 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.

Q56. Which statement is true of the single colon (:) or double colon (::) notations for pseudo-elements-for example, ::before and :before? 4. 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 valid value for the font-style property? 1. normal 2. italic 3. none 4. oblique

Q57. Which choice is not valid value for the font-style property? 3. none

Q58. When would you use the @font-face method? 1. to set the font size of the text 2. to load custom fonts into stylesheet 3. to change the name of the font declared in the font-family 4. to set the color of the text

Q58. When would you use the @font-face method? 2. to load custom fonts into stylesheet

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? 1. 2000 x 1400 pixels 2. 200 x 100 pixels 3. 800 x 400 pixels 4. 400 x 200 pixels

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? 3. 800 x 400 pixels

Q6. When adding transparency styles, what is the difference between using the opacity property versus the background property with an rgba() value? 1. Opacity specifies the level of transparency of the child elements. Background with an rgba() value applies transparency to the background color only. 2. 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. 3. Opacity specifies the level of transparency of an element, including its content. Background with an rgba() value applies transparency to the background color only. 4. Opacity applies transparency to the parent and child elements. Background with an rgba() value specifies the level of transparency of the parent element only.

Q6. When adding transparency styles, what is the difference between using the opacity property versus the background property with an rgba() value? 3. Opacity specifies the level of transparency of an element, including its content. Background with an rgba() value applies transparency to the background color only.

Q60. In Chrome's Developer Tools view, where are the default styles listed? 1. under the User Agent Stylesheet section on the right 2. in the third panel under the Layout tab 3. under the HTML view on the left 4. in the middle panel

Q60. In Chrome's Developer Tools view, where are the default styles listed? 1. under the User Agent Stylesheet section on the right

Q61. While HTML controls document structure, CSS controls ___. 1. semantic meaning 2. content meaning 3. document structure 4. content appearance

Q61. While HTML controls document structure, CSS controls ___. 4. content appearance

Q62. What is the recommended name you should give the folder that holds your project's images? 1. images 2. #images 3. Images 4. my image

Q62. What is the recommended name you should give the folder that holds your project's images? 1. images

Q63. What is an advantage of using inline CSS? 1. It is easier to manage. 2. It is easier to add multiple styles through it. 3. It can be used to quickly test local CSS overrides. 4. It reduces conflict with other CSS definition methods.

Q63. What is an advantage of using inline CSS? 2. It is easier to add multiple styles through it.

Q64. Which W3C status code represents a CSS specification that is fully implemented by modern browsers? 1. Proposed Recommendation 2. Working Draft 3. Recommendation 4. Candidate Recommendation

Q64. Which W3C status code represents a CSS specification that is fully implemented by modern browsers? 3. Recommendation

Q65. Are any of the following declarations invalid? color: red; /* declaration A */ font-size: 1em; /* declaration B */ padding: 10px 0; /* declaration C */ -- 1. Declaration A is invalid. 2. Declaration B is invalid. 3. Declaration C is invalid. 4. All declarations are valid.

Q65. Are any of the following declarations invalid? color: red; /* declaration A */ font-size: 1em; /* declaration B */ padding: 10px 0; /* declaration C */ -- 4. All declarations are valid.

Q66. Which CSS will cause your links to have a solid blue background that changes to semitransparent on hover? a:link { background: #0000ff; } a:hover { background: rgba(0, 0, 255, 0.5); }

Q67. Which CSS rule takes precedence over the others listed? 1. div.sidebar {} 2. * {} 3. div#sidebar2 p {} 4. .sidebar p {}

Q67. Which CSS rule takes precedence over the others listed? 3. div#sidebar2 p {}

Q68. The body of your page includes some HTML sections. How will it look with the following CSS applied? body { background: #ffffff; /* white */ } section { background: #0000ff; /* blue */ height: 200px; } __ 1. blue sections on a white background 2. Yellow sections on a blue background 3. Green sections on a white background 4. blue sections on a red background

Q68. The body of your page includes some HTML sections. How will it look with the following CSS applied? body { background: #ffffff; /* white */ } section { background: #0000ff; /* blue */ height: 200px; } __ 1. blue sections on a white background

Q69. Which CSS keyword can you use to override standard source order and specificity rules? __ 1. !elevate! 2. *prime 3. override 4. !important

Q69. Which CSS keyword can you use to override standard source order and specificity rules? __ 4. !important

Q7. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?) 1. 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. 2. 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. 3. A <nav> element is an example of an inline element. <header> is an example of a block element. 4. A <span> is an example of a block element. <div> is an example of an inline element.

Q7. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?) 2. 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.

Q71. Which color will look the brightest on your screen, assuming the background is white? 1. background-color: #aaa; 2. background-color: #999999; 3. background-color: rgba(170,170,170,0.5); 4. background-color: rgba(170,170,170,0.2);

Q71. Which color will look the brightest on your screen, assuming the background is white? 4. background-color: rgba(170,170,170,0.2);

Q72. Which CSS selector can you use to select all elements on your page associated with the two classes header and clear? 1. ."header clear" {} 2. header#clear {} 3. .header.clear {} 4. .header clear {}

Q72. Which CSS selector can you use to select all elements on your page associated with the two classes header and clear? 3. .header.clear {}

Q73. A universal selector is specified using a(n) ___. 1. "h1" string 2. "a" character 3. "p" character 4. "*" character

Q73. A universal selector is specified using a(n) ___. 4. "*" character

Q74. In the following CSS code, 'h1' is the ___, while 'color' is the ___. h1 { color: red; } 1. property; declaration 2. declaration; rule 3. "p" character 4. selector; property

Q74. In the following CSS code, 'h1' is the ___, while 'color' is the ___. h1 { color: red; } 4. selector; property

Q75. What is an alternate way to define the following CSS rule? font-weight: bold; -- 1. font-weight: 400; 2. font-weight: medium; 3. font-weight: 700; 4. font-weight: Black;

Q75. What is an alternate way to define the following CSS rule? font-weight: bold; -- 3. font-weight: 700;

Q76. You want your styling to be based on a font stack consisting of three fonts. Where should the generic font for your font family be specified? 1. It should be the first one on the list. 2. Generic fonts are discouraged from this list. 3. It should be the last one on the list. 4. It should be the second one on the list.

Q76. You want your styling to be based on a font stack consisting of three fonts. Where should the generic font for your font family be specified? 3. It should be the last one on the list.

Q77. When using a font stack to declare the font family, in what order should the values appear? 1. The first value is the first choice, followed by alternative options, ordered by preference. The last option should be a generic font. 2. The first value is the first choice. The order of the alternative options does not matter. It depends on what is available on the user's computer. 3. The first value is the first choice, and must be followed by at least one alternative option before adding the generic font. 4. The first value is the first choice, followed by a maximum of three alternatives.

Q77. When using a font stack to declare the font family, in what order should the values appear? 1. The first value is the first choice, followed by alternative options, ordered by preference. The last option should be a generic font.

Q78. What is one disadvantage of using a web font service? 1. It requires you to host font files on your own server. 2. It uses more of your site's bandwidth. 3. It offers a narrow selection of custom fonts. 4. It is not always a free service.

Q78. What is one disadvantage of using a web font service? 4. It is not always a free service.

Q79. How do you add Google fonts to your project? 1. by using an HTML link element referring to a Google-provided CSS 2. by embedding the font file directly into the project's master JavaScript 3. by using a Google-specific CSS syntax that directly links to the desired font file 4. by using a standard font-face CSS definition sourcing a font file on Google's servers

Q79. How do you add Google fonts to your project? 1. by using an HTML link element referring to a Google-provided CSS

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? -- (.grid { display: grid; width: 500px; grid-template-columns: 50px 1fr 2fr; }) -- 1. The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide. 2. The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide. 3. The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide. 4. The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.

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? -- (.grid { display: grid; width: 500px; grid-template-columns: 50px 1fr 2fr; }) -- 2. The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.

Q80. Using the following HTML and CSS example, what will equivalent pixel value be for .em and .rem elements? html { font-size: 10px; } body { font-size: 2rem; } .rem { font-size: 1.5rem; } .em { font-size: 2em; } -- (body) (p class="rem")(/p) (p class="em")(/p) (/body) -- 1. The .rem will be equivalent to 25px; the .em value will be 20px. 2. The .rem will be equivalent to 15px; the .em value will be 20px. 3. The .rem will be equivalent to 15px; the .em value will be 40px. 4. The .rem will be equivalent to 20px; the .em value will be 40px.

Q80. Using the following HTML and CSS example, what will equivalent pixel value be for .em and .rem elements? html { font-size: 10px; } body { font-size: 2rem; } .rem { font-size: 1.5rem; } .em { font-size: 2em; } -- (body) (p class="rem")(/p) (p class="em")(/p) (/body) -- 3. The .rem will be equivalent to 15px; the .em value will be 40px.

Q81. What property is used to adjust the space between text characters? 1. font-style 2. text-transform 3. font-variant 4. letter-spacing

Q81. What property is used to adjust the space between text characters? 4. 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? 1. .element {cursor: pointer;} 2. .element {cursor: hand;} 3. .element {cursor: move-hand;} 4. .element {cursor: pointer-hand;}

Q82. What is the correct syntax for changing the cursor from an arrow to a pointing hand when it interacts with a named element? 1. .element {cursor: pointer;}

Q83. What is the effect of this style? background-position: 10% 50%; -- 1. The background image is placed 10% from the left and 50% from the top of its container 2. The background image is placed 10% from the bottom and 50% from the left of its container 3. The background image is placed 10% from the right and 50% from the bottom of its container 4. The background image is placed 10% from the top and 50% from the left of its container

Q83. What is the effect of this style? background-position: 10% 50%; -- 1. The background image is placed 10% from the left and 50% from the top of its container

Q84. How will the grid items display? grid-template-columns: 2fr 1fr; -- 1. The first column will be twice the height of the second column, and will be as wide as the content. 2. The first column will be half the size of the container, and the second column will absorb the remaining space. 3. The first column will be twice as wide as the second column, and will fit proportionally within the grid container. 4. The first column will be twice the width and height of the second column, and will fit proportionally within the grid container.

Q84. How will the grid items display? grid-template-columns: 2fr 1fr; -- 3. The first column will be twice as wide as 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="..." /) -- 1. img#photo:hover {scale: 0.5;} 2. img#photo:hover {transform: scale(0.5);} 3. img#photo {hover-scale: 0.5;} 4. img#photo:hover {size: smaller;}

Q85. Which style rule would make the image 50% smaller during a hover? (img id="photo" alt="" src="..." /) -- 2. img#photo:hover {transform: scale(0.5);}

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; __ 1. A and C 2. C and D 3. B and C 4. A and B

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; __ 4. A and B

Q87. Review the HTML example below. Then choose the list of selectors that select the (p), from lowest to highest specificity. (section) (p class="example")...(/p) (/section) __ D) 1. p { ...; } 2. section p { ...; } 3. [class*='example'] { ...; } 4. p.example { ...; }

Q88. Which property is used to create a drop shadow effect on an HTML element? 1. element-shadow 2. outer-shadow 3. dropbox-shadow 4. box-shadow

Q88. Which property is used to create a drop shadow effect on an HTML element? 4. box-shadow

Q89. What is the correct selector for targeting all text inputs that are not disabled? 1. input[type="text"]:not([disabled]) {...} 2. input[type="text"]:not("disabled") {...} 3. input[type*="text"]:not([disabled="disabled"]) {...} 4. input[type="text"]:not([type="disabled"]) {...}

Q89. What is the correct selector for targeting all text inputs that are not disabled? 1. input[type="text"]:not([disabled]) {...} __ input[type="text"] selects all the input with type text, and :not([disabled]) selects all the elements not having the attribute "disabled". Combining both only selects all the input elements with type attribte as "text" and not having "disabled" attribute.`

Q9. If the width of the container is 500 pixels, what would the width of the three columns be in this layout? -- (.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }) __ 1. 50px, 150px, 300px 2. 50px, 200px, 300px 3. 50px, 100px, 200px 4. 50px, 50px, 100px

Q9. If the width of the container is 500 pixels, what would the width of the three columns be in this layout? -- (.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }) __ 1. 50px, 150px, 300px

Q90. How can you create a semi-transparent background color? 1. background-color: hsl(0, 0, 0, 0.5); 2. background-color: rgbx(0, 0, 0, 0.5); 3. background-color: rgba(0, 0, 0, 0.5); 4. background-color: rgba(0, 0, 0, 1);

Q90. How can you create a semi-transparent background color? 3. background-color: rgba(0, 0, 0, 0.5); __ 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.

Q91. Using this HTML markup, how would you select only the headings contained within the <header> element? (header) (h1) Heading 1 (/h1) (h2) Heading 2 (/h2) (/header) (h2) Heading 2(/h2) -- 1. header h1, header h2 {...} 2. header h1 + header h2 {...} 3. header h1, h2 {...} 4. h1, h2 {...}

Q91. Using this HTML markup, how would you select only the headings contained within the <header> element? (header) (h1) Heading 1 (/h1) (h2) Heading 2 (/h2) (/header) (h2) Heading 2(/h2) -- 1. header h1, header h2 {...}

Q92. Suppose you want to have a list of items (.item) displayed in a row and in reverse order using flexbox. What is the error in the CSS below? .container { display: flex; } .item { border: 1px solid red; flex-direction: row-reverse; } -- 1. The value for flex-direction should be reverse-row. 2. The .container element should have a property of flex: display. 3. The flex-direction property should be declared in the container. 4. The display value should be flex-inline to display the items in a row.

Q92. Suppose you want to have a list of items (.item) displayed in a row and in reverse order using flexbox. What is the error in the CSS below? .container { display: flex; } .item { border: 1px solid red; flex-direction: row-reverse; } -- 3. The flex-direction property should be declared in the container.

Q93. Which choice is not a valid transition? 1. transition: margin 1000ms ease-in-out; 2. transition: color 1.3s ease-in; 3. transition: position 400ms linear; 4. transition: opacity 1s ease-in;

Q93. Which choice is not a valid transition? 3. transition: position 400ms linear;

Q94. In this example, what color will the paragraphs be and why? article p { color: blue; } article > p { color: green; } __ (article) (p) Paragraph 1 (/p) (aside) (p) Paragraph 2 (/p) (/aside) (/article) __ 1. Paragraph 1 will be blue. Paragraph 2 will be green. 2. Both paragraphs will be green. 3. Paragraph 1 will be green. Paragraph 2 will be blue. 4. Both paragraphs will be blue.

Q94. In this example, what color will the paragraphs be and why? article p { color: blue; } article > p { color: green; } __ 3. Paragraph 1 will be green. Paragraph 2 will be blue. __ > 只會選直接的下一層

Q95. Review the declaration of border style shown below. What is the corresponding longhand syntax? border: 1px solid red; __ border-width: 1px; border-style: solid; border-color: red;

Q96. Pseudo-classes are used to ____. 1. style the state of the selected element 2. insert presentational content 3. style a specific part of the selected element 4. style the elements using class selectors

Q96. Pseudo-classes are used to ____. 1. style the state of the selected element __ Pseudo-classes = :hover :active 等 Pseudo-element = ::before ::after ，正確答案會變成3

Q97. In this example, what styles will be applied to which elements? section { color: gray; } (section) (p) paragraph (/p) (a href="#") link (/a) (/section) __ 1. The paragraph and link will be gray. 2. The background color of the section element will be gray. 3. The paragraph will be gray. The link will be the browser default, black. 4. Only the paragraph will be gray.

Q97. In this example, what styles will be applied to which elements? section { color: gray; } 4. Only the paragraph will be gray.

Q98. Which answer is an example of a type selector (also sometimes referred to as an element selector)? 1. .header {...} 2. header {...} 3. #header {...} 4. header > h1 {...}

Q98. Which answer is an example of a type selector (also sometimes referred to as an element selector)? 2. header {...}

Q99. What is the correct order for listing different link states in a website so those states display correctly on the page? :link :visited :focus :hover :active

Q99. What is the correct order for listing different link states in a website so those states display correctly on the page? :link :visited :focus :hover :active __ :link：未訪問的連結狀態 :visited：已訪問的連結狀態 :focus：連結被選擇但還沒有執行操作時的狀態 :hover：當滑鼠懸停在連結上時的狀態 :active：當連結被點擊時的狀態

css-quiz

Set pelajaran terkait

Exam 3 review

Social Change (SOC-1)

N 400

Carpentry- Building Materials, Fasteners, and Adhesives

Chapter 9: Joints

Questions from ExamFX

Finals Study Guide_Unit 2

reading

med/surg chap 46 Myasthenia Gravis & Guillain Barre

Chromosomes

Ch. 11 quiz PSY 410

Anatomy and Positioning of theBony Thorax, Sternum and Ribs

ATI flashcards set 5

AGRICULTURAL MACHINERY

stats study sets 1.1-2.2

Acids & Bases

Info 360 Chapter 10, Management Info CH. 9, MIS9, Management Info CH. 9

MGT 461 exam 3

Physical Science

network chapter 7

css-quiz

Set pelajaran terkait

Exam 3 review

Social Change (SOC-1)

N 400

Carpentry- Building Materials, Fasteners, and Adhesives

Chapter 9: Joints

Questions from ExamFX

Finals Study Guide_Unit 2

reading

med/surg chap 46 Myasthenia Gravis & Guillain Barre

Chromosomes

Ch. 11 quiz PSY 410

Anatomy and Positioning of the Bony Thorax, Sternum and Ribs

ATI flashcards set 5

AGRICULTURAL MACHINERY

stats study sets 1.1-2.2

Acids & Bases

Info 360 Chapter 10, Management Info CH. 9, MIS9, Management Info CH. 9

MGT 461 exam 3

Physical Science

network chapter 7

Anatomy and Positioning of theBony Thorax, Sternum and Ribs