[2022] Interview questions on CSS

Cascading Style Sheets is a style sheet language that is used to describe the presentation of a document. It specifies different style rules according to which a webpage can be designed. CSS is written in a markup language like
HTML. It can be used with XML documents including SVG and XUL.

1) What is CSS?

2) Who is the creator of CSS?

Håkon Wium Lie is credited as the creator of CSS

3) What are the different variations of CSS?

The different variations of CSS are as follows:

CSS1
CSS2
CSS2.1
CSS3
CSS4

4) How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

Inline method
Embedded/Internal method
Linked/Imported/External method

All these methods need separate tags, and are implemented at different places. Thus, a user can easily use any of these methods to apply CSS.

5) What are the advantages of CSS?

Following are the advantages of using CSS

Easy styling of webpage
Site-wide consistency
Page reformatting
Accessibility
Content separated from presentation

6) What are the limitations of CSS?

The limitations of CSS are as follows:

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 is not possible

7) What are the CSS frameworks?

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

Bootstrap is one of the most popularly used frameworks of CSS.

8) Why background and color are the separate properties?

Background and color are two different properties in CSS because of the following reasons:

The background property is a complex property, and if it is combined with color, the complexity will increase.
Color is an inherited property while the background is not.

9) What is Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with HTML. As the name suggests the style sheet can be embedded in the HTML file itself. It is done with the help of the style tags. These style tags are placed inside
the head tags of the HTML document in which the sheet must be placed.

<style>

body {

background-color: cyan;

}

</style>

10) What are the advantages of Embedded Style Sheets?

The advantages of the Embedded Style Sheets are:

Creation of classes for use on multiple tags simultaneously
Use of selectors and grouping methods to apply styles
No extra downloading is required

11) What is a CSS selector?

CSS selector is a string. It is used to identify the elements to which a style rule will be applied. It is referred as a link between the HTML document and the style sheet and is equivalent of HTML elements.

12) What are the CSS style components?

The CSS Style components are used to set the styling of different elements. It is through a combination of these components that the CSS rules are applied. Some of the CSS Style components are:

Selector
Property
Value

13) What is the CSS Opacity?

CSS opacity is a property of CSS that is used to specify the element transparency or image clarity in simple terms. In technical terms, Opacity is the degree to which light is allowed to travel through an object. It can be set using
the simple keyword, opacity and specifying values between 0 and 1, with 1 being 100% (original form) and 0 being completely transparent.

For example:

<style>

img.trans {

opacity: 0.4;

filter: alpha(opacity=40); /* For IE8 and earlier */

}

</style>

14) What is a universal selector?

The universal selector is a CSS selector, as the name itself suggests. It is used to match the name of any of the element type instead of any particular type. The sign used for a universal selector is that of an asterisk (*).

<style>

* {

color: green;

font-size: 20px;

}

</style>

15) How can you select all the elements of a paragraph?

In order to select all the elements of a paragraph, the p[lang] command is used.

16) What are the different types of selectors available in CSS?

The different types of selectors available in CSS are listed as:

CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector

17) Which property is used to specify the background color of an element?

The background color of any element can be specified with the help of the background-color property For example:

<style>

h2,p{

background-color: #b0d4de;

}

</style>

It specifies the background color of h2 and p tags using a hexadecimal value.

18) Which property controls the image repetition of the background?

The image repetition of the background can be controlled by the property known as the background-repeat
property. It repeats the background image either horizontally and vertically.

19) Which property is used to control the image position in the background?

By default, the background image is placed on the top-left of the webpage; however, it can be changed with the help of the background-position
property with following possible values that are self-explanatory:

center
top
bottom
left
right

20) Which property is used for controlling the image scroll?

The background-attachment property is used to control the image scrolling. This property is used to specify if the background image is fixed or will it scroll. If the background image is fixed then the image will not move during
scrolling.

21) What is the use of ruleset?

The ruleset is used to identify that selectors can be attached with one another. A ruleset has two parts:

Selector – Selector indicates the HTML element to be styled.
Declaration Block – It can contain declarations, multiple declarations are separated by a semicolon.

22) What is the difference between class selectors and id selectors?

A class selector is denoted by a dot(.) sign, while an id selector is specified by a pound(#) sign.

CSS Class Selector

<style>

.center {

text-align: center;

color: blue;

}

</style>

CSS Id Selector

<style>

#para1 {

text-align: center;

color: blue;

}

</style>

23) What are the advantages of External Style Sheets?

The varied advantages of using an External Style Sheet, is as follows:

Classes creation causes reusing the style in many documents.
Multiple documents can be applied with same style
Grouping methods can be used to apply styles.

24) What is the difference between inline, embedded and external style sheets?

Inline: Inline Style Sheet is used to style only a small piece of code, usually a single tag. It is applied via style attribute.

Syntax:

Embedded: Embedded style sheets are put between the <style>…</style> tags, they are usually placed in a head tag

Syntax:

<style>

body {

background-color: linen;

}

h1 {

color: red;

margin-left: 80px;

}

</style>

External: External CSS is an external file that contains the CSS rules. These rules can be applied to many documents at a time. The external CSS files can be attached with a link tag into multiple html documents.

Syntax:

<head>

</head>

25) What is RWD?

