55 css interview questions and answers

CSS interview questions and answers for freshers and experienced candidates. Also find CSS online practice tests to fight written tests and certification exams on CSS. In this section we have covered almost all CSS questions that might be asked during an interview.
Ask a question
          

CSS interview questions and answers

Part 1    Part 2    Part 3    Part 4    Part 5    Part 6   Part 7   Part 8   Part 9   Part 10 

CSS interview questions - posted on June 27, 2013 at 15:45 PM by Kshipra Singh

1. What are different ways to integrate a CSS into a Web page?

There are three ways to integrate CSS into a Web page

a.) Inline: HTML elements may have CSS applied to them via the STYLE attribute.
b.) Embedded: By placing the code in a STYLE element within the HEAD element.
c.) Linked/ Imported: Place the CSS in an external file and link it via a link element.

2.) If background and colour should always be set together, why do they exist as separate properties?

The reasons for this are as follows:
- It increases the legibility of the style sheets. The background property is a complex property in CSS. If it is combined with color, the complexity will further increase.
- Color is inherited, but background isn’t. This can further increase the confusion.

3.) Explain external Style Sheet? How would you link to it?

- External Style Sheet can be called as a template/document/file which contains style information and can be linked with more than one HTML documents.
- Using this the entire site can be formatted and styles just by editing one file.
- The file is linked with HTML documents via the LINK element inside the HEAD element.
<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>

4.) What are the advantages and disadvantages of External Style Sheets?

The advantages of External Style Sheets are:

- Using them, the styles of multiple documents can be controlled from one file.
- Classes can be created for use on multiple HTML element types in many documents.
- In complex situations, selector and grouping methods can be used to apply styles.

The disadvantages of External Style Sheets are:

- In order to import style information for each document, an extra download is needed.
- Until the external style sheet is loaded, it may not be possible to render the document.
- For small number of style definitions, it is not viable.

5. What are the advantages and disadvantages of Embedded Style Sheets?

The advantages of Embedded Style Sheets are:

- It is possible to create classes for use on multiple tag types in the document
- Under complex situations, selector and grouping methods can be used to apply styles.
- No extra download is required to import the information.

The disadvantages of Embedded Style Sheets are:

- It is not possible to control the styles for multiple documents from one file, using this method.

6. What are the advantages and disadvantages of Inline Styles?

The advantages of Inline Styles are:

- It is especially useful for small number of style definitions.
- It has the ability to override other style specification methods at the local level.

The disadvantages of Inline Styles are:

- It does not separate out the style information from content.
- The styles for many documents can not be controlled from one source.
- Selector grouping methods can not be used to handle complex situations.
- Control classes can not be created to control multiple element types within the document.

7. How can you eliminate the blue border around linked images on web page?

This can be done by specifying the border property for linked images in your CSS as none:
For e.g.
a img { border: none ; }

However, this makes it difficult for the users to differentiate between the clickable and non-clickable images.

8. What is CSS selector?

- Basically it is a string that identifies the elements to which a particular declaration or set of declarations will apply.
- It can also be referred to as a link between the HTML document and the style sheet.
- It is equivalent of HTML elements.

For example :
A {text-indent: 12pt}

Here, the selector is A, which is called as type selector.

9. What is Tweening?

- It is the short form for in-betweening.
- It is the process of generating intermediate frames between two images.
- It gives the impression that the first image has smoothly evolved into the second one.
- It is an important method used in all types of animations.
- In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.

10. Explain RWD.

- RWD is the abbreviation for Responsive web design.
- In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.

11. What is the use of CSS sprites?

- A web page with large number of images takes a longer time to load. This is because each image separately sends out a http request.
- The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.

1. Explain in brief about the term CSS.

A stylesheet language used to describe the presentation of a document written in a markup language.................
Read answer

2. What are the various style sheets?

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

3. What are style sheet properties?

CSS Background
CSS Text
CSS Font
CSS Border
CSS Outline..............
Read answer

4. List various font attributes used in style sheet.

font-style
font-variant
font-weight
font-size/line-height..................
Read answer

5. Explain inline, embedded and external style sheets.

Inline  - If only a small piece of code has to be styled then inline style sheets can be used..............
Read answer

Test your CSS skills - CSS (21 questions)

More CSS interview questions

What is CSS? Explain its features.
Why do you use CSS?
What is a style sheet?
Why do you need a style sheet over regular HTML?
List different types of Style Sheets and how do you link to them?
Explain Class.
Explain Grouping.
What are the functions of following selectors? a.) h1 b.) .warning c.) #footer
Explain Embedded Style Sheet. How would you link to it?
Explain External Style Sheet. How would you link to it?
What is selector? Explain: a.) ID Selector b.) Contractual Selector c.) Attribute Selector d.) Parent Child Selector
What are the advantages and disadvantages of following style methods? a.) External Style Sheets b.) Embedded Style Sheets c.) Inline Styles
Situation - You want to set up a minimum width for IE. How would you do that?
Situation - You want to place a text over an image. How would you do that?
Situation - You want to combine multiple sheets into one. How would you do that?
Situation - You want to specify background images. How would you do that?
Explain following elements: a.) Inline b.) Block c.) Parent d.) Children
How do you separate content and design in CSS?
Explain pseudo classes.
Explain: a.) CSS declaration b.) Important declaration
Situation - You just set the background image and you want it to be non-repeating. What would you do?
Differentiate between ID and Class.
You want to have a you text-links without an underline. How would you do that?
Explain cascading order.
You want links of different colours on the same page. How would you do that?
Explain: a.) Value b.) Initial value
How would you style the following? a.) Table cells b.) Forms
Are there any WYSIWYG editors available for creation of style sheets?
You want to justify your text. How would you do that?
I want to place two paragraphs adjacent to each other. How should I do it? 

<<Previous  Next>>



Write your comment - Share Knowledge and Experience

Discussion Board
CSS interview questions and answers.

What is .rolloverfordnd?
.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.

Why my div are of different size in IE?
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.

What are the media types CSS allows?
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.


Rohit Sharma 12-11-2011 11:08 AM

CSS interview questions and answers.

Can someone else's Style Sheet be used without their permission?
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.

Which style specification method should be used?
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.

How do you override the underlining of hyperlinks?
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:
<a HREF="example.htm" STYLE="text-decoration: none">link text</a>

What are logical and physical tags?
- 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 example em tag is used for emphasis not for any other thing.


Rohit Sharma 12-11-2011 11:08 AM

CSS interview questions and answers.

What is external Style Sheet? How to link it with HTML document?
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>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>

What is imported Style Sheet? How to link it with HTML document?
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:
<STYLE TYPE="text=css">
<!--
@import url(http://www.and.so.on.partial1.css);
@import url(http://www.and.so.on.partial2.css);
.... Other statements
-->
</STYLE>

How the concept of Style sheet is different from HTML?
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.


Rohit Sharma 12-11-2011 11:07 AM

 



 
 
Home | Login | About us | Sitemap | Contact us