CSS (Layout & Images)
Which of the following is not an unordered list's value?
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.
ol {list-style-type: lower roman;}
Which of the following is not a box-level element?
Explanation:
CSS treats each HTML element as if it is in its own box. This box will either be block-level Box or inline box.
Every element at the block level appears on a new line?
Explanation:
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.
Which of the following commands will cause the image to move up and down?
Explanation:
The background image moves up and down as the user scrolls up and down the page. The fixed value helps background
image stays in the same position on the page.
Which one should be used to overlay text on a high-contrast image?
Explanation:
To overlay text on an image with high contrast, we can place a semi-transparent background color or “screen”
behind the text to improve legibility. The majority of photographs have quite high contrast, that means they are
not ideal for use as background image.
Which of the following is the best representation of browsers in their natural state?
Explanation:
There are five major categories for image replacement i.e. CSS ON/Images ON, CSS ON/Images OFF, CSS OFF/Images ON,
CSS OFF/Images ON, CSS OFF/Images OFF, Extra Unnecessary Markup. CSS ON/Images ON represents browsers in their
normal states and all the techniques should pass their test.
Which of the following best describes browsing without the use of stylesheets?
Explanation:
CSS OFF/Images ON represents browsing with no stylesheets being applied. Most of the techniques default to regular
web text here which is not exactly a fail, but since images may still be turned on.
Fahrner Image Replacement is also known as which of the following techniques?
Explanation:
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.
Using margin is also referred to as________.
Explanation:
Using margin is also used as Radu Darvas technique. This technique also forces the text outside of the browser window but uses
margins to do so. The main idea is to apply very large negative left margin and give our header a correspondingly large width.
The use of a small font size is also referred to as
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.
Which of the following methods does not shorten long URLs?
Explanation:
word-wrap breaks long URLs when they reach a certain limit. This property is basically supported in a wide range of
browsers even in IE 6, it works in chrome when printing. Firefox automatically breaks long URLs, Internet Explorer
has no capability for breaking long URLs into the shorter one.
Breaks behind an element will be handled by which of the following?
Explanation:
There are three CSS attributes page-break before, page-break-after and page-break-inside that allow us to decide exactly
where a print page will be broken. Among other things, this will prevent images from being broken into two pieces.
Computer screens are made of which of the following media types?
Explanation:
The screen media type is used for computer screens, smart-phones, tablets etc. The print media type is used for printers,
speech is used for screenreaders that “reads” the page loud, all is used for all media type devices.
Which value will determine the width of the viewport?
Explanation:
The number of colors the device can display is specified by color-index, color-gamut specifies the approximate range of
colors that are supported by a user agent and output device. The number of bits per color component for the output device
is specified by color value.
Which of the following will specify the display area's minimum width?
Explanation:
The minimum width of a display area such as browser window is specified by min-width, min-resolution specify the
minimum resolution of the device, using dpi or dpcm, monochrome specify the number of bits per “color” on a
monochrome device.
Which of the following will select all of the class's elements?
Explanation: mbr> .class selects all elements within the given class, #id selects the element within the given id, element>element selects all p> elements where parent is div> element, element selects all p> elements.
Explanation:
element,element selects all div> elements and all p> elements, element element selects all p> elements inside div> elements,
element>element selects all p> elements where parent is a div> element, element+element selects all p> elements that are
placed immediately after div> element.
Explanation:
attribute*=value selects every a> element whose href attribute value contains the given substring,
attribute$=value selects every a> element whose href attribute value ends with the given href,
attribute^=value selects every a> element element whose href attribute value begins with “https”.
Explanation:
:empty selects every p> element that has no children including text nodes, :checked selects every checked input> element,
:disabled selects every disabled input> element, :enabled selects every enabled input> element.
Which of the following chooses the document's root element?
Explanation:
:root selects the document’s root element, ::selection selects the portion of an element that is selected by a user,
:required selects input elements with “required” attribute specified, :out-of-range selects input elements with a
value outside a specified range.
Which of the following is set for the shadow's horizontal offset?
Explanation:
h-offset is the required value, it is for the horizontal offset of the shadow. A positive value puts the shadow on the right side
of the box, a negative value puts the shadow on the left side of the box.
For spread radius, which of the following is used?
Explanation:
blur is an optional value, it sets the spread radius. A positive value increases the size of the shadow, a negative value
decreases the size of the shadow. For blur radius we set the value blur, the higher the number, the more blurred the
shadow will be spread.
What distinguishes an shadow from an outside shadow?
Explanation:
inset is an optional value, it changes the shadow from an outer shadow (outset) to an inner shadow,
initial sets this property to its default value, inherit inherits this property from its parent element.
Which property specifies the background painting area?
Explanation:
The CSS background-clip property specifies the painting area of the background, the property takes three different values,
border-box-, padding-box, content-box. In content-box the background is painted within the content box.
On hover, which of the following will provide a minimalist entrance effect?
Explanation:
A minimalist yet charming entrance effect on hover is shown by linear pop-up, a distinguishable pop-up with beautiful
entrance effect and “flappy” buttons are shown by “flappy” buttons, a material design comes with a fade-in animation
in material design style.