web templates info, jquery, JavaScript,CSS3, HTML5,Less Frameworks,Sass Framework,CSS Media Queries, career,job sites,IT,software,Government jobs technology news,html,free jquery tutorials ,free flash tutorials,free template designs,forms,sliders,effects,menu,forms, animations,gallery,html, design, lightbox, accordian,tooltips, IE Bugs fix, tabs, marquee, flash,stepy,wizard,dynamic,Json,custom, php, wordpress

HTML 5 INTERVIEW QUESTIONS :

WHAT IS HTML5?
HTML5 is the latest version of HTML standard supporting multimedia and graphical content.

HTML 5 is a new standard for HTML whose main target is to deliver everything without need to any additional plugins like flash, Silverlight etc. It has everything from animations, videos, rich GUI etc.
HTML5 is cooperation output between World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

What purpose does HTML5 serve?
HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.

What other advantages does HTML5 have?
► Cleaner markup
► Standardized approach to mobile devices support
► Additional semantics of new elements like <header>, <nav>, and <time>
► New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.

HOW DO YOU PLAY A VIDEO USING HTML5?
We can display video using the tag as shown below:

HOW DO YOU PLAY A AUDIO USING HTML5?
We can display audio using the tag as shown below:

HTML5 New Form Attributes

HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:

autocomplete
novalidate

New attributes for <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

Do you know New Input Type Attribute in HTML5
Ans: we can use below new input type Attribute in HTML5
Type Value
tel The input is of type telephone number
search The input field is a search field
url a URL
email One or more email addresses
datetime A date and/or time
date A date
month A month
week A week
time The input value is of type time
datetime-local A local date/time
number A number
range A number in a given range
color A hexadecimal color, like #82345c
placeholder Specifies a short hint that describes the expected value of an input field

Explain the difference between HTML and HTML5
HTML5 is nothing more then upgraded version of HTML where in HTML5 Lot of new future like Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other library

What is the <!DOCTYPE>? Is it mandatory to use in HTML5?
The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag does not have an end tag. It is not case sensitive.
The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).

What are New Semantic/Structural Elements
HTML5 offers new elements for better structure:
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

Differences Between SVG and Canvas:

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

What is HTML5 Web Storage?
Ans : In HTML5, we can store data locally within the user’s browser.It is possible to store large amounts of data without affecting the website’s performance.
Web Storage is more secure and faster.
there are two types of Web Storages
1.LocalStorage:stores data locally with no limit
2.SessionStorage:stores data for one session

WHAT ARE THE DIFFERENT TYPES OF STORAGE IN HTML5?
HTML5 offers two new objects for storing data on the client:
LocalStorage – stores data with no time limit
1. <script type=“text/javascript”>
2. localStorage.lastname=“ZAG”;
3. document.write(localStorage.lastname);
4. </script>
SessionStorage – stores data for one session.The data is deleted when the user closes the browser window.
1. <script type=“text/javascript”>
2. sessionStorage.lastname=“ZAG”;
3. document.write(sessionStorage.lastname);
4. </script>

What is the use of localStorage in HTML5?
Ans: Before HTML5 LocalStores was done with cookies. Cookies are not very good for large amounts of data, because they are passed on by every request to the server, so it was very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website’s performance.and The data is stored in different areas for different websites, and a website can only access data stored by itself.
And for creating localstores just need to call localStorage object like below we are storing name and address
1. <script type=“text/javascript”>
2. localStorage.name=“PHPZAG”;
3. document.write(localStorage.name);
4. </script>
5. <script type=“text/javascript”>
6. localStorage.address=“Newyork USA”;
7. document.write(localStorage.address);
8. </script>

What is the sessionStorage Object in html5 ? How to create and access?
Ans: The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. like below we can create and access a sessionStorage here we created “name” as session
1. <script type=“text/javascript”>
2. sessionStorage.name=“PHPZAG”;
3. document.write(sessionStorage.name);
4. </script>

WHAT IS THE DIFFERENCE BETWEEN HTML5 APPLICATION CACHE AND REGULATE HTML BROWSER CACHE?
The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.

What is difference between session storage and local storage?

Local storage data persists forever but session storage is valid until the browser is open, as soon as the browser closes the session variable resets.

What is application cache in HTML5?

One of the most demanded things by end user is offline browsing. In other words if internet connection is not available page should come from browser cache i.e. offline and application cache helps you to achieve the same.

Application cache helps you to specify which files should be cached and not cached.

What is the difference between local storage and cookies?

	Cookies	Local storage
Client side / Server side.	Data accessible both at client side and server side. Cookie data is sent to the server side with every request.	Data is accessible only at the local browser side. Server cannot access local storage until deliberately sent to the server via POST or GET.
Size	4095 bytes per cookie.	5 MB per domain.
Expiration	Cookies have expiration attached to it. So after that expiration the cookie and the cookie data get’s deleted.	There is no expiration data. Either the end user needs to delete it from the browser or programmatically using JavaScript we need to remove the same.

What is the manifest file?

The manifest file is a text file that instructs the browser what it should and should not cache when the application cache is enabled. It is made up of three parts:

Cache Manifest: Indicates files to be cached after they are initially downloaded.
Network: Indicates files that require a server connection to load, and will not be cached.
Fallback: Indicates fallback pages in the case a page is not accessible.

Example manifest file:

CACHE MANIFEST

# 2014-01-15 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

FALLBACK:

/html/ /offline.html

HTML 5 Features:
Ans :
1. The <canvas> element for 2D drawing
2. The <video> and <audio> elements for media playback
3. local storage support.
4. Added New elements, like <figure>,<small>, <header>, <nav>,<article>, <footer>, <section>,<mark>
5. New form controls, like placeholder,calendar, date, time, email, url, search,required ,autofocus
6. In HTML5 there is only one <!doctype> declaration: <!DOCTYPE html>

So how do we implement application cache in HTML 5?

The first thing in we need to specify is the “manifest” file. “manifest” file helps you to define how your caching should work. Below is the structure of the manifest file :-

CACHE MANIFEST

# version 1.0

CACHE :

All manifest file starts with CACHE MANIFEST statement.
#( hash tag) helps to provide the version of the cache file.
CACHE command specifies which files needs to be cached.
The content type of the manifest file should be “text/cache-manifest”.

Below is how cache manifest has been provided using ASP.NET C#.

Response.ContentType = "text/cache-manifest";

Response.Write("CACHE MANIFEST \n");

Response.Write("# 2012-02-21 v1.0.0 \n");

Response.Write("CACHE : \n");

Response.Write("Login.aspx \n");

Response.Flush();

Response.End();

One the cache manifest file is created the next thing is to provide the link of the manifest file in the HTML page as shown below.

When the above file runs first time it gets added in the browser application cache and in case server goes down the page is served from the application cache.

So how do we refresh the application cache of the browser?

Application cache is removed by changing version number to a new version number as specified in the “#” tag in the below code.

CACHE MANIFEST

# version 2.0(new)

CACHE :

Aboutus.aspx

NETWORK :

Pages.aspx

What is fallback in Application cache?

Fallback in application cache helps you to specify the file which will displayed if the server is not reachable. For instance in the below manifest file we are saying if someone hits “/home” and if the server is not reachable then “homeoffline.html” file should be served.

FALLBACK:

/home/ /homeoffline.html

What is network in application cache?

Network command says files which should not be cached. For example in the below code we are saying that “home.aspx” should never be cached and or available offline.

NETWORK:

home.aspx

What is the application cache, and what are its benefits?

The application cache generates offline versions of a web application, making it accessible offline. It also improves the site’s performance and speed.

How do you enable the application cache?

To enable the application cache, just add the manifest attribute inside the <html> tag and link to the manifest file. If a web user visits a page with the manifest attribute included, that page will be cached.

Difference between GET and POST Metods

Difference Between GET and POST methods

GET:
1) Data is appended to the URL.
2) Data is not secret.
3) It is a single call system
4) Maximum data that can be sent is 256.
5) Data transmission is faster
6) This is the default method for many browsers

POST:
1) Data is appended to the URL.
2) Data is Secret
3) It is a two call system.
4) There is no Limit on the amount of data.That is characters any amount of data can be sent.
5) Data transmission is comparatively slow.
6) No default and should be Explicitly specified.

Questions:

1. Do you know jQuery mobile?

2. What are the advantages for using jQuery mobile?

3. If we design page using jQuery mobile, can you able to redesign the same page with javascript and css without using jQuery mobile?

4. If so, then y u r using jQuery mobile, what are the advantage?

5. What is html5 and advantage?

6. what is css3 and advantage?

7. responsive design?

8. How to design a page have different look and feel for different browsers of same content using css3?

9. Css3 browser compatibility?

10. Caching and local storage in HTML5?

11. Designing jQuery plugin?

Q 1 What is the difference between HTML and HTML5 ?

A 1 HTML5 is nothing more then upgreaded version of HTML where in HTML5 Lot of new future like

Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other library

Q2 What is the <!DOCTYPE> ? Is it necessary to use in HTML5 ?

A 2 The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. AND The <!DOCTYPE> tag does not have an end tag and It is not case sensitive.

The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Q 3 How many New Markup Elements you know in HTML5

A 3 Below are the New Markup Elements added in HTML5

Tag Description

<article>Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.

<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content

<bdi> For text that should not be bound to the text-direction of its parent elements

<command>A button, or a radiobutton, or a checkbox

<details>For describing details about a document, or parts of a document

<summary>A caption, or summary, inside the details element

<figure> For grouping a section of stand-alone content, could be a video

<figcaption>The caption of the figure section

<footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

<header>For an introduction of a document or section, could include navigation

<hgroup>For a section of headings, using <h1> to <h6>, where the largest is the main heading of the

section, and the others are sub-headings

<mark>For text that should be highlighted

<meter> For a measurement, used only if the maximum and minimum values are known

<nav>For a section of navigation

<progress>The state of a work in progress

<ruby>For ruby annotation (Chinese notes or characters)

<rt>For explanation of the ruby annotation

<rp>What to show browsers that do not support the ruby element

<section>For a section in a document. Such as chapters, headers, footers, or any other sections of the

document

<time> For defining a time or a date, or both

<wbr> Word break. For defining a line-break opportunity.

Q 4 What are the New Media Elements in HTML5? is canvas element used in HTML5

A 4 Below are the New Media Elements have added in HTML5

Tag Description

<audio> For multimedia content, sounds, music or other audio streams

<video> For video content, such as a movie clip or other video streams

<source>For media resources for media elements, defined inside video or audio elements

<embed>For embedded content, such as a plug-in

<track> For text tracks used in mediaplayers

yes we can use Canvas element in html5 like below

<canvas>

Q 5 Do you know New Input Type Attribute in HTML5

A 5 Yes we can use below new input type Attribute in HTML5

Type Value

tel The input is of type telephone number

search The input field is a search field

url a URL

email One or more email addresses

datetime A date and/or time

date A date

month A month

week A week

time The input value is of type time

datetime-local A local date/time

number A number

range A number in a given range

color A hexadecimal color, like #82345c

placeholder Specifies a short hint that describes the expected value of an input field

Q :6 How to add video and audio in HTML5

A :6 Like below we can add video in html5

<video width="320" height="240" controls="controls">

<source src="pcds.mp4" type="video/mp4" />

<source src="pcds.ogg" type="video/ogg" />

</video>

And audie like this

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

</audio>

Q :7 What the use of Canvas Element in HTML5

A :7 The canvas element is used to draw graphics images on a web page by using javascript like below

<canvas id="pcdsCanvas" width="500" height="400"></canvas>

<script type="text/javascript">

var pcdsCanvas=document.getElementById("pcdsCanvas");

var pcdsText=pcdsCanvas.getContext("2d");

pcdsText.fillStyle="#82345c";

pcdsText.fillRect(0,0,150,75);

</script>

Q :8 What is the use of localStorage in HTML5 ?

A :8 Before HTML5 Local Stores was done with cookies. Cookies are not very good for large amounts of data, because they are passed on by every request to the server, so it was very slow and in-effective.

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance. and The data is stored in different areas for different websites, and a website can only access data stored by itself.

And for creating local stores just need to call local Storage object like below we are storing name and address

<script type="text/javascript">

localStorage.name="PCDS";

document.write(localStorage.name);

</script>

<script type="text/javascript">

localStorage.address="Mumbai India..";

document.write(localStorage.address);

</script>

Q :9 What is the session Storage Object in html5 ? How to create and access ?

A :9 The session Storage object stores the data for one session. The data is deleted when the user closes the browser window. like below we can create and access a session Storage here we created "name" as session

<script type="text/javascript">

sessionStorage.name="PCDS";

document.write(sessionStorage.name);

</script>

Q 10: What is the <!DOCTYPE> ? Is it necessary to use in HTML5 ?

A10: The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. AND The <!DOCTYPE> tag does not have an end tag and It is not case sensitive.

The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As

In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).

Q 11: What purpose does HTML5 serve?

A11: HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.

Q 12: What is the difference between HTMl5 Application cache and regular HTML browser cache?

A12: HTML5 specification allows browsers to pre fetch some or all of a website assets such as HTML files,

images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can pre fetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Pre fetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.

Q 13: HOW DO YOU PLAY A AUDIO USING HTML5?

A13: We can display audio using the tag as shown below:

</audio>

Q 14: WHAT ARE THE DIFFERENT TYPES OF STORAGE IN HTML5?

A14: HTML5 offers two new objects for storing data on the client:

LocalStorage – stores data with no time limit

localStorage.lastname=“ZAG”;

document.write(localStorage.lastname);

</script>

SessionStorage – stores data for one session.The data is deleted when the user closes the browser window.

sessionStorage.lastname=“ZAG”;

document.write(sessionStorage.lastname);

</script>

Q 15: WHAT ARE THE NEW APIS PROVIDED BY THE HTML 5 STANDARD? GIVE A BRIEF DESCRIPTION OF EACH?

A15: The canvas element: Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.

Timed media playback

Offline storage database

Document editing

Drag-and-drop

Cross-document messaging

Browser history management

MIME type and protocol handler registration

Q16: WHAT OTHER ADVANTAGES DOES HTML5 HAVE?

A16: Cleaner markup

Standardized approach to mobile devices support

Additional semantics of new elements like <header>, <nav>, and <time>

New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.

Q 17: GIVE AN EXAMPLE OF NEW ELEMENTS IN HTML5 TO SUPPORT MULTIMEDIA AND GRAPHICS?

