Saturday 13 July 2013

CSS Interview Questions ans answers with demos


  • Following are CSS questions and answers which would help you in brushing up your CSS skills . 
  • These questions are important and covers basic concepts.

1. What is CSS ?
Ans : CSS stands for Cascading style sheet. CSS is used to apply good look to HTML document or a Web Page.

2. What are different ways to integrate CSS into a Web Page ?
And : Following are three ways of integrating CSS into a web page.

  • Inline : We can apply inline style by using style attribute. We can use this attribute at element or control level.
Demo :


  • Embedded : We create a style section inside the head section. This section is used for entire web page.
Demo :
  • Linked/External : In this method, we create a stylesheet .css file and link it to the web page using Link element. The syntax for linking the CSS file is shown below :
<link rel="stylesheet" href="style.css" type="text/css" />

3. What are advantages and disadvantages of using external style sheet.
Ans: 
Advantages :
  • Reusability - The style of multiple documents or webpages can be maintained by single CSS file.
  • Maintainability - The CSS file is simple to maintain.
Disadvantages :
  • Download Overload - The CSS file need to download for style. The style will not apply until the file is downloaded.
  • Not Worth - It is not viable for small style definitions. For small style it is better to define them inline.
4. What are advantages and disadvantages of using Embedded style sheet.
Ans: 
Advantages :
  • We can create classes for multiple elements on the page.
  • No extra download of file is required.
Disadvantages :
  • This type of applying style is not reusable. Its scope is withing the document or web page only.
5. What are advantages and disadvantages of using Inline style sheet.
Ans: 
Advantages :
  • It is use for smaller style definition.
  • The style defined at inline level overrides the style defined at embedded or external level.
Disadvantages :
  • This method does not separate style information and content.
  • Styles for multiple document cannot be maintained.
  • Control classes cannot be created to control style of multiple elements on web page.
6. How to remove the border from images or any other element ?
Ans: We can use the border CSS property. We can set it to none as shown below :

img{border:nonw;}

7. What is CSS Selector ?
Ans: The selector is something which selects the element or set of elements from document. The selectors are use to apply CSS style to selected or specific elements.

eg: 

  • id Selector - Id selector selectes the element whose id matches the selector. It id of the element to be selected is preceded with the "#" symbol.
#myDiv
{
color:Red;
}

The above syntax will apply the Red color to the element with id attribute set to myDiv.

  • class Selector - We can define a class using .preceding the name of class. This selector selects all the elements on the page.
.myDiv
{
color:Red;
}

The above syntax will apply the Red color to all the elements on the page with class myDiv.

  • element Selector - We use the element name itself to select a particular set of elements.
p
{
color:Red;
}

The above syntax selects all the paragraph element from the page and applies the red color to it.

8. What is Tweening ?
Ans: 
  • Tweening is short form for in-betweening. 
  • It is the process of generating intermediate frames between two images. It is the important method used in animations. 
  • It gives the impression that first image is evolved into the second image. 
  • The CSS3 properties like transform(matrix,translate,rotate,scale) can be used to achieve tweening.
9.What is difference between background-color and color CSS properties ?
Ans: 

  • The background-color property is used to set the background or back color of any element.
  • The color property is used to set the color of text in any element.
Demo :


10. Explain grouping in CSS ? 
Ans: The term grouping is using or grouping more than one selector together. While applying CSS we can group two selectors together to reuse the defined CSS properties.

eg: 

p,div,span
{
color:Red;
font-style:italics;
}

Demo :
11. What are child selectors in CSS ?
Ans: The child selector is used when you want to select an element which is child of another element. The parent and child element is separated by greater than sign. Ths syntax is shown below :

eg: 

div > p
{
color:Red;
}

The above code applies the red color to the text inside p element only.

Demo :



 12. What are pseudo classes?
Ans: 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.

eg:

a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}

13. How to define comments in CSS ?
Ans: The text defined inside /* and */ is considered as comments. The browser ignores the comments.

2 comments: