CSS Interview Questions and Answers

Q.1.What is CSS?
A.CSS outline the style of an HTML webpage, it is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen. CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading Style Sheet.

Q.2. Name all the modules which are used in the current version of CSS.
A.There are several modules in CSS as stated below: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

Q.3. Why is the external style sheet useful?
A.External style sheet is very useful as we write all the styling codes in a single file and it can be used anywhere by just referencing the link of that external style sheet file.So if we do any changes in that external file, then the changes can also be observed on the webpage. So we can say that it is very useful and it makes your work easy while working on larger files.

Q.4. What are the uses of embedded style sheet?
A.Embedded style sheet gives us the privilege to define styles at one place in an HTML document.We can generate multiple classes using an embedded style sheet to use on multiple tag types of a web page and also there is no extra downloading required for importing the information.

Q.5.How to use CSS selector?
A.By using CSS selector, we can choose the content which we want to style so that we can say that it is a bridge between the style sheet and the HTML files.The syntax for CSS selector is “select” HTML elements created on their id, class, type etc.

Q.6.Explain the concept of Tweening.
A.Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image. It is mainly used for creating animation.

Q.7.Define CSS image scripts.
A.CSS image scripts is a group of images which is placed into one image. It reduces the load time and request number to the server while projecting multiple images into a single web page.

Q.8. Explain the term Responsive web design.
A.It is a method in which we design and develop a web page according to the user activities and conditions which are based on various components like the size of the screen, portability of the web page on different device etc. Hence it is done by using different flexible layouts and grids.

Q.9.What are CSS counters?.
A.CSS counters are variables which can be incremented by rules of CSS that inspector track how many times the variable has been used.

Q.10. What is CSS specificity?
A.CSS specificity is a score or rank that decides which style declaration has to be used to an element. (*) this universal selector has low specificity while ID selectors have high specificity.

Q.11. What is CSS specificity?
A.CSS specificity is a score or rank that decides which style declaration has to be used to an element. (*) this universal selector has low specificity while ID selectors have high specificity. There are four categories in CSS which authorized the specificity level of the selector. Inline style IDs Classes, Attributes, and pseudo-classes. Elements and pseudo elements.

Q.12. How can we calculate specificity?
A.To calculate specificity we will start with 0, then we have to add 1000 for each ID and we have to add 10 to the attributes, classes or pseudo-classes with each element name or pseudo-element and later we have to add 1 to them. h2 #content h2 <div id=”content”> <h2 style=”color:#FF0000”>heading</h2> </div>

Q.13. How is the concept of inheritance applied in CSS?
A.nheritance is a concept in which the child class will inherit the properties of its parent class. It is a concept which is been used in many languages and is the easy way of defining the same property again. It is used in CSS to define the hierarchy from the top level to the bottom level. Inherited properties can be overridden by the children class if the child uses the same name.

Q.14.Differentiate between inline and block element.
A.Inline element does not have an element to set width and height and also it does not have the line break.Example: em, strong, etc.

Block element specification:

They do have the line break.

They define the width by setting a container and also allow setting height.

It can also contain an element that occurs in the inline element.

Example:

width and height
max-width and max-height
min-width and min-height
hi (i=1-6)- heading element
p- Paragraph element.

Q.15.Differentiate between the ID and class.
A.Both id and class is been used in HTML and assigns the value from CSS.
Please find below the differences:

Id is a kind of element which uniquely assigns a name to a particular element whereas class has an element with a certain set of properties which can be used for the complete block.

The id can be used as an element because it can uniquely identify it whereas class is also defined to block the element and applies too many tags wherever it is used.

Id provides the restriction to use its properties to one specific element whereas in class the inheritance is applied to a specific block or group of the element.

Q.16.Define ‘important’ declarations used in CSS.
A.Important declarations are defined as that declaration which is having more importance than the normal declaration.While executing, these declarations override the declaration which is having less importance.

Q.17.What are the differences between relative and absolute in CSS?
A.The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent. It means if we write left:10px then the result will be 10px far from the left edge of the parent element.

Q.18.What is CSS opacity?
A. It is the property which elaborates the transparency of an element. By this property, we can transparent the image that can take the values from 0.0-1.0, if the value is lower then the image is more transparent. IE8 and earlier version of the browser can take the values from 0-100.

Q.19.Explain the concept of pseudo-elements in CSS.
A. It is a feature of CSS which is used to style the given parts of an element. For Example, we can style the first letter or line of an HTML element.selector::pseudo-element { property:value; }

Q.20.What is the use of the Box Model in CSS?
A.In CSS, the box model is a box that binds all the HTML elements and it includes features like margins, border, padding, and the actual content. By using box model we will get the authority to add the borders all around the elements and we can also define the space between the elements.

Q.21. What is the origin of CSS?
A.SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that defines markup languages.

Q.22. What are the different variations of CSS?
A. Following are the different variations of CSS: CSS1 CSS2 CSS2.1 CSS3 CSS4

Q.23. How can you integrate CSS on a web page?
A. There are three methods to integrate CSS on web pages. Inline method – It is used to insert style sheets in HTML document Embedded/Internal method – It is used to add a unique style to a single document Linked/Imported/External method – It is used when you want to make changes on multiple pages.

Q.24. What are the advantages of CSS?
A. Bandwidth Site-wide consistency Page reformatting Accessibility Content separated from presentation

Q.25. What are the limitations of CSS?
A. 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

Q.26. What are the CSS frameworks?
A. CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are: – Bootstrap Foundation Semantic UI Gumby Ulkit

Q.27. Why background and color are the separate properties if they should always be set together?
A. There are two reasons behind this: It enhances the legibility of style sheets. The background property is a complex property in CSS, and if it is combined with color, the complexity will further increase. Color is an inherited property while the background is not. So this can make confusion further.

Q.28. What is a CSS selector?
A. It is a string that identifies the elements to which a particular declaration apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. There are several different types of selectors in CSS: – CSS Element Selector CSS Id Selector CSS Class Selector CSS Universal Selector CSS Group Selector

Q.29. What are the advantages of External Style Sheets?
A. You can create classes for reusing it in many documents. By using it, you can control the styles of multiple documents from one file. In complex situations, you can use selectors and grouping methods to apply styles.

Q.30. What is RWD?
A. RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You don’t need to create a different page for each device.

Q.31. What is the float property of CSS?
A.The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

Q.32. How to restore the default property value using CSS?
A. In short, there is no easy way to restore to default values to whatever a browser uses.The closest option is to use the ‘initial’ property value, which restores the default CSS values, rather than the browser’s default styles.

Q.33. What is the purpose of the z-index and how is it used?
A. The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.An element with a higher z-index is always stacked above than a lower index.Z-Index can take the following values:

Auto: Sets the stack order equal to its parents.

Number: Orders the stack order.

Initial: Sets this property to its default value (0).

Inherit: Inherits this property from its parent element.

Q.34. What is the difference between CSS2 and CSS3?
A. The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which are also known as modules. Unlike CSS2, CSS3 modules are supported by many browsers.Apart from that, CSS3 contains new General Sibling Combinators which is responsible for matching the sibling elements with the given elements.

Q.35. What are the benefits of CSS sprites?
A. If a web page has a large number of images that take a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.