CSS interview questions and answers

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

There are three ways to integrate CSS into a Web page

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

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

The reasons for this are as follows:

1. 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.
2. Color is inherited, but background isn’t. This can further increase the confusion.

Explain external Style Sheet? How would you link to it?

1. 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.
2. Using this the entire site can be formatted and styles just by editing one file.
3. 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>

What are the advantages and disadvantages of External Style Sheets?

The advantages of External Style Sheets are:

1. Using them, the styles of multiple documents can be controlled from one file.
2. Classes can be created for use on multiple HTML element types in many documents.
3. 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.

What are the advantages and disadvantages of Embedded Style Sheets?

The advantages of Embedded Style Sheets are:

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

The disadvantages of Embedded Style Sheets are:

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

What are the advantages and disadvantages of Inline Styles?

The advantages of Inline Styles are:

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

The disadvantages of Inline Styles are:

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

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 Example:
a img { border: none ; }

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

What is CSS selector?

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

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

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

What is Tweening?

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

Explain RWD.

1. RWD is the abbreviation for Responsive web design.
2. 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.
1 2 3 4 5 6 7

Explain in brief about the term CSS - CSS
A stylesheet language used to describe the presentation of a document written in a markup language.......
What are the various style sheets? - CSS
Inline, external, imported and embedded are the different types of style sheets.......
What are style sheet properties? - CSS
Style sheet properties - CSS Background, CSS Text, CSS Font......
Post your comment
Discussion Board
i learn lot of form this website.
satender kumar 02-13-2015
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
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
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:
<LINK href="special.css" rel="stylesheet" type="text/css">

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

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