RWD stands for Responsive Web Design, it is a website designing technique. This technique is used to display the designed page perfectly on every screen size and device. Nowadays, the different screen sizes are available with
include PCs, tablets, smartphones, etc. so in order to make sure that the designed website actually fits to every screen size the RWD is used.

26) What are the CSS sprites?

CSS sprites help in faster loading of web pages by sending fewer HTTP requests for loading the images by combining the images into single image. 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.

27) What is the difference between logical tags and physical tags?

Physical tags give up a presentational markup and are included in newer versions. While the logical tags are useless for appearances, old and concentrate on the content.

28) What is the CSS Box model?

The CSS box model is used to define the design and layout of the CSS elements. It in turn helps to define the style and appearance of anything. It includes the following elements:

Margin
Border
Padding
Content

29) What is the float property of CSS?

The CSS float property is used to move the image to the right or left. This movement is done along with the texts which will be wrapped around it. The image can float in either directions as per the layout plans.

30) How the default value of a property can be restored?

The ‘initial’ property value can restore the default CSS values, for the different properties.

31) What is the z-index?

The z-index, is the index of the third dimension, that is used to set height of a webpage. In simple words, it can set the stack order of positioned elements. The default value is zero, it can take on either a positive or negative
number as well.

32) What are the possible value for a z-index?

Z-Index can take the following values:

Auto: Sets the z index value of an element equal to its parent elements, i.e. same level.

Number: Orders the stack order, lower the value lower the place in the stack order.

Initial: Sets to its default value, which is zero.

Inherit: Inherits the z index property from its parent element.

33) What do you understand by W3C?

W3C stands for World Wide Web Consortium. The purpose of W3C is to deliver the information about the World Wide Web. It also develops rules and regulations that ensure smooth and proper running of the web all over the world.
According to the guidelines for the Web, released by W3C, everyone who is using the web must follow the netiquettes (net etiquettes).

34) What is tweening?

Tweening is the process of generating intermediate frames between two images. An extremely popular animation technique that gives an impression of an image evolving into another. In CSS3, the Transforms module can be used to achieve
tweening.

35) What is the difference between CSS2 and CSS3?

The CSS3 is divided into different sections,which are also known as modules. Each module has a specific function to perform. This ensures that CSS3 is more organized than CSS2, which did not have the concept of modules.

36) What is the difference between visibility: hidden and display: none?

visibility: hidden
It hides the element and makes it invisible, however the element still occupies the space and thus it affects the layout of the document, making it weird to look at it.

display: none It also hides the element from view. However, in this case the element does not occupy space any space, thus it is preferred.

37) What is the meaning of cascading?

The elements had to be styled in an in-line fashion however, through the CSS this feature could be implemented by cascading. There are three ways for cascading:

Elements
Multiple Style One Element
Same style, Multiple Pages

38) What is the RGB stream?

Red, Green and Blue are three fundamental colors and using a combination of these colors, different colors can be generated. Since CSS is used to apply styles on HTML elements, thus, RGB is used to apply different combinations of
the colors. The intensity of the colors is represented in numbers ranging from zero to 255.

39) What are the ways to assign a color to an element?

There are three ways to assign a color to an element in CSS:

Hexadecimal notation
RGB functional notation (Red, Green, Blue)
HSL functional notation (Hue, Saturation and Luminosity)

What are pseudo-elements in CSS?

It is a keyword added to a selector allows styling a specific part of the element. They can be used for decoration or adding elements to the markup.

How can multiple tags use the same styling?

A comma can separate multiple tags (,). By doing so, same styling can be applied to multiple tags. Example:

h2, h3, p {

color: blue;

}

What different modules are available in CSS?

There are several modules in CSS. Below are a few of them:

Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

What media types are allowed by CSS?

There are four types of media properties:

all – for all devices
print – for printers
speech – for screen readers
screen – for the screens, tablets, smart-phones etc.

What is the overflow property?

The overflow property specifies what must happen if the content overflows. It specifies whether to clip the content or to add the scrollbars in case an overflow occurs. The possible values are:

overflow: auto;

overflow: none;

overflow: scroll;

overflow: visible;

Explain the concept of specificity in CSS.

Specificity is something through which the browsers decide which CSS property values are relevant to an element. It is based on the matching rules which are composed of different sorts of CSS selectors and applies when the same
element is targeted by multiple declarations.

46) What are the various font-related attributes in CSS?

The different font-related attributes in CSS are:

Font-style
Font-variant
Font-weight
Font-size/line-height
Font-family
Caption
Icon

47) What is the use of box-shadow in CSS?

The box-shadow property as the name suggests, adds shadow effects. Multiple effects can be set on an element separated by commas. It is described by X and Y offsets relative to the element, color, blur and spread radii. Example:

box-shadow: 10px 5px 5px red;

48) What are contextual selectors?

Contextual selectors specify different styles for different parts of your document. These styles can be assigned to different HTML tags, or, to classes as well.

49) How can an element/image have rounded corners?

The border-radius property, can be used to add rounded corners to an image. A 50% value will make the image or an element contain round corners. Example:

border-radius: 50%;

50) What is a CSS flexbox?

The CSS flexible box or the CSS flexbox is a layout module which is made to improve the items’ alignment, directions and order in the container. The main characteristic of the flex container is that it is able to modify the width or
height of its children to fill the available space in different screen sizes.