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;}
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