A17: HTML5 introduced many elements such as , instead of to support multimedia.

Q 18: WHAT IS HTML5?

A18: HTML5 is the latest version of HTML standard supporting multimedia and graphical content.

Q19: WHAT IS THE DIFFERENCE BETWEEN HTML5 APPLICATION CACHE AND REGULATE HTML BROWSER CACHE?

A19: The new HTML5 specification allows browsers to pre fetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can

prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.

Q 20: WHAT PURPOSE DOES HTML5 SERVE?

A20: HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silver light, Apache Pivot, and Sun JavaFX.

Q 21: WHAT IS THE STATUS OF THE DEVELOPMENT OF THE HTML 5 STANDARD?

A21: HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004 under the name Web Applications 1.0.[1] As of March 2010[update], the specification is in the Draft Standard state at the WHATWG, and in Working Draft state at the W3C.

Q 22: What is the status of the development of the HTML 5 standard?

A22: HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004 under the name Web Applications 1.0.[1] As of March 2010[update], the specification is in the Draft Standard state at the WHATWG, and in Working Draft state at the W3C.

Q 23: What is the different between canvas and svg?

A23:

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Best suited for graphic-intensive games where many objects are redrawn frequently	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

CSS3 INTERVIEW QUESTIONS :

CSS-CSS3:

CSS is used to control the style and layout of multiple Web pages all at once.

text-wrap: values?
text-wrap: normal|none|unrestricted|suppress;

What is CSS?

CSS stands for Cascading Style Sheets

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

What is the difference between CSS & CSS3?

CSS3 is the upgraded version of CSS with new features like Selectors, Box model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animation, Multiple column layout, User Interface etc.

What is the difference between an ID selector and CLASS?

An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.

The id Selector:

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

The class Selector:

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

* Do NOT start a ID/Class name with a number.

What are style sheet properties?

CSS Background, CSS Text, CSS Font, CSS Border, CSS Outline, CSS Margin, CSS Padding, CSS List, CSS Table

List various font attributes used in style sheet?

font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar

What is the correct HTML for referring to an external style sheet?

Where in an HTML document is the correct place to refer to an external style sheet?

In the <head> section

What are different ways to apply styles to a Web page?

4 ways we can declare the CSS in HTML.

Inline, Internal, External as link("<link href="css/styles.css" rel="stylesheet" type="text/css">, Import css by ("@import url('path');")

Cascading order:

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default

External style sheet

Internal style sheet (in the head section)

Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

What is contextual selector?

For example, consider the following rules:

H1 { color: red }

EM { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>

We address this case by adding a contextual rule to the previous two that sets the text color to blue whenever an EM occurs anywhere within an H1:

H1 { color: red }

EM { color: red }

H1 EM { color: blue }

The third rule will also match the following fragment:

<H1>This

<SPAN class="myclass">headline is <EM>very</EM>

important</SPAN></H1>

A contextual selector may also contain attribute selectors.

What are the powerful features of CSS3?

Media Query and Animations are the powerful features of css3 A media query consists of a media type and at least one expression that limits the style sheets scope by using media features, such as wid...

Set Font Size With Em:

To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Ems in CSS Generally, 1em = 12pt = 16px = 100% it is use to scale the value in web.

Crossbrowser Solution for Lists:

Example explained:

For ul:

Set the list-style-type to none to remove the list item marker

Set both padding and margin to 0px (for cross-browser compatibility)

For all li in ul:

Set the URL of the image, and show it only once (no-repeat)

Position the image where you want it (left 0px and down 5px)

Position the text in the list with padding-left

Positions in CSS:

Values for position: static, relative, absolute, fixed, inherit

Here, I’ve listed basic difference between css positioning properties.

Position-Relative. This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative;on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN from where it would NORMALLY be.

Position-Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.

Position-Fixed. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

What does z-index do?

The z-index property specifies the stack order of an element.

What is Grouping?

When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.

h1, h2, h3 {background: red;}

What are Child Selectors?

A child selector is used when you want to match an element that is the child of another specific element. The parent and child selectors are separated by spaces. The following selector locates an unordered list element within a paragraph element and makes a text within that element bold.

p > ul {font-weight: bold;}

What are Pseudo Classes?

Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. A good example is the :link and :visited pseudo classes for the HTML A element. Another good example is first-child, which finds an element’s first child element.

The following CSS makes all visited links red and green, the actual link text becomes yellow when the mouse pointer is positioned over it, and the text of the first element of a paragraph is bold.

a:link {font-color: red;}

a:visited {font-color: green;}

a:hover {font-color: yellow;}

p.first-child {font-weight: bold;}

Can you explain CSS box model?

CSS box model is a rectangular space around a HTML element which defines border, padding and margin.

Border: - This defines the maximum area in which the element will be contained. We can make the border visible, invisible, define height and width etc.

Padding: - This defines the spacing between border and element.

Margin: - This defines the spacing between border and any neighboring elements.

Can you explain some text effects in CSS 3?

Here the interviewer is expecting you to answer one of two text effects by CSS.Below are two effects which are worth noting. Shadow text effect

Syntax:

.specialtext

{

text-shadow: 5px 5px 5px #FF0000;

}

What’s the difference between an inline element and a block element?

Inline --à Span same line such as <b> Hi</b>.

Block element -à div such as box, container, etc

No Answer:

1. Float option.

2. Box layout.

3. Media query syntax.

4. CSS3 keyframes uses and syntax.

5. In CSS3 to enable he hardware acceleration for mobile application we need to use translate3d syntax.

6. Manifest use to load the webpage in the offline. Cache.

7. What is responsive layout.

8. Sprites images.

9. Retina images.

10. CSS3 new properties (shadow, radius, gradient, animation etc..)

11. SASS uses.

12. Word wrap in CSS3.

13. What is Boostrap? Bootstrap is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap is Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap was also programmed to support both HTML5 and CSS3
Bootstrap is a CSS and Javascript framework that is used within your HTML. Bootstrap provides more advanced functionality to your web site.

Q 1 What is the difference between CSS and CSS3 ?

A 1 CSS3 is upgreaded version of CSS with new future like Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout,User Interface etc

Q 2 List out CSS3 modules

A 2 Below are the listed major modules

Selectors

Box Model

Backgrounds and Borders

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

Q3 What new futures added in CSS3 for Borders and how Browser Support it?

A 3 following border futures added

border-radius

box-shadow

border-image

and all modern Browser Support it like below

Internet Explorer 9 supports border-radius and box-shadow

Firefox requires the prefix -moz- for border-image.

Chrome and Safari requires the prefix -webkit- for border-image.

Opera requires the prefix -o- for border-image.

Q 4 How you will create Rounded Corners using css3

A 4 We have to creat a class like below

<style>

.roundc{

border:2px solid #ff0000;

border-radius:25px;

background:#dddddd;

width:300px;

-moz-border-radius:25px; /* Firefox */

-webkit-border-radius:25px; /* Chrome and Safari */

-o-border-radius:25px; /* Opera */

}

</style>

and we have to add this class where we want the round corner like in below div

<div class="roundc" > this is the round corner by css3 </div>

This is the div and round corner by css3

Q 5 How we create border using images by CSS3?

A 5 By using border-image: property of css3 we can create a border using images like below

.roundpcds

{

border-image:url(borderpcds.png) 30 30 round;

-moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */

-webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(borderpcds.png) 30 30 round; /* Opera */

}

.stretchPcds

{

-moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */

-webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */

border-image:url(borderpcds.png) 30 30 stretch;

}

Q 6 How you will create Box Shadow and text Shadow using CSS3

A 6 Like below we can create Box Shadow using CSS3

text-shadow: h-shadow v-shadow blur color;

.boxshadowpcds

{

box-shadow: 10px 10px 5px #ccccc;

}

.textshadowpcds

{

text-shadow: 5px 5px 5px #FF0000;

}

and then need to use these class boxshadownpcds ,textshadowpcds

Q7 What is the CSS3 The background size Property

A 7 The background-size property specifies the size of the background image.

As we know Before CSS3, the background image size was find out by the real size of the image. In CSS3 it is possible to specify the size of the background image, which allows you to re-use background images in different ways.

.pcdsbp1

{

background: url(background.gif);

-moz-background-size: 80px 60px; /* Firefox 3.6 */

background-size: 80px 60px; /* or we can do background-size:100% 100%;*/

background-repeat: no-repeat;

}

Q 8 What is the word wrap / word wrapping in CSS3 ?

A 8 To Allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class

.wordwrappcds{

word-wrap:break-word;

}

Q 9 What is the CSS3 animation ?

A 9 When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

Specify the name of the animation

Specify the duration of the animation

animation: name duration timing-function delay iteration-count direction;

div
{
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

Q 10 What is .rolloverfordnd?

A10 .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.

Q12 Why my div are of different size in IE?

A12 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.

Q13 What are the media types CSS allows?

A13 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.

Q13 Can someone else's Style Sheet be used without their permission?

A13 Style sheet information is written using special language syntax. Yes, someone else’s style sheet can be used without their permission, but it is not recommended, as it might overload the server. So, a local copy should be maintained, created and used instead of referencing a remote copy.

Q14 Which style specification method should be used?

A14 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.

Q15 How do you override the underlining of hyperlinks?

A15 Using CSS extra style functionality can be provided, that can control the status of underlining of hyperlinks. You can use style sheets in whatever way you want and can control the look and style of your display. The way in which it can be done is by introducing external level style sheet:

A { text-decoration: none } //within an anchor element as:

Q16 What are logical and physical tags?

A17 - Physical tags are known as presentational markup. They are used with recent versions of HTML. It suggests the visual appearance of the content. Ex: Italics, Underline, Bold

- Logical tags are not used for appearances, but they are used to show the purpose of the content written. For EX: em tag is used for emphasis not for any other thing.

Q17 What is external Style Sheet? How to link it with HTML document?

A17 External Style Sheet allows you to write the style content just like you do in a normal style sheet, but the advantage of it is that, it can be used anywhere and can be linked with HTML documents. It is very easy, convenient and portable way to use the formatting for the entire site.

External Style sheets can be linked with HTML documents by using a LINK element in HEAD area. It has the extension as .css. Example code:

<HEAD>

</HEAD>

Q18 What is imported Style Sheet? How to link it with HTML document?

A18 Imported Style Sheet allows you to import the custom made style sheet from anywhere, in your HTML document. In this, one main sheet is made that consists of declarations applied to the whole site and other sheet is made, that consists of only specific declarations applied to specific documents. To link imported style sheet to HTML document @import is used in the STYLE element.

For example:

<!--

@import url(http://www.and.so.on.partial1.css);

@import url(http://www.and.so.on.partial2.css);

.... Other statements-->

</STYLE>

Q19 How the concept of Style sheet is different from HTML?

A19 HTML is an easy way to represent the structure, but when it comes to style then HTML becomes very hard to work with. The concept of style sheet is introduced to make the work easy for you to design without any hassles. Style sheets increases browser capabilities and allow different formatting options which have not been included in HTML.

Q20 Can CSS be used with other than HTML documents?

A20 Yes. CSS can be used with any ny structured document format. e.g. XML, however, the method of linking CSS with other document types has not been decided yet.

Can Style Sheets and HTML stylistic elements be used in the same document?

Yes. Style Sheets will be ignored in browsers without CSS-support and HTML stylistic elements used.

Q21 What are pseudo-classes?

A21 Pseudo-classes are fictional(imaginational) element types that do not exist in HTML. In CSS1 there is only one element type which can be classed this way, namely the A element (anchor). By creating three fictional types of the A element individual style can be attached to each class. These three fictional element types are: A as unvisited link, A as active link and A as visited link. Pseudo-classes are created by a colon followed by pseudo-class’s name. They can also be combined with normal classes, e.g.:

A:link {background: black; color: white}

A:active {background: black; color: red}

A:visited {background: transparent; color: black}

<A HREF….>This anchor (or rather these anchors) will be displayed as declared above</A>

A.foot:link {background: black; color: white}

A.foft:active {background; black: color: red}

A.foot:visited {background: transparent; color: black}

<A CLASS=foot HREF….>This anchor and all other anchors with CLASS foot will be displayed as declared above</A>

Q22 How do I design for backward compatibility using Style Sheets?

A22 Existing HTML style methods (such as <font SIZE> and <b>) may be easily combined with style sheet specification methods. Browsers that do not understand style sheets will use the older HTML formatting methods, and style sheets specifications can control the appearance of these elements in browsers that support CSS1.

Q23 As a reader, how can I make my browser recognize my own style sheet?

A23 Netscape

It is not possible to do this in Netscape yet (as of version 4.0.)

Internet Explorer 3.0 (Win95/NT)

[It is possible to do this at least in Windows95/NT, but no user interface is provided. Unknown how this might be accomplished on other operating systems.]

1. Open the Registry editor (Start..Run..regedit..ENTER)

2. Under the ‘HKEY_LOCAL_MACHINE\Software\Microsoft\InternetExplorer\Styles’ key, Edit..New..String Value

3. The new value should be called ‘StyleSheet Pathname’

4. For the value, type in the full directory path of your .css style sheet.

Internet Explorer 4.0 (Win95/NT)

1. Under the View menu, select ‘Internet Options’.

2. Under the ‘General’ tab, choose the ‘Accessibility’ button.

3. Choose the ‘Format documents using my style sheet’ check box and ‘Browse…’ to the location of your .css style sheet.

Q24 How do I get rid of the gap under my image?

A24 Images are inline elements, which means they are treated in the same way as text. Most people kind of know this – they know that if you use ‘text-align:center’ on an image it will be centred. What many people don’t realise is that this means you will have a gap underneath an image. This gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap you need to make the image block-level – like this :

CSS img {display:block;}

One problem that this can cause is when you want to have a few images next to each other – if they are block-level, they won’t be next to each other. To get around that, you can use float:left. Of course, this might present another problem – maybe you don’t want the image to float left. In this case, you can use an unordered list like this :

CSS

ul, li {

list-style-type:none;

padding:0;

margin:0 auto;

}

ul {

width:150px;

}

li {

float:left;

}

HTML

<ul>

<li>

</li>

</ul>

Q25 What is CLASS selector?

A25 Class selector is a “stand alone” class to which a specific style is declared. Using the CLASS attribute the

declared style can then be associated with any HTML element. The class selectors are created by a period followed by the class’s name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters).It is a good practice to name classes according to their function than their appearance.

.footnote {font: 70%} /* class as selector */

<ADDRESS CLASS=footnote/>This element is associated with the CLASS footnote</ADDRESS>

Q26 What is CSS declaration?

A26 CSS declaration is style attached to a specific selector. It consists of two parts; property which is equivalent of HTML attribute,

e.g. text-indent:

and value which is equivalent of HTML value,

e.g. 10pt.

NOTE: properties are always ended with a colon.

Q27 What is ‘important’ declaration?

A27 Important declaration is a declaration with increased weight. Declaration with increased weight will override declarations with normal weight. If both reader’s and author’s style sheet contain statements with important declarations the author’s declaration will override the reader’s.

BODY {background: white ! important; color: black}

In the example above the background property has increased weight while the color property has normal.

Q28 What is cascade?

A28 Cascade is a method of defining the weight (importance) of individual styling rules thus allowing

conflicting rules to be sorted out should such rules apply to the same selector.

Declarations with increased weight take precedence over declaration with normal weight:

P {color: white ! important} /* increased weight */

P (color: black} /* normal weight */

Q29 Are Style Sheets case sensitive?

A29 No. Style sheets are case insensitive. Whatever is case insensitive in HTML is also case insensitive in CSS.

However, 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.

Q30 How do I have a non-tiling (non-repeating) background image?

A30 With CSS, you can use the background-repeat property. The background repeat can be included in the shorthand background property, as in this example:

body {

background: white url(example.gif) no-repeat ;

color: black ;

}

Q31 Styles not showing?

A31 There are different ways to apply CSS to a HTML document with a stylesheet, and these different ways can be combined:

inline (internal) (Deprecated for XHTML)

embedded (internal)

linked (external) and

@import (external)

Note: An external stylesheet is a text file that contains only CSS Styles. HTML comments are not supposed to be in there and can lead to misinterpretation (> is the CSS “Child” selector!).

Q32 How do I quote font names in quoted values of the style attribute?

A32 The attribute values can contain both single quotes and double quotes as long as they come in matching

pairs. If two pair of quotes are required include single quotes in double ones or vice versa:

It’s been reported the latter method doesn’t work very well in some browsers, therefore the first one should be used.

Q33 What is property?

A33 Property is a stylistic parameter (attribute) that can be influenced through CSS

Eg: FONT or WIDTH.

There must always be a corresponding value or values set to each property,

Eg: font: bold or font: bold san-serif.

Q34 Can I include comments in my Style Sheet?

A34 Yes. Comments can be written anywhere where whitespace is allowed and are treated as white space

themselves. Anything written between /* and */ is treated as a comment (white space).

NOTE: Comments cannot be nested.

Q35 What is the difference between ID and CLASS?

A35 ID identifies and sets style to one and only one occurrence of an element while class can be attached to any number of elements. By singling out one occurrence of an element the unique value can be declared to said element.

#eva1 {background: red; color: white}

.eva2 {background: red; color: white}

HTML – ID

<P ID=eva1>Paragraph 1 - ONLY THIS occurrence of the element P (or single occurrence of some other element) can be identified as eva1</P>

<P ID=eva1>Paragraph 2 - This occurrence of the element P CANNOT be identified as eva1</P>

HTML – CLASS

<P class=eva2>Paragraph 1 - This occurrence of the element P can be classified as eva2</P>

<P class=eva2>Paragraph 2 - And so can this, as well as occurrences of any other element, </P>

Q36 How do you make a tool tip that appears on hover?

A36 The most simple way is to use the ‘title’ attribute like this…

HTML

CSS

a.tooltip {

position:relative;

cursor:help;

}

a.tooltip span {

display: none;

position:absolute;

top:1.5em;

left:0;

width:15em;

padding:0 2px;

}

a.tooltip:hover {

display:inline;

}

a.tooltip:hover span {

display:block;

border:1px solid gray;

background-color:white;

}

HTML

Without this part… a.tooltip:hover {

display:inline;

}

..it won’t work in IE.

The “#n” in the link is to prevent the page from jumping to the top if the link is clicked. The “href” part is necessary as it won’t work in IE without it.

Q37 What is cascading order?

A37 Cascading order is a sorting system consisting of rules by which declarations are sorted out so that there are not conflicts as to which declaration is to influence the presentation. The sorting begins with rule no 1. If a match is found the search is over. If there is no match under rule no 1 the search continues under rule no 2 and so on.

1. Find all declarations that apply to a specific selector/property and Declare the specified style if the selector matches the element if there isn’t any Let the element inherit its parent property if there isn’t any Use initial value.

2. Sort by weight (! important) Increased weight take precedence over normal weight.

3. Sort by origin Rules with normal weight declared in author’s style sheet will override rules with normal weight declared in user’s personal style sheets Rules with increased weight declared in user’s personal style sheet will override rules with normal weight declared in author’s style sheet Rules with increased weight declared in author’s style sheet will override rules with increased weight declared in user’s personal style sheets Author’s and user’s rules will override UA’s default style sheet.

4. Sort by selector’s specificity More specific selector will override less specific one: ID-selector (most specific), followed by Classified contextual selectors (TABLE P EM.fot) Class selectors (EM.fot) Contextual selectors – the “lower down” the more weight, (TABLE P EM), (TABLE P EM STRONG) – STRONG has more weight than EM.

5. Sort by order specified If two rules have the same weight, the latter specified overrides ones specified earlier. Style sheets are sorted out as follows: The STYLE attribute (inline style) overrides all other styles The Style element (embedded style) overrides linked and imported sheets The LINK element (external style) overrides imported style The @import statement – imported style sheets also cascade with each other in the same order as they are imported.

Q38 How do you make a whole div into a link?

A38 You can’t put ‘a’ tags around a div, but you can do this with javascript :

HTML

... stuff goes here ...

</div>

If you want to use an empty div with a background image as a link instead of putting your image into the html, you can do something like this:

CSS

#empty {

background-image:url(wine.jpg);

width:50px;

height:50px;

margin:auto;

}

#empty a {

display:block;

height:50px;

}

* html #empty a {

display:inline-block;

}

HTML

Q39 What is shorthand property?

A39 Shorthand property is a property made up of individual properties that have a common “addressee”. For

example properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font.

To reduce the size of style sheets and also save some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:

H1 {font-weight: bold;

font-style: italic;

font-variant: small-caps;

font-size: 160%;

font-family: serif}

Q40 can be all shorthanded to a space separated list:

A40 H1 {font: bold italic small-caps 160% serif}

Note: To make things even simpler the line-height property can be specified together with the font-size property:

H1 {font: bold italic small-caps 160%/170% serif}

Q41 How To Style Forms?

A41 Forms and form elements like SELECT, INPUT etc. can be styled with CSS – partially.

Check boxes and Radio buttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

Q42 Can I attach more than one declaration to a selector?

A42 Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list,

Eg.;

Selector {declaration1; declaration2}

P {background: white; color: black}

Q43 How do you target a certain browser?

A43 IE can be targeted by preceding your properties with ‘* html’.

For example…

#nav {

position:fixed;

}

