CSS Interview Questions

1. Why Responsive Web Design is the compulsory for websites?

Answer: 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.

2. How to check website is responsive OR Not?

Answer: https://www.google.com/webmasters/tools/mobile-friendly/

3. How can i make a existing website responsive?

Answer:You can make any website responsive. Just follow the simple steps. Add Following code in head tag. 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) {

}

/* 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

4. What is class in CSS and why we use?

Answer: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.

5. What is grouping?

Answer: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.

6. Is CSS case sensitive?

Answer:Cascading Style Sheets (CSS) is not case sensitive.

7. What is CLASS selector?

Answer: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

8. What is cascade?

Answer: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.

9. What are different ways to integrate a CSS into a Website?

Answer: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.

10. Explain external Style Sheet? How would you link to it to web page?

Answer: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?

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

Answer: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 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

12. What are the advantages and disadvantages of Embedded Style Sheets Advantages of Inline Styles

Answer: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

13. What is CSS selector?

Answer: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.

14. What is Tweening?

Answer: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.

15. Explain RWD?

Answer: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

16. What is the use of CSS sprites?

Answer: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.

18. How to import CSS?

Answer:import url(‘/css/typography.css’);

19. What is Contextual Selector?

Answer:It is a string of individual selectors separated by white space, where only last element in the pattern is addressed.

20. What are Pseudo Classes?

Answer: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;}

21. What does z-index do?

Answer: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.

22. What is Media Query?

Answer: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.