CSS Interview Questions for Fresher and Experience

CSS Interview Questions - These interview questions are helpful for fresher as well as experience people.These are ask in any interview.

1. Sitesbay.com


CSS INTERVIEW QUESTIONS
Top 20 CSS Interview Questions
Hitesh Kumar
SITESBAY.COM

2. Sitesbay.com
These Top 10 CSS Interview Questions are frequently ask in any software company

Why Responsive Web Design is the compulsory for websites?
Recommended By Google: Google have higher Preference for Responsive design
as compare to Non-Responsive.
One Website, Many Devices: Single website can be viewable in desktop, laptop,
ipad, different sizes of mobile.
Good for SEO : Responsive Website have more page views as compare to non-
responsive.
It looks always better in different resolution.

How to check website is responsive OR Not?
https://www.google.com/webmasters/tools/mobile-friendly/

How can i make a existing website responsive?
You can make any website responsive. Just follow the simple steps.
Add Following code in head tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Create a responsive.css file and include in all the pages.
Add Following code in responsive.css
/* Smaller Resolution Desktops and Laptops */
@media (max-width: 800px) {
}
/* Smaller devices like Ipad*/
@media (max-width: 650px) {

3. Sitesbay.com
}
/* Even Smaller devices like Mobile*/
@media (max-width: 450px) {

}
/* Smallest Mobile devices */
@media only screen and (min-device-width: 300px) and (max-device-width:
480px) {
}
Note: In Responsive design you need to hide extra information of website

What is class in CSS and why we use?
Class is basically used for grouping the attributes for applying same css. To apply
the same type of styles on multiple tags, we add the class on the tags. then we
add the styles on same class in css file.

What is grouping?
Grouping is gathering into a comma separated list two or more selectors that
share the same style or (2) into a semicolon separated list two or more
declarations that are attached to the same selector.

Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitive.

4. Sitesbay.com
What is CLASS selector?
Class selector is a "stand alone" class to which a specific style is declared. Using
the CLASS attribute the declared style can then be associated with any HTML
element. The class selectors are created by a period followed by the class's name.
The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped
characters, Unicode characters 161-255, as well as any Unicode character as a
numeric code, however, they cannot start with a dash or a digit

What is cascade?
Cascade is a method of defining the weight (importance) of individual styling rules
thus allowing conflicting rules to be sorted out should such rules apply to the
same selector.

What are different ways to integrate a CSS into a Website?
Following are 3 simple ways
Inline: Use STYLE attribute in the tags.
Embedded: By placing the code in a STYLE element within the HEAD element.
Linked/ Imported: Place the CSS in an external file and link it via a link element.

Explain external Style Sheet? How would you link to it to web page?
Create a CSS file and place all the CSS in that file and include the same file in one
OR more web pages called External Style Sheet?
<link rel="stylesheet" href="/css" />

What are the advantages and disadvantages of External Style Sheets?
Advantages of External Style Sheets are:
Using them, the styles of multiple documents can be controlled from one file.

5. Sitesbay.com
Classes can be created for use on multiple HTML element types.
In complex situations, selector and grouping methods can be used to apply styles.
If you need to update the css file in live site, then need not to upload all files. You
can just upload the css file.
It is easy to manage Files

Disadvantages of External Style Sheets:
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.
Recommendation: Always use External Style sheet

What are the advantages and disadvantages of Embedded Style Sheets
Advantages of Inline Styles
It is especially useful for small number of style definitions.
It has the ability to override other style specification methods at the local level(in
one place).
Disadvantages of Inline Styles
It does not separate out the style information from content.
The styles for many documents can’t be controlled from one source.
Selector grouping methods can’t be used to handle complex situations.
Control classes can’t be created to control multiple element types within the
document.
Good Companies never allowed to use Inline css in website
Recommendation: Never use In-line Style sheet

6. Sitesbay.com

What is CSS selector?
A CSS selector is the part of a CSS rule set that actually selects the content you
want to style. Let's look at all the different kinds of selectors available.

What is Tweening?
Tweening is used in animations, 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.

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

What is the use of CSS sprites?
A web page with large number of images takes a longer time to load in the
website, because 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.

How to import CSS?
import url('/css/typography.css');

7. Sitesbay.com
What is Contextual Selector?
It is a string of individual selectors separated by white space, where only last
element in the pattern is addressed.

What are Pseudo Classes?
Pseudo classes allow you to identify HTML elements on characteristics. These are
specified using a colon to separate the element name and pseudo class.
Following are Pseudo Class example:
a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}

What are some ways you might target IE (or IE6) only, without affecting other
browsers?
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

What does z-index do?
The z-index property specifies the stack order of an element. An element with
greater stack order is always in front of an element with a lower stack order.

What is Media Query?
It is added in CSS3. A Media Query consists of a media type and at least one
expression that limits the style sheets' scope by using media features, such as
width, height, and color.