* html #nav { /* this will target IE */

position:absolute;

}

Another way to target IE is with conditional comments. Put this (below) in the head – just before the closing tag – and put anything you want to be directed only at IE in another stylesheet.

<!--[if IE]>

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

<![endif]-->

If you need to target IE5x…

#wrap {

width:760px; /* for IE5x */

w\idth:780px; /* for all other major browsers */

}

Q43 What is the percentage value in ‘font-size’ relative to?

A43 It is relative to the parent element’s font-size.

For example:

if the style sheet says:

H1 {font-size: 20pt;}

SUP {font-size: 80%;}

then a <SUP> inside an <H1> will have a font-size of 80% times 20pt, or 16pt.

Q44 Which style specification method should be used? Why?

A44 The answer to this one is tricky. The short answer is: “it depends.” The long answer is, however, another

story.

If you are planning on using more than one style specification method in your document, you must also worry about Cascading Order of Style methods. If you are going to use only one method, then some guidelines about the nature of each method need to be kept in mind. The answer to this question is also very much related to the advantages and disadvantages to using each of them.

Method 1: External Style Sheets (The LINK [-->Index DOT Html] element)

This method should be used if you want to apply the same style to multiple documents. Each document can reference the stand-alone style sheet and use the styles contained within. Using this method, the appearance of many documents can be controlled using a single or small number of style sheets. This can save a LOT of time for an author.

Method 2: Embedded Style Sheets (The Style [-->Index DOT Html] element)

The syntax used with Method 2 is the same as that for Method 1. This method is a happy medium between External Style Sheets and Inline Styles. It should be used in place of Method 1 if you only want to specify styles for a single document. This method should also be used when you want to specify a style for multiple tag types at once or the list of style definitions is of larger size. Method 3: Inline Styles (STYLE attribute to HTML elements)

If you only have to apply style to one or a few elements in a single document, your best bet will often be an Inline

Style. This method attaches a style definition within the HTML element it is modifying.

Q45 Do URL’s have quotes or not?

A45 Double or single quotes in URLs are optional. The tree following examples are equally valid:

BODY {background: url(pics/wave.png) blue}

BODY {background: url("pics/wave.png") blue}

BODY {background: url('pics/wave.png') blue}

Q46 How do you show which page you’re on (in a menu)?

A46 If PHP is not available to you, you could use the cascade. Put an id in your body tags and an id in each of your a tags for the links.

Let’s say on page one you have this:

HTML

</body>

In your CSS, you can have something like this:

#page1 a#page1link {

color:purple;

}

Q47 Document Style Semantics and Specification Language (DSSSL)?

A47 Document Style Semantics and Specification Language is an international standard, an expression

language, a styling language for associating processing (formatting and transformation) with SGML documents,

Eg:- XML.

Q48 What is Extensible Stylesheet Language (XSL)?

XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText

Q49 What is a z-index?

A49 Z-index is a CSS property that sets the stack order of specific elements. An element with greater stack

order is always in front of an element with a lower stack order.

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;
}

Q50 Explain how you solved some css problem?

A50 You should be able to explain a CSS bug that you worked on and how you went about solving it. You could talk about IE issues, take a look at these CSS problems that often need solutions for Internet Explorer.

Q51 Explain the benefits of CSS sprites?

A51 Most importantly there is a performance benefit as CSS sprites reduce page load time by minimizing HTTP

requests for different images. Usually there is also an accessibility benefit as the code degrades gracefully and shows text to screen readers, search engines, and browsers without CSS. I also think that CSS sprites are easier to manage as you are working with one image instead of many small images. Finally, you should also know how to implement CSS sprites.

What is CSS?

CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurance of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size.

What are Style Sheets?

Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).

What is external Style Sheet? How to link?

External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file.

The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css.

<HEAD>

</HEAD>

What is embedded style? How to link?

Embedded style is the style attached to one specific document. The style information is specified as a content of the STYLE element inside the HEAD element and will apply to the entire document.

<HEAD>

<!--

P {text-indent: 10pt}

-->

</STYLE>

</HEAD>

Note: The styling rules are written as a HTML comment, that is, between  to hide the content in browsers without CSS support which would otherwise be displayed.

What is inline style? How to link?

Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurance.

<P STYLE="text-indent: 10pt">Indented paragraph</P>

What is imported Style Sheet? How to link?

Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows creating one main sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to specific elements (or documents) that may require additional styling. By importing partial sheets to the main sheet a number of sources can be combined into one.

To import a style sheet or style sheets include the @import notation or notations in the STYLE element. The @import notations must come before any other declaration. If more than one sheet is imported they will cascade in order they are imported - the last imported sheet will override the next last; the next last will override the second last, and so on. If the imported style is in conflict with the rules declared in the main sheet then it will be overridden.

<!--

@import url(http://www.and.so.on.partial1.css);

@import url(http://www.and.so.on.partial2.css);

.... other statements

-->

</STYLE>

What is alternate Style Sheet? How to link?

Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as persistent and/or preferred .

Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of an alternate style, e.g.:

Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute to the LINK element. There can only be one preferred style

Alternate style gives an user the choice of selecting an alternative style - a very convenient way of specifying a media dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.:

Alternate stylesheets are not yet supported.

How do I combine multiple sheets into one?

To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:

What is CSS rule 'ruleset'?

There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} - CSS rule (ruleset)

{text-indent: 10pt} - CSS declaration

text-indent - CSS property

10pt - CSS value

What is CSS rule 'at-rule'?

There are two types of CSS rules: ruleset and at-rule. At-rule is a rule that applies to the whole style sheet and not to a specific selector only (like in ruleset). They all begin with the @ symbol followed by a keyword made up of letters a-z, A-Z, digits 0-9, dashes and escaped characters, e.g. @import or @font-face.

What is selector?

CSS selector is equivalent of HTML element(s). It is a string identifying to which element(s) the corresponding declaration(s) will apply and as such the link between the HTML document and the style sheet.

For example in P {text-indent: 10pt} the selector is P and is called type selector as it matches all instances of this element type in the document.

in P, UL {text-indent: 10pt} the selector is P and UL (see grouping); in .class {text-indent: 10pt} the selector is .class (see class selector).

What is contextual selector?

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

What is attribute selector? [CSS2]

Attribute selector is a selector defined by 1) the attribute set to element(s), 2) the attribute and value(s), 3) the attribute and value parts:

1a) A[title] {text-decoration: underline}

All A elements containing the TITLE attribute will be underlined

1b) A[class=name] {text-decoration: underline}

The A elements classed as 'name' will be underlined

2) A[title="attribute element"] {text-decoration: underline}

The A elements containing the TITLE attribute with a value that is an exact match of the specified value, which in this example is 'attribute element', will be underlined

3) A[title~="attribute"] {text-decoration: underline}

The A elements containing the TITLE attribute with a value containing the specified word, which in this example is 'attribute', will be underlined

What is parent-child selector? [CSS2]

Parent-child selector is a selector representing the direct descendent of a parent element. Parent-child selectors are created by listing two or more tilde (~) separated selectors.

BODY ~ P {background: red; color: white}

The P element will be declared the specified style only if it directly descends from the BODY element:

<BODY><P>Red and white paragraph </P></BODY>

BODY ~ P ~ EM {background: red; color: white}

The EM element will be declared the specified style only if it directly descends from the P element which in its turn directly descends from the BODY element:

