1. Do you know which style specification method should be used?

Style specification method in your document should be used according to your need and requirements. The methods that can be used are:
- External Style Sheets: should be used when you want to apply the same style to multiple documents.
- Embedded Style Sheets: should be used if you want to specify styles for a single document.
- Inline Styles: should be used if you want to apply style to one or few elements in a document.

2. Do you know what are the media types CSS allows?

Media is used to render the design and customize the documents. Media types allow user to load and apply their own selected style sheets. Media control is applied to external style sheets, in this way user can save time by retrieving the sheets from the network itself. Example: Speech based browsers can avoid the download of style sheets which are designed for visual rendering.

3. Why div are of different size in IE?

The specification which is been given for the size of div in IE is as follows:
Width of a box (i.e. a containing area) in CSS = width + border +padding (+margin).
Total box width is: 300px with a padding of 10px and a border of 5px. This requires the total area of 330px. IE5 uses different rules and out of width it subtracts the padding and border from the specific width so the total width becomes 270px. So, instead of 330px, IE uses 270px that is why the div are of different sizes.

4. What is .rolloverfordnd?

.rolloverfordnd is a class selector to which the style gets applied. Dot(.) is used for class selector as it applies to any HTML elements that have the attribute as: class="rollverfordnd". This attribute can be added to multiple elements such that, if separate declarations are defined then the declaration with a specific selector win over any other.

5. User Interface Designer Job Interview Questions Part Two!

Situation - You want to place a text over an image. How would you do that?
Situation - You want to combine multiple sheets into one. How would you do that?
Situation - You want to specify background images. How would you do that?
Explain following elements: a.) Inline b.) Block c.) Parent d.) Children
How do you separate content and design in CSS?
Explain pseudo classes.
Explain: a.) CSS declaration b.) Important declaration
Situation - You just set the background image and you want it to be non-repeating. What would you do?
Differentiate between ID and Class.
You want to have a you text-links without an underline. How would you do that?
Explain cascading order.
You want links of different colours on the same page. How would you do that?
Explain: a.) Value b.) Initial value
How would you style the following? a.) Table cells b.) Forms
Are there any WYSIWYG editors available for creation of style sheets?
You want to justify your text. How would you do that?
I want to place two paragraphs adjacent to each other. How should I do it?

6. User Interface Designer Job Interview Questions Part One!

What is CSS? Explain its features.
Why do you use CSS?
What is a style sheet?
Why do you need a style sheet over regular HTML?
List different types of Style Sheets and how do you link to them?
Explain Class.
Explain Grouping.
What are the functions of following selectors? a.) h1 b.) .warning c.) #footer
Explain Embedded Style Sheet. How would you link to it?
Explain External Style Sheet. How would you link to it?
What is selector? Explain: a.) ID Selector b.) Contractual Selector c.) Attribute Selector d.) Parent Child Selector
What are the advantages and disadvantages of following style methods? a.) External Style Sheets b.) Embedded Style Sheets c.) Inline Styles
Situation - You want to set up a minimum width for IE. How would you do that?

7. Can you explain how to handle events with DHTML?

A DHTML application supports numerous events, many of them quite analogous to those of a standard VB application. Events are the beating heart of any JavaScript application. For handling event in DHTML we attach event handler to HTML elements. The event handler waits until a certain event, for instance a click on a link, takes place. When it happens it handles the event by executing some JavaScript code that has been defined by us. After it has executed the code the event handlers comes to its initial state and wait for the user to fire any event. Hence to handle events in DHTML we need to register an event handler.

8. Do you know what is the use of CSS sprites?

- A web page with large number of images takes a longer time to load. This is because each image separately sends out a http request.
- The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.

9. Explain the attributes that make up a DHTML?

The attributes that make up DHTML are HTML, JavaScript, CSS and DOM. These are explained below as:

JavaScript: Whether we call it JavaScript, Jscript, or ECMAScript, it is the most common language used today for client-side scripting. The main reason for this JavaScript comes with virtually every browser. In DHTML JavaScript JavaScript comes with virtually every browser. For example, an onload event could execute a JavaScript function to query the browser's cookies collection to determine whether the user is a first-time visitor to the page.

CSS: It stands for Cascading Style Sheet. This is used for the presentation part of the web page. In simple words it holds the designing of the page. The look & feel of the page completely depends on CSS. In DHTML CSS rules can be modified at both the document and the element level using JavaScript with event handlers, they can add a significant amount of dynamism with very little code.

DOM: It stands for Dynamic Object Model and it is the weakest link in DHTML as many of the browser does not support the DOM functionality. It defines the object and its properties. It is a standard way of accessing and manipulating the static content. The Document Object Model is a platform and language-neutral interface that allows program and scripts to dynamically access the content and update it.

HTML: It stands for Hyper Text Markup Language. As the names suggest it is not a programming language, it is a markup language which consists of a set of markup tags.

10. What is RWD?

- RWD is the abbreviation for Responsive web design.
- In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don't need to create a different page for each device.

Download Interview PDF