FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

Top CSS3 Interview Questions and Answers



CSS3 Interview Questions & Answers

1. What is CSS ?

The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

2. What is the origin of CSS ?

Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

3. What are the different variations of CSS ?
The variations for CSS are:

·          CSS 1

·          CSS 2

·          CSS 2.1

·          CSS 3

·          CSS 4

4. What are the limitations of CSS ?

Limitations are:

·           Ascending by selectors is not possible

·          Limitations of vertical control

·          No expressions

·          No column declaration

·          Pseudo-class not controlled by dynamic behavior

·          Rules, styles, targeting specific text not possible

5. What are the advantages of CSS ?

Advantages are:

·          Bandwidth

·          Site-wide consistency

·          Page reformatting

·          Accessibility

·          Content separated from presentation

 

6. What are CSS frameworks?

It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language.

7. How block elements can be centered with CSS1?

Block level elements can be centered by:

The margin-left and margin-right properties can be set to some explicit value:

The margin-left and margin-right properties can be set to some explicit value:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

In this case, the left and right margins will be each, five ems wide since they split up the ten ems left over from (40em-30em). It was unnecessary for setting up an explicit width for the BODY element; it was done here for simplicity.

8. Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

9. In how many ways can a CSS be integrated as a web page?

CSS can be integrated in three ways:

·          Inline: Style attribute can be used to have CSS applied HTML elements.

·          Embedded: The Head element can have a Style element within which the code can be placed.

·          Linked/ Imported: CSS can be placed in an external file and linked via link element.

10. What benefits and demerits do External Style Sheets have? 
Benefits:

·          One file can be used to control multiple documents having different styles.

·          Multiple HTML elements can have many documents, which can have classes.

·          To group styles in composite situations, methods as selector and grouping are used.

Demerits:

·          Extra download is needed to import documents having style information.

·          To render the document, the external style sheet should be loaded.

·          Not practical for small style definitions.

11. Discuss the merits and demerits of Embedded Style Sheets?
Merits of Embedded Style Sheets:

·          Multiple tag types can be created in a single document.

·          Styles, in complex situations, can be applied by using Selector and Grouping methods.

·          Extra download is unnecessary.

Demerits of Embedded Style Sheets:

·          Multiple documents cannot be controlled.

12. What does CSS selector mean?

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

13. Enlist the media types CSS allows? 

The design and customization of documents are rendered by media. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network.

14. Differentiate logical tags from physical tags?

·          While physical tags are also referred to as presentational mark-up, logical tags are useless for appearances.

·          Physical tags are newer versions while logical tags are old and concentrate on content.

15. Differentiate Style Sheet concept from HTML?

While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style sheets have better browser capabilities and formatting options.

16. Describe ‘ruleset’?

Ruleset : Selectors can be attached to other selectors to be identified by ruleset.

It has two parts:

·          Selector, e.g. R and

·          declaration {text-indent: 11pt}

17. Comment on the Case-sensitivity of CSS ?

Although, there are no case-sensitivity of CSS, nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.

18. Define Declaration block?

A catalog of directions within braces consisting of property, colon and value is called declaration block.
e.g.: [property 1: value 3]

19. Enlist the various fonts’ attributes?

They are:

·          Font-style

·          Font-variant

·          Font-weight

·          Font-size/line-height

·          Font-family

·          Caption

·          Icon

 

20. Why is it easy to insert a file by importing it?

Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions. Syntax:

@import notation, used with

Why imported is an easy way to insert the file?

Imported style sheet allows you to import the files which are external or combine one style sheet with another. There can be created many files, different style sheets to have different functions. Import function gives the provision to combine many elements or functionality into one. The syntax to import any file is @import notation, which is used inside the


The is used as a comment for those browsers that doesn’t support css.

Explain what are image sprites and how are they used in css.

Image sprites are basically a collection of images put into a single image. A web page can contain multiple images and loading them all one by one can be a slow process. By using image sprites only a single image is used and by specifying the area of the image to be displayed the same image can be used multiple times.
For ex : We have a an image.gif which contains the home, forward and back navigation buttons. With the help of css the user can simply specify only the part of the image that is needed. Now the user wants to only display the home part of the image for the home button.

CSS code:

img.home
{
    width:50px;
    height: 44px;
    background: url (image.gif) 0 0 ;
}


In the above css code only a part of the overall image.gif will be used, in this case the home page button area only. By using image sprites the page loading time can be reduced by substantial margins. The user only needs to know absolute image area to be dispalyed.

With the help of examples explain grouping and nesting of css selectors.

Grouping selectors : In css the designer can reduce the code by simply groping together selectors with the same property values.

For Example: 

h1 {color: green;}
h2 {color: green;}
p {color: green;}


As you can see from the above code the all the elements have the same property. To avoid rewriting the same code again and again the user can simply group the selectors by separating each selector with a comma.
Grouped selectors : 

h1,h2,p {color: green;}


Nesting selectors : This enables the user to specify a style for a selector within a selector.
For Example:

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}


In the above example separate properties are assigned for p and the .marked class. But the last value that is .marked p implies that the property will apply to p elements with class defined as .marked.

How can HTML elements be styled having specific attributes?

Css allows the user to style the html elements that have specific attributes. It does not only rely on class and id.

For Example:

[title]
{
color:red;
}


This will simply color any attribute containing title.
Css also allows the user to specify an attribute with a particular value.
For Example:

[title=test]
{
color:red;
}


This will simply color the text test that appears anywhere in the title attribute.
Also the user can specify an attribute with multiple values.
For Example: 

[title~=test] {color:blue;}

What are the different provision provided in css to define the dimension of an element?

In css the user can choose from multiple dimension properties to style an element. The list of css dimension properties are:

1. height : This property allows the user to specify the height of a specific element.
2. max-height : This allows the user to set the maximum height of an element.
3. max-width : This specifies the maximum width of an element.
4. min-height : It allows the user to specify the minimum height of an element.
5. min-width : Used to set the minimum width of an element.
6. width : This property is used to set the width of an element.

For Example:

img.big {height:100px}
img.big {max-height:100px}

Explain the concept of the box model in css.

CSS uses the concept of a box model which implies that every HTML element is a box. This term is used when we are talking about design and layout. The CSS box model is actually a box that wraps an HTML element. 

A box comprises of the following components:

1. margins : Used to clear an area around a border.
2. border : Border goes around the padding and the content.
3. padding : Used to clear the area around the content.
4. content : This contains the actual content of the box that is the text and the images.

It is important to note that when a user sets the height and width of an element, they are doing so only for the content area. To know the fill size of the element the user must also specify the other layers i.e. the padding border and margins.

For Example:

p
{
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
}


The total width of an element is calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin


The total height of an element is calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

How is the float property implemented in css?

The css float property allows an element to be pushed to the left or right which allows other elements to wrap around the floated element. The elements specified before the float element will not be effected. Only the elements specified after the floated elements will float around the element.

For Example: 

img { float:right;}


This implies that if an image is floated towards the right then the text that follows its would flow around it on the left. The user can also float multiple elements together. The elements would float if there is space available for them to float. Any float element will cause the other elements following it to float around it, to avoid this the user can make use of the clear property. The clear property is used to specify the sides of an element on which the floating of elements is not allowed.

For Example: 

.line {clear:both;}


This would prevent the elements from floating around after the float element.

What is the purpose of the z-index? Explain with the help of an example.

While using css to position html elements they may overlap each other. The z index i used to specify which element overlaps which element. The z-index is a number which can either have a positive or a negative value. By default the z-index value is zero. In case elements have the same z-index number specified then the browser will layer them according to the order in which they appear in the HTML.

For Example:

We have a list of 4 elements each with their defined numbers:
element1 - z-index number 25
element2 - z-index number -34
element3 - z-index number 10
element4 - z-index number not defined
In this case the order of their stack would be:
element1
element3
element4
element2

Explain the meaning of graceful degradation in reference to CSS.

Generally graceful degradation is a concept that allows a system to continue to operate properly in the event of a failure of a component. In web design the graceful degradation is a very important area. When a developer creates a website he creates it to take advantage of the latest browser support etc. but care should also be taken to render the website properly on older browsers. In this way the designer is able to get a wider audience by stepping down some of the features to provide basic functionality to people with older browsers. For example while specifying an image in the html css code many time an alt tag is used. This means that in case the image cannot be shown in a browser it will instead show the text specified within the alt tag.

What is the other alternative to graceful degradation?

The other concept is know as progressive enhancement. Progressive enhancement focuses on the content of a web rather than the browsers itself. In this way a website can be viewed on different platforms according to the amount of resources available. For ex a user with the latest browser and a high bandwidth connection might get some extra eye candy as compared to a user visiting the same site on a dial-up and old browser. But the overall functionality provided would be the same. Gmail does so as well where users with slow connections are provided a plain html view whereas high bandwidth users get the complete site to access. This concept recently has come into play as mobile devices with Internet surfing capabilities have started to grow and expand its user base.

How are shorthand properties are used in css? Give examples.

One of the primary advantages of css is that it greatly reduces page load times. Writing multiple properties and their values in a single line of css code is known as css shorthand technique. One thing to be kept in mind is that while using the css shorthand technique is that the order of specifying the values of an attribute must be maintained. In case the user wants to keep a value as default it is not needed to be mentioned.

For Example:

margin-top: 5em;
margin-bottom: 3em;
margin-right: 1em;
margin-left: 1em
Becomes:
margin: 5em 1em 3em (top, right and left, bottom);

border-width:5px;
border-style:solid;
border-color:#fff;
Becomes:
border:5px solid #fff;