InterviewSolution
Saved Bookmarks
InterviewSolution
This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.
| 1. |
Which of the following selects every element that has no children?(a) :empty(b) :enabled(c) :checked(d) :disabled |
|
Answer» Correct option is (a) :empty For explanation I would say: :empty selects every element that has no children including text nodes, :checked selects every checked element, :disabled selects every disabled element, :enabled selects every enabled element. |
|
| 2. |
Which of the following will select every element that is the only child of its parent?(a) :only-child(b) :only-of-type(c) :optional(d) :out-of-range |
|
Answer» The correct option is (a) :only-child Easy explanation: :only-child selects every element that is the only child of its parent, :only-of-type selects every element that is the only child of its parent, :optional selects input elements with no “required” attribute. |
|
| 3. |
Which of the following selects every element whose href attribute value contains the given substring?(a) attribute$=value(b) attribute*=value(c) attribute^=value(d) attribute|=value |
|
Answer» Right option is (b) attribute*=value To explain I would say: attribute*=value selects every element whose href attribute value contains the given substring, attribute$=value selects every element whose href attribute value ends with the given href, attribute^=value selects every element element whose href attribute value begins with “https”. |
|
| 4. |
In which every block-level element appears on a new line?(a) normal flow(b) relative positioning(c) absolute positioning(d) floating positioning |
|
Answer» Correct answer is (a) normal flow To explain: Every block-level element appears on a new line, which causes each item to appear lower down the page than the previous one. Even if we specify the width of the boxes and there is space for two elements to sit side by side, they will not appear next to each other. |
|
| 5. |
Which of the following does not support the “:hover” pseudoclass?(a) IE 6(b) Chrome(c) Opera(d) Safari |
|
Answer» The correct option is (a) IE 6 Explanation: IE 6 does not support the “:hover” pseudoclass on elements other than anchor tags. To get hover work in IE6, we create a class that duplicates the :hover styles, and then script a function to toggle that class on/off. |
|
| 6. |
Which of the following does not support sticky version?(a) Firefox(b) Opera(c) IE(d) Chrome |
|
Answer» Correct option is (c) IE The best explanation: Internet explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a –webkit-prefix. W should also specify at least one of the top, right, bottom or left for sticky positioning to work. |
|
| 7. |
Which of the following value sits to the left of the block of text?(a) outside(b) left(c) inside(d) right |
|
Answer» The correct option is (a) outside The best explanation: List are indented into the page by default and list-style-position property indicates whether the marker should appear on inside or outside box containing main points. This property can take two values outside and inside. The marker sits to the left of the block of text, this is the default behavior if this property is not used. |
|
| 8. |
Which of the following helps to deal with HTML5 support?(a) Twitter Bootstrap(b) WebShim(c) jQuery UI(d) Niceforms |
|
Answer» The correct choice is (b) WebShim Best explanation: WebShim is a big tool that can help with browser HTML5 support, web form part can be very helpful. If you want to normalize forms Twitter Bootstrap can greatly help. |
|
| 9. |
Which of the following CSS property can be used to provide the flex-direction and flex-wrap properties?(a) flex(b) flex-flow(c) flex-wrap(d) all of the mentioned |
|
Answer» The correct choice is (b) flex-flow To elaborate: It is a shorthand for both flex-direction and flex-wrap. |
|
| 10. |
Which of the following is not the value for an unordered list?(a) disc(b) square(c) circle(d) numeric |
|
Answer» Correct answer is (d) numeric The best explanation: For unordered list, we can use none, disc, square, circle. For ordered list, we can use decimals, decimal-leading-zero, lower-alpha, upper-roman, lower-roman. |
|
| 11. |
Which of the following will not use JavaScript?(a) Animated attacked bar graph(b) Pie chart(c) Animated Donut chart(d) Infographic charts |
|
Answer» Right choice is (b) Pie chart The explanation is: Pure CSS3 experimental charts do not use any JavaScript & zero image, but can be viewed in Webkit browsers. Animated Stacked Bar Graph use D3 chart and JavaScript, it is developed to mimic live data feed, and give an illusion of how to handle data on the backend. |
|
| 12. |
Which is not a WebKit value?(a) push-button(b) menulist(c) radio(d) tooltip |
|
Answer» The correct choice is (d) tooltip To elaborate: WebKit includes various values like checkbox, button, button-level, menulist, scrollbarbutton-up, listitem, scrollbarbutton-left, caret, textfield, textarea, searchfield, searchfield-decoration, slider-vertical, slider-horizontal, scrollbargripper-horizontal etc. |
|
| 13. |
Which of the following will provide date pickers?(a) jQuery UI(b) Niceforms(c) WebShim(d) Twitter Bootstrap |
|
Answer» Correct choice is (a) jQuery UI Best explanation: jQuery UI offers some very interesting and advanced as well as customizable widgets like date pickers with special attention given to accessibility. Niceforms is a standalone JavaScript method that provides complete customization of web forms. |
|
| 14. |
Which of the following is a library for JavaScript?(a) PlotKit(b) List bar chart(c) Pie chart(d) Stacked bar graphs |
|
Answer» The correct choice is (a) PlotKit The best I can explain: PlotKit is a library for JavaScript that is an improved version of CanvasGraph. It lets us build various sorts of charts and graphs without a hitch. In list bar chart we style definition list and convert it into a timeline chart. |
|
| 15. |
Which is not the property of CSS box model?(a) width(b) height(c) margin(d) color |
|
Answer» Correct option is (d) color Easiest explanation: CSS box model include height, width, padding, margin and border. All text-fields have complete support for every property related to CSS box model. Browser relies on system default styles when displaying these widgets. |
|
| 16. |
Which of the following is an extension to the common JavaScript framework?(a) Niceforms(b) Uni-forms(c) Formalize(d) jQuery UI |
|
Answer» Right choice is (c) Formalize For explanation: Formalize is an extension to common JavaScript frameworks like JQuery, Dojo, YUI etc., it helps to normalize and customize the forms. Uni-form standardizes form markup, styling it with CSS, it also offers a few additional features when used with jQuery. |
|
| 17. |
Which is not a Mozilla value?(a) caret(b) resizer(c) listbox(d) scrollbar |
|
Answer» Right choice is (a) caret The best I can explain: Mozilla includes many values like menulist, radio, scrollbar, dialog, listbox, scrollbarbutton-down, scrollbar, resizer, checkbox, scrollbarbutton-up, separator, toolbar, toolbox, statusbar, separator, toolbarbutton, window, treetwisty, treeview etc. |
|
| 18. |
Which of the following technique is also known as Fahrner Image Replacement?(a) CSS ON/Images ON(b) CSS ON/Images OFF(c) CSS OFF/Images ON(d) CSS OFF/Images OFF |
|
Answer» Correct answer is (a) CSS ON/Images ON To explain I would say: CSS ON/Images On technique is also known as FIR or “Fahrner Image Replacement”. The premise here is to use a span to wrap the text inside the header and use that span to hide the text. It works but we have to use display:none. |
|
| 19. |
Which is not a Mozilla CSS Extension?(a) ::-webkit-input-placeholder(b) :-moz-placeholder(c) –moz-ui-valid(d) :-moz-submit-invalid |
|
Answer» Correct option is (a) ::-webkit-input-placeholder To explain: Mozilla CSS Extensions include :-moz-placeholder, :-moz-ui-invalid, :moz-ui-valid, :moz-submit-invalid. ::-webkit-input-placeholder is Webkit CSS Extension, :-ms-input-placeholder is Microsoft CSS Extension. |
|
| 20. |
Which of the following will insert generated content in the counter?(a) content(b) counter-reset(c) counter-increment(d) counter() |
|
Answer» The correct choice is (a) content Explanation: content inserts generated content, counter-reset creates or resets a counter, counter-increment increments the value of the counter, counter() function adds the value of a counter to an element. |
|
| 21. |
Using Absolute Positioning is known as _________(a) The Langridge method(b) The Levin Technique(c) The Scott Kellum method(d) The Leon method |
|
Answer» Right option is (b) The Levin Technique The best I can explain: This method also requires an additional element to work. But the element is not wrapped around the text but used to position our image. |
|
| 22. |
Which of the following CSS Gradient Functions creates a circular or elliptical gradient, and optionally sets its shape, size, and position?(a) radial-gradient()(b) circular-gradient()(c) elliptical-gradient()(d) none of the mentioned |
|
Answer» Correct choice is (c) elliptical-gradient() The explanation is: Self-explainatory. |
|
| 23. |
Using a bogus image is also called as _______(a) The Leon method(b) The Levin Technique(c) Radu Darvas Shim(d) The Langridge method |
|
Answer» Correct answer is (c) Radu Darvas Shim To explain: This method also requires a bogus image in addition to a usual element to work properly. The image is a 1×1 pixel transparent GIF. The main purpose is to show users the alt text if images are turned off. |
|
| 24. |
Which of the following is not the pseudo class for CSS Basic UI Level3?(a) :optional(b) :read-only(c) :valid(d) :checked |
|
Answer» Correct option is (d) :checked The explanation is: CSS Basic UI Level 3 has many pseudo-classes like :widget, :invalid, :valid, :in-range, :required, :read-write, :read-only, :optional, :out-of-range. CSS Selector Level 3 has the classes :disabled, :enabled, :indeterminate, :checked. |
|
| 25. |
Using actual image with inline image method is also known as __________(a) The Langridge method(b) Radu Darvas Shim(c) The Levin Technique(d) Phark method |
|
Answer» The correct choice is (d) Phark method The best I can explain: In this method, we use the actual image for image replacement. The image has alt text that will be shown when images are turned off. This technique does not seem to be good for SEO. Images will still be visible with CSS turned off and images kept on. |
|
| 26. |
Using Pseudo element is known as _____________(a) Nash Image replacement(b) Phark method(c) Radu Darvas Shim(d) The Langridge method |
|
Answer» Correct option is (a) Nash Image replacement Best explanation: This technique used the pseudo element to push the text aside. |
|
| 27. |
What is the default value of visibility?(a) visible(b) hidden(c) initial(d) inherit |
|
Answer» Correct choice is (a) visible To explain I would say: The default value of visibility is visible, the element is visible. When set to hidden, the element is invisible but it still takes up space, initial sets the property to its default value. Inherit inherits this property from its parent element. |
|
| 28. |
Which of the following CSS3 property is used to tell the browser what the sizing properties should be include?(a) box-sizing(b) box-model(c) box-design(d) box-redesign |
|
Answer» Correct choice is (a) box-sizing Explanation: Self-explainatory. |
|
| 29. |
The ______________ is the link between the HTML document and the style. It specifies what elements are affected by the declaration.(a) Tag(b) Selector(c) Declaration(d) Class |
|
Answer» Correct answer is (b) Selector Explanation: The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration. The declaration is that part of the rule that sets forth what the effect will be. |
|
| 30. |
Which of the following CSS3 property specifies where to navigate when using the arrow-down navigation key?(a) down(b) nav-down(c) arrow-down(d) none of the mentioned |
|
Answer» Correct choice is (c) arrow-down For explanation I would say: Self-explainatory. |
|
| 31. |
Which of the following is only for table elements?(a) initial(b) collapse(c) hidden(d) inherit |
|
Answer» Correct answer is (b) collapse Easy explanation: Collapse is only for table elements. Collapse removes row or column. But it does not affect table layout. The space taken up by row or column will be available for other content. If the collapse is used with other elements, it renders as “hidden”. |
|
| 32. |
Which of the following rule allows users to import style rules from other style sheets?(a) @media(b) @important(c) @import(d) @style |
|
Answer» Correct option is (c) @import Explanation: The @import rule allows users to import style rules from other style sheets. If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule. |
|
| 33. |
The __________ specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.(a) author(b) user(c) user-agent(d) none of the mentioned |
|
Answer» The correct answer is (a) author Explanation: Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally. |
|
| 34. |
Which of the following Cascading order has the highest precedence?(a) user agent declarations(b) user normal declarations(c) author normal declarations(d) author important declarations |
|
Answer» Right answer is (a) user agent declarations For explanation I would say: Self-explainatory. |
|
| 35. |
As a general rule, properties in CSS inherit from ___________ elements(a) child to parent(b) parent to child(c) grandparents to parents(d) none of the mentioned |
|
Answer» Correct answer is (b) parent to child For explanation: Self-explainatory. |
|
| 36. |
An ___________ rule can be used to define style rules for multiple media types in a single embedded style sheet(a) @media(b) @charset(c) @font-face(d) None of the mentioned |
|
Answer» The correct choice is (a) @media The best explanation: None. |
|
| 37. |
Which of the following CSS3 property specifies where to navigate when using the arrow-right navigation key?(a) right(b) nav-right(c) nav-side(d) none of the mentioned |
|
Answer» The correct option is (c) nav-side For explanation: Self-explainatory. |
|
| 38. |
Which of the following CSS3 property specifies where to navigate when using the arrow-up navigation key?(a) nav-upper(b) nav-top(c) nav-up(d) all of the mentioned |
|
Answer» Correct answer is (c) nav-up The explanation: Self-explainatory. |
|
| 39. |
Which of the following property specifies the order of a flexible item relative to the rest of the flexible items inside the same container?(a) sort(b) layout(c) order(d) asort |
|
Answer» Right option is (c) order For explanation I would say: The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. |
|
| 40. |
Which of the following Module is not available in CSS3.(a) DOMs(b) Fonts(c) Backgrounds and Borders(d) Color |
|
Answer» The correct choice is (a) DOMs The best explanation: The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. |
|
| 41. |
Which of the following CSS3 property specifies whether or not an element is resizable by the user?(a) resize(b) length(c) inherit(d) none of the mentioned |
|
Answer» The correct choice is (b) length Explanation: Self-explainatory. |
|
| 42. |
Clip property is not supported in ____________(a) Internet Explorer(b) Chrome(c) Safari(d) Opera |
|
Answer» Correct answer is (a) Internet Explorer For explanation: There is one more way of hiding elements by clipping them. Clip-path property is not fully supported in IE or Edge yet. If using external SVG files for clip-path, support is even more limited. |
|
| 43. |
The _________________ is the result of resolving the specified value.(a) cascaded value(b) computed value(c) specified value(d) declared value |
|
Answer» The correct option is (b) computed value Explanation: Self-explainatory. |
|
| 44. |
Using Small font-size is also known as ____________(a) Lindsay method(b) Leon Dwyer method(c) Levin technique(d) Radu Darvas Shim |
|
Answer» Correct answer is (a) Lindsay method Best explanation: Using small font-size is known as Lindsay method. Another way to hide text is by making it very small and set its color to the background of the image. This works without affecting accessibility but we can also face SEO penalties because of tiny font size and camouflaged color. |
|
| 45. |
Which of the following are different origins of style sheets?(a) author(b) user(c) user agent(d) all of the mentioned |
|
Answer» Correct answer is (d) all of the mentioned Easiest explanation: Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally. User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did). User agent: Conforming user agents must apply a default style sheet. A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language |
|
| 46. |
Using padding is also known as ________(a) Leon Dwyer method(b) Radu darvas method(c) Lindsay method(d) Langridge method |
|
Answer» Right option is (d) Langridge method The best explanation: Using padding is known as Langridge method. We push the text outside of our header using padding-top property. The property is to be set to a value that is equal to the height of the logo. But this alone is not sufficient, we have to use overflow: hidden to hide the text. |
|
| 47. |
An ___________ rule is used to define a page block for printed styles.(a) @important(b) @page(c) @css(d) @html |
|
Answer» The correct answer is (b) @page Best explanation: An @page rule is used to define a page block for printed styles. Generally, within this construct we see various CSS properties like size, page, and margin to control the dimensions of the page. |
|
| 48. |
Which of the following property is used to define the animations that should be run?(a) animation-delay(b) animation-iteration-count(c) animation-duration(d) animation-name |
|
Answer» Correct answer is (d) animation-name To explain: None. |
|
| 49. |
Which of the following property allows the text direction to be overridden to support multiple languages and text flow directions in the same document?(a) unicode-bidi(b) visibility(c) top(d) vertical-align |
|
Answer» Right choice is (a) unicode-bidi The best I can explain: Syntax: |
|
| 50. |
Which of the following is the Color Format that is a CSS’s six-digit hexadecimal format as color defined in (X)HTML?(a) Specification defined named colors(b) System Color Names(c) 6-Hex Color(d) 3-Hex Color |
|
Answer» The correct answer is (c) 6-Hex Color To explain: CSS’s six-digit hexadecimal format is the same as color defined in (X)HTML. The format specifies color as #rrggbb, where rr is the amount of red, gg the amount of green, and bb the amount of blue, all specified in a hexadecimal value ranging from 00 to FF. |
|