CSS (Selectors, Appearance, & Files)
In this example, what kind of selector is being used?
p {line-height: 150%;}
Explanation:
These selectors are called element selectors and are simply used
as follows:
element-name { /* properties */ }
Any tag with an id attribute set is selected by which of the following selectors?
Explanation:
Example:
#test {color: green;}
/* makes a tag with id=’test’ green */
What will the outcome of the code snippet below be?
p strong {background-color: yellow;}
Explanation:
All occurrences of the strong element within a p element have a yellow background.
Direct descendents are selected by which of the following selectors?
Explanation:
Example:
body > p {background-color: yellow;}
/* makes all p tags that have the
body tag as their immediate parent
have the background color yellow */
Siblings are selected by which of the following selectors?
Explanation:
Example:
p ~ strong {font-style: italic;}
/* sets the font style to italic on
all strong tags that have a p tag
as a preceding sibling */
A style can be applied to just one tag by using a ___________
Explanation:
By applying an id rule, a style can be applied to just a single tag.
For example, if we name a tag with a unique id attribute as follows
Affected Text
Which of the following selectors selects all E elements with the attribute attr and a value ending in the provided value?
Explanation:
Example: p[title$="!"] {color: red;}
Which of the following selectors picks the default elements from a group of comparable elements?
Explanation:
Example: :default {background-color: red;}
Which of the following selectors picks the presently enabled elements?
Explanation:
Example: input:enabled {background-color:white;}
Which of the following selectors picks the element of its type that is the first child of its parent?
Explanation:
Example: strong:first-of-type {font-size:bigger;}
Which of the selectors below chooses elements that don't match the selector s?
Explanation:
Example: *:not(h1) {color: black;}
Which selector applies styles to elements that are valid according to HTML5 validations set using the pattern or type attributes?
Explanation:
Example: :valid {color: green;}
Which of the following selectors chooses the element that is the referring URI's target?
Explanation:
Example: :target{color:red;}
Which of the following selectors picks the checked elements?
Explanation:
Example: :checked {color: blue;}
Which of the following selectors picks the given type E components with a specific class value?
Explanation:
Example:
h1.note {text-decoration: underline;}
/* underlines all h1 tags with
class='note' */
To add space inside the text box, which property is used?
Explanation:
Padding property is used to add space inside the text field, when we have many inputs after each other we can also add
some margin to add more space outside,
input[type=text] {padding:13px 30px; margin: 8px 0;}
When you get focus, which one can animate the width of the search input?
Explanation:
For animating the width of search input when it gets focus we used CSS transition property,
input[type=text] {-webkit-transition: width 09s ease-in-out; transition: width 0.9s ease-in-out; } input[type=text]:focus {width:100%;}
Which of the following is not a CSS Basic UI Level 3 pseudo class?
Explanation:
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.
Which of the following will fill the counter with generated 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.
Which of the following is not a Mozilla CSS Extension?
Explanation:
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.
Which of the following is a JavaScript framework extension?
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.
Which of the following helps HTML5 support?
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.
Which of the following is not a WebKit value?
Explanation:
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.
Which of the following is not a Mozilla value?
Explanation:
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.
What isn't a CSS box model property?
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.