html interview questions

Define closure. In JavaScript, we need closures when a variable which is defined outside the scope in reference is accessed from some inner scope. var  num  =  10 ;   function sum()    {   document.writeln(num+num);   }    sum();  

The  position  property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). The position Property The  position  property specifies the type of positioning method used for an element. There are five different position values: static relative fixed absolute sticky Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the  position  property is set first. They also work differently depending on the position value. position: static; HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with  position: static;  is not positioned in any special way; it is always positioned according to the normal flow of the page: This <div> element has position: static; Here is the CSS that is used: div.static  {   position :  static ;   

A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Syntax The syntax of pseudo-classes: selector:pseudo-class  {   property : value ; } Anchor Pseudo-classes Links can be displayed in different ways: /* unvisited link */ a:link  {   color :  #FF0000 ; } /* visited link */ a:visited  {   color :  #00FF00 ; } /* mouse over link */ a:hover  {   color :  #FF00FF ; } /* selected link */ a:active  {   color :  #0000FF ; } CSS - The :first-child Pseudo-class The  :first-child  pseudo-class matches a specified element that is the first child of another element. Match the first <p> element In the following example, the selector matches any <p> element that is the first child of any element: p:first-child  {   color :  blue ; } Match the first <i> element

CSS  Animations CSS animations allows animation of most HTML elements without using JavaScript or Flash! CSS Browser Support for Animations The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. Property @keyframes 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o- animation 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o- What are CSS Animations? An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. The @keyframes Rule When you specify CSS styles inside the  @keyframes  rule, the animation will gradually change from the

Example Make an element move gradually 200px down: @keyframes mymove  {     from  { top :  0px ; }     to  { top :  200px ; } } Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The  @keyframes  rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times. Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete. Tip:  For best browser support, you should always define both the 0% and the 100% selectors. Note:  Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors. Note:  The !important rule is ignored in a keyframe (See last example on this page). Browser Support

Image Sprites An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Image Sprites - Simple Example Instead of using three separate images, we use this single image ("img_navsprites.gif"): With CSS, we can show just the part of the image we need. In the following example the CSS specifies which part of the "img_navsprites.gif" image to show: Example #home  {   width :  46px ;   height :  44px ;   background :  url(img_navsprites.gif) 0 0 ; } Try it Yourself » Example explained: <img id="home" src="img_trans.gif">  - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS width: 46px; height: 44px;  - Defines the portion of the image