<BODY><P><EM>Red and white EM</EM></P></BODY>

What is CSS declaration?

CSS declaration is style attached to a specific selector. It consists of two parts; property which is equivalent of HTML attribute, e.g. text-indent: and value which is equivalent of HTML value, e.g. 10pt. NOTE: properties are always ended with a colon.

What is 'important' declaration?

Important declaration is a declaration with increased weight. Declaration with increased weight will override declarations with normal weight. If both reader's and author's style sheet contain statements with important declarations the author's declaration will override the reader's.

BODY {background: white ! important; color: black}

In the example above the background property has increased weight while the color property has normal.

What is property?

Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH. There must always be a corresponing value or values set to each property, e.g. font: bold or font: bold san-serif.

What is shorthand property?

Shorthand property is a property made up of individual properties that have a common "addressee". For example properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font. To reduce the size of style sheets and also save some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:

H1 {font-weight: bold;

font-style: italic;

font-variant: small-caps;

font-size: 160%;

font-family: serif}

can be all shorthanded to a space separated list:

H1 {font: bold italic small-caps 160% serif}

Note: To make things even simpler the line-height property can be specified together with the font-size property:

H1 {font: bold italic small-caps 160%/170% serif}

What is value?

Value is a 'physical' characteristic of the property. Property declares what should be formatted, e.g. FONT while value suggests how the property should be formatted, e.g. 12pt. By setting the value 12pt to the property FONT it is suggested that the formatted text be displayed in a 12 point font. There must always be a corresponding property to each value or set of values.

H1 {font: bold 180%}

In the example above the H1 selector is declared the FONT property which in its turn is declared the values BOLD and 180%.

The values suggesting alternatives are specified in a comma separated list, e.g.

H1 {font-family: font1, font2}

What is initial value?

Initial value is a default value of the property, that is the value given to the root element of the document tree. All properties have an initial value. If no specific value is set and/or if a property is not inherited the initial value is used. For example the background property is not inherited, however, the background of the parent element shines through because the initial value of background property is transparent.

<P style="background: red">Hello <strong>World</strong></P>

Content of the element P will also have red background

Can I attach more than one declaration to a selector?

Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list, e.g.;

Selector {declaration1; declaration2}

P {background: white; color: black}

What is grouping ?

Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).

1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:

LI {font-style: italic}

P.first {font-style: italic}

.footnote {font-style: italic}

To reduce the size of style sheets and also save some typing time they can all be grouped in one list.

LI, P.first, .footnote {font-style: italic}

2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:

H2 {font-style: italic}

H2 {color: red}

and can also be grouped into one list:

H2 {font-style: italic; color: red}

What are pseudo-elements?

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>

What are pseudo-classes?

Pseudo-classes are fictional element types that do not exist in HTML. In CSS1 there is only one element type which can be classed this way, namely the A element (anchor). By creating three fictional types of the A element individual style can be attached to each class. These three fictional element types are: A as unvisited link, A as active link and A as visited link. Pseudo-classes are created by a colon followed by pseudo-class's name. They can also be combined with normal classes, e.g.:

A:link {background: black; color: white}

A:active {background: black; color: red}

A:visited {background: transparent; color: black}

<A HREF....>This anchor (or rather these anchors) will be displayed as declared above</A>

A.foot:link {background: black; color: white}

A.foft:active {background; black: color: red}

A.foot:visited {background: transparent; color: black}

<A CLASS=foot HREF....>This anchor and all other anchors with CLASS foot will be displayed as declared above</A>

What is cascade?

Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.

Declarations with increased weight take precedence over declaration with normal weight:

P {color: white ! important} /* increased weight */

P (color: black} /* normal weight */

Contextual selectors - the "lower down" the more weight, (TABLE P EM), (TABLE P EM STRONG) - STRONG has more weight than EM.

Sort by order specified

If two rules have the same weight, the latter specified overrides ones specified earlier. Style sheets are sorted out as follows:

The STYLE attribute (inline style) overrides all other styles

The Style element (embedded style) overrides linked and imported sheets

The LINK element (external style) overrides imported style

The @import statement - imported style sheets also cascade with each other in the same order as they are imported

What are inline, block, parent, children, replaced and floating elements?

Inline

elements which do not have line breaks. Can occur in block elements or other inline elements, cannot contain block elements.

Inline elements in HTML 3.2; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA.

Inline elements in HTML 4.0; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, BIG, SMALL, SUB, SUP, A, IMG, OBJECT, BR, SCRIPT, MAP, Q, SPAN, BDO, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL).

Inline elements in HTML 4.0 Transitional; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, U, S, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, OBJECT, FONT, BASEFONT, BR, SCRIPT, MAP, Q, SPAN, BDO, IFRAME, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL).

Block

elements which do have line breaks. May occur in other block elements, cannot occur in inline elements, may contain both block and inline elements.

Block elements in HTML 3.2; H1, H2, H3, H4, H5, H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI, DIV, CENTER, BLOCKQUOTE, PRE, HR, ISINDEX, TABLE, FORM.

Block elements in HTML 4.0; P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, NOSCRIPT, BLOCKQUOTE, FORM, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).

Block elements in HTML 4.0 Transitional; P, H1, H2, H3, H4, H5, H6, UL, OL, DIR, MENU, PRE, DL, DIV, CENTER, NOSCRIPT, NOFRAMES, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).

Parents and children

elements which either contain (parents) or are in the content of (children) other elements, e.g. <P>text<STRONG>text</STRONG>text</P>. P is a parent of STRONG. STRONG is a child of P. If not specified otherwise, children will inherit parent's properties. NOTE: not all properties are inherited. For more information, see INHERITANCE.

Replaced

elements which content is replaced. For example content of the IMG element is replaced with an image, content of the INPUT element is replace with a field.

Floating

elements which follow the flow of a parent - inline elements.

How does inheritance work?

HTML documents are structured hierarchically. There is an ancestor, the top level element, the HTML element, from which all other elements (children) are descended. As in any other family also children of the HTML family can inherit their parents, e.g. color or size.

By letting the children inherit their parents a default style can be created for top level elements and their children. (Note: not all properties can be inherited). The inheritance starts at the oldest ancestor and is passed on to its children and then their children and the children's children and so on.

Inherited style can be overridden by declaring specific style to child element. For example if the EM element is not to inherit its parent P then own style must be declared to it. For example:

BODY {font-size: 10pt}

All text will be displayed in a 10 point font

BODY {font-size: 10pt}

H1 {font-size: 14pt} or H1 {font-size: 180%}

All text except for the level 1 headings will be displayed in a 10 point font. H1 will be displayed in a 14 point font (or in a font that is 80% larger than the one set to BODY). If the element H1 contains other elements, e.g. EM then the EM element will also be displayed in a 14 point font (or 180%) it will inherit the property of the parent H1. If the EM element is to be displayed in some other font then own font properties must be declared to it, e.g:

BODY {font-size: 10pt}

H1 {font-size: 14pt} or H1 {font-size: 180%}

EM {font-size: 15pt} or EM {font-size: 110%}

The EM element will be displayed in a 15 point font or will be 10% larger than H1. NOTE: EM is, in this example, inside H1 therefore will inherit H1's properties and not BODY's.

The above declaration will display all EM elements in 15 point font or font that is 10% larger than font declared to the parent element. If this specific font is to apply to EM elements but only if they are inside H1 and not every occurrence of EM then EM must take a form of a contextual selector.

H1 EM {font-size: 15pt} or H1 EM {font-size: 110%}

In the example above EM is a contextual selector. It will be displayed in specified font only if it will be found in the context of H1.

Not all properties are inherited. One such property is background. However, since it's initial value is transparent the background of the parent element will shine through by default unless it is explicitly set.

Are Style Sheets case sensitive?

No. Style sheets are case insensitive. Whatever is case insensitive in HTML is also case insensitive in CSS. However, 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.

Which characters can CSS-names contain?

The CSS-names; names of selectors, classes and IDs can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code. The names cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters).

Can Style Sheets and HTML stylistic elements be used in the same document?

Yes. Style Sheets will be ignored in browsers without CSS-support and HTML stylistic elements used.

Which set of definitions, HTML attributes or CSS properties, take precedence?

CSS properties 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.

Can CSS be used with other than HTML documents?

Yes. CSS can be used with any ny structured document format. e.g. XML, however, the method of linking CSS with other document types has not been decided yet (Feb 98).

interview questions by companies

What are css3 modules?

wrap in css3?

white space in css3?

track ?

difference between delegate() and live()?

Media elements other then audio and video?

canvas?

how to display/draw charts in html5?

.holdready()?

difference between onload() vs readyState(). ??

embeded?

deprecated elements in html5?

jquery data()?

what do you mean by chaining in jquery?

list of API's in html5?

1. 10 div's to be selected 5th div, how?

2. select links of pdf file using jquery?

3. how to print only content area of webpage?

4. html5 new features?

5. css3 new features?

6. what is RWD?

7. how to change font color using jquery & css3?

8. jquery wrap();

9.differnce between jquery & jquery mobile?

10. how to call/ create dynamic elements?

11.javascript (oops concepts)

12. how to make my span elements side by side?

1. Browser compatibility?

2. jquery concepts?

3. how to write media query for iphone 4s?

4. <! doctype>??

5. jquery mobile page creation?

6. knowledge on photoshop?

7. .dpi?

1. can we have multiple <body> elements in a single html doc?

2. how will you redude http request?

3.Have you used local storage of html5?

4. I want to load other HTML file using ajax what should i do?

5. how do you write media queries and how you will assign them to your html document?

6. new elements in html5?

7. new css3 elements?

8. append vs appendto()?

9. canvas?

10. differnce between post and get?

11. debugging tools u used till now?

12. live()vs delegate() vs bind()

13. how to select even elements in my document?

14. new input type elements?

1. what does $ mean in jQuery?

2. why $ is used?

3. onload();

4. what differnce between onload() and .ready()?

5 .addClass();?

6. types of local storages in html5?

7. what is the differnce between local storage and web storage?

8. closures in javascript?

9. what is json?

10. XML vs Json?

11. jquery vs JQuery Mobile?

12. what is DOM?

13. what is Name Space?

14. few DOM Objects?

15. Position?

16. relative vs absolute?

17. z-index?

18. css hacks and iE issues?

19. After login i should get Thank you pop up, what should i do?

20. prototype?

21. RWD?

22. Does iE supports media queries?

23. How will you made IE to support media queries?

24. How will you write media queries?

25. Does IE 8 support canvas?

26. How will you make IE 8 work with canvas element?

27. What is different between position absolute and relative?

Ans: Absolute : The element is positioned relative to its first positioned (not static) ancestor element.

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.

Relative :The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position. What it really means is "relative to itself".

Fixed : The element is positioned relative to the browser window.

28. What is different between HTML4 and HTML5?

29. What is different between css2 and css3?

30. What is min.js?

Ans: Jquery.min.js is nothing else but compressed version of jquery.js. You can use it the same way as jquery.js, but it's smaller, so in production you should use minified version and when you're debugging you can use normal jquery.js version.

31. What is parameter2 and parameter 3 ?

1. what is new in HTML5 in comparrision with HTML4?

2.What are the new tags and what they do?

3. what are the new API's and what they do?

4. what are selectors?

5. what is css reset?

6. how do you write cross browser css?

7. what and / and how to use gradients, border, inmages, round borders, shadows in css3?

8. what are / and how to use transformations and animations in css3?

9.Does java script support objects?

10. does javascript support associative arrays?

11.tell me about the scope of variable?

12.What javascript frame works have you used? till now?

13. what javascript mobile frame works have you used?

14. why would yo want to use jquery?

1. Prototype in Js?

2. live() and bind()?

3. $ vs $fn?

4. in $(document).ready() -- why we use document keyword?

5. $closest()?

6 media Queries?

7. form - autocomplete?

8. GET, POST?

9. pesudo classes?

10. how to create objects in javascript?

11. told to write ajax code.?

12. told to write local storage, session storage code?

13. told to wriete canvas program ?

14. what happens if we didn't decalre doctype in our html document?

15. why we use doctype?

16. told to write gradient program?

17. different types of doctypes?

16. how to create dynamic elements?

17. autofocus? place holder?

18. javascript string methods?

19.javascript Array methosds?

20. how to call parent element using childnodes?

21. form input attributes, elements?

22. sibling()?

23. closest()

24. empty() vs remove();

25. Where to you declare javascript files in html file? and why?

26. Does css elements works without writing doctype?

27. pattern?

26. jquery.connect()?

27. CDN?

1. what happens if we didn't write doctype in html document?

2. difference between float left and dispaly: inline?

3. differnce between <ul> and <ol>

4.differnce between size(). vs length()?

5. absolute vs relative?

6. how to check webstorage compatibility with browser?

7.animate method in jquery?

8. tell some array methods in javascript?

9.Datatypes supported in javascript?

10. call back function in javascript?

11. What are the properties of xmlhttpRequest objece?

12. what are different types of ready states in Ajax?

13. html5 webstorage methods?

14.what is the advantage of html5 semantic tags?

15. how many types you can declare color in css?

16. what is sprite? why you use it?

17. Describe event bubling?

18. what are closures in javascript?

19. box model in css?

20. jquery template?

21. reflow in jQM?

22. does .ready() works on JQM?

23. type of transistions in JQM?

24. navbar in JQm?

25. pageinit?

26. how to enable / disable form using jquery?

27. tables in JQM?

28. grid system in JQM?

29. how to create table with two columns and one row in JQM?

30. Give five reasons why you use jQuery?

1.eval()?

2.param()?

3. canvas vs svg?

4. canvas code to make circle object?

5. transform and transitions?

6. API's in HTML5?

7. Geolocation API code?

8. argument in javascript?

9. selectors in jQuery?

10. after and before pseudo classes?

11. .noConflict();

12. preventDefault();

13. literal notation in javascript?

14. live() & delegate();

15. stopPropagation();

16. HTML5 semantic elements?

17. CSS3 box model?

18. media Queries.

19. Ajax , json();

20. How to create class in javascript?

21. using constructor can we create an object?

22. how to fetch particular table td element with native javascript?

23. i have div with position relative at x, y 150px, an in same div i have inner div with position absolute, now my Question is what would be the postion of inner div (which is absolute)?

24. does padding-left: -20px takes to content of div?

25. mordenizar for css support??

Web Templates Info

Pages

Que - Ans

No comments:

Post a Comment