CSS & CSS3 Interview Questions and Answers


1.Wht is a CSS File? It is used for what purpose 

CSS stands for "Cascading Style Sheets", and are used to control and manage font styles, font sizes, and web site color combinations that are used in a web page. In order to retain continuity of "look and feel" throughout a website, all pages within a website will often refer to a single CSS file. The CSS file is typically contained in a separate file from the website, and the various web pages retrieve the CSS file each time a web page is displayed. CSS files make global appearance changes easy -- a single change in a CSS file will mean that any pages using that CSS file will automatically display the changes 

2.How do I make a picture as a background on my web pages?

Point the body background to the name of your image you wish to use as the background as shown below. This body line should be the first line after your < / head> tag.
<body background="picture.gif" >
You can also have the background image fixed, so it does not move when using the scroll bar in the browser. To do this add the BGPROPERTIES tag as shown below. 
<body background="picture.gif" bgproperties="fixed" > 

3.How do I add scrolling text to my page? 

Keep in mind not all browsers support scrolling text. however to do this add a tag similar to the below example:
< marquee >THIS WOULD SCROLL< /marquee> 

The above example would create the below scrolling text. If your browser supports scrolling text the below example should be scrolling. More examples can be found on our main HTML page that lists most of the HTML commands. 

4.How do I make it so that someone can mail me by just clicking on text with subject?

Use the mailto command in your A HREF link tag as shown below. 
 <a href="mailto:support@computerhope.com?Subject=Enquiry">Click here to mail Computer Hope</ a> . 
5.How do I align pictures so that one may be higher or lower than the other?

Use the align statement in your IMG SRC tag as shown below. 
 <img src="http://www.computerhope.com/chguy.gif" align=top> 
Also, instead of align=top you can do align=middle, and align=bottom.  

6.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> 
<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> 
</ HEAD>   

7.Is CSS case sensitive? 

Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be. The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers. It is a good idea to avoid naming classes where the only difference is the case, for example: div.myclass { ...} div.myClass { ... } If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case. 

8.What are the five possible values for “position”? 

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

9.What does isNaN function do? 

Return true if the argument is not a number.         

10.What is Opacity in CSS3?

Opacity is used to show or hide the html element For example 0 for hide and 1 for show.

11.What is the other name of combined selector in CSS3 and what is it used for?

The other name of combined selector in CSS3 is known as Grouping

12.How is multiple background images handled in CSS3?

If you want to use the multiple background ,we can insert as follows...
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); also we can mention the position of the image either percentage value or top left, left center like this

13.What is wrapping in CSS3?

Wrapping is a vital property for proper display of contents in web pages. If wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless.
 Definition:
The wrap() method wraps specified HTML element(s) around each selected element.

Syntax

$(selector).wrap(wrappingElement,function(index))
Where wrapping Element Specifies what HTML element(s) to wrap around each selected element.It's compulsory.
Possible values:
  • HTML elements
  • jQuery objects 
  • DOM elements
function(index) is Optional. Specifies a function that returns the wrapping element
  • index - Returns the index position of the element in the set
14.What is the syntax of opacity in CSS3?

Firefox uses the property opacity:x
Ex:style="opacity:0.4;

IE uses filter:alpha (opacity=x)
Ex:filter:alpha(opacity=40)"

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

16.What are the various style sheets? 

Inline, external, imported and embedded are the different types of style sheets.

17.What are style sheet properties?

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


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



1 comment: