CSS 3 Interview Questions and Answers (122) - Page 2

Contextual selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, a search pattern, where only the last element in the pattern is addressed providing it matches the specified context.

TD P CODE {color: red}

The element CODE will be displayed in red but only if it occurs in the context of the element P which must occur in the context of the element TD.

TD P CODE, H1 EM {color: red}

The element CODE will be displayed in red as described above AND the element EM will also be red but only if it occurs in the context of H1

P .footnote {color: red}

Any element with CLASS footnote will be red but only if it occurs in the context of P

P .footnote [lang]{color: red}

Any element with attribute LANG will be red but only if it is classed as "footnote" and occurs in the context of P

Pseudo-elements are fictional elements that do not exist in HTML. They address the element's sub-part (non-existent in HTML) and not the element itself. In CSS1 there are two pseudo-elements: 'first-line pseudo-element' and 'first-letter pseudo-element'. They can be attached to block-level elements (e.g. paragraphs or headings) to allow typographical styling of their sub-parts. Pseudo-element is created by a colon followed by pseudo-element's name, e.g:

P:first-line
H1:first-letter

and can be combined with normal classes; e.g:

P.initial:first-line

First-line pseudo-element allows sub-parting the element's first line and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-line {text-transform: uppercase}

<P class=initial>The first line of this paragraph will be displayed in uppercase letters</P>

First-letter pseudo-element allows sub-parting the element's first letter and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-letter { font-size: 200%; color: red}

<P class=initial>The first letter of this paragraph will be displayed in red and twice as large as the remaining letters</P>

1. CSS is not case sensitive.

2. But some browsers taking CSS as case sensitive, where there may be the use of XML document and XHTML doctypes.

3. It is better practice to avoid CSS classes with same name, where the only difference is case.

4.Parts that are not under control of CSS like font family names and URLs can be case sensitive - IMAGE.gif and image.gif is not the same file.

CSS properties always take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support, but won't have any effect in browsers with CSS support.

NOTE: This is objective type question, Please click question title for correct answer.

To reference a style sheet on .aspx page,we use link element in the page’s head element, as shown .

<link href="demo.css" type="text/css" rel="stylesheet"> 

It is known as the linking of external stylesheet.(demo.css is a stylesheet file in
the web site)

Answer is,

<style>



*{direction:rtl}



</style>

This css rule will change the direction all elements in the page from left to right. by default, elements direction is left to right.
it will helps to make website in arabic version.

set wait cursor using following line

document.body.style.cursor = 'wait';

Wait cursor is used to when some process is taking too much time or while calculating and you want to show wait cursor to user to wait till process is done, after process done, convert the wait cursor to default cusrsor.

document.body.style.cursor = "default";

Short for in-betweening, the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image.

It is a key process in all types of animation.

In CSS3, you can use Transforms(matrix,translate,rotate,scale etc) module to achieve tweening.

Introduced in IE 10 and using it web developer can now wrap text so that it completely surrounds elements.

It completely remove the traditional limitations of floats where Instead of limiting elements to floating either to the left or right relative to their position in the document flow, this feature can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.

you can use CSS exclusion with other new layout features of IE 10 like CSS Grid, CSS Multi-column, and CSS Flexbox.

Must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10.

NOTE: This is objective type question, Please click question title for correct answer.

There are following three different ways in which you can insert a style sheet in a web page :

1) Inline style
2) External style sheet
3) Internal style sheet

From highest to lower priority

1) Inline style.
2) Internal style sheet.
3) External style sheet.
4) Browser default.

Responsive web design (often refer as RWD) is a technique in which designed page(s) is is perfectly display on every screen size and device (e.g desktop,mobile etc).

A page designed with RWD uses CCS3 media queries and scalable images.

Responsive Web design requires all three features to be implemented.
1) Media queries and media query listeners
2) A flexible grid-based layout that uses relative sizing.
3) Flexible images and media, through dynamic resizing or CSS.

NOTE: This is objective type question, Please click question title for correct answer.

NOTE: This is objective type question, Please click question title for correct answer.

NOTE: This is objective type question, Please click question title for correct answer.

NOTE: This is objective type question, Please click question title for correct answer.

With the help of word-spacing css property,we can give spaces in-between words

For example:-

<style type="text/css">

//for Label control



label

{ 

  word-spacing:30px;

}

</style>



//for Textbox control

[type=text]

{

   word-spacing:30px;

}

NOTE: This is objective type question, Please click question title for correct answer.