Top 50 most asked CSS interview questions

Author: Shrey Reddy | 30-12-2024 02:32 AM

CSS Interview Questions

Top 20+ most asked and popular CSS interview questions are listed here with answers for freshers candidates. Experienced candidates can also try to learn these CSS Interview questions for job interviews.

CSS stands for Cascading Style Sheets, CSS code is used to reduce some number of extra codes, For example, suppose you write a class in CSS file after that class you can easily call two or more times in an HTML web page.

List of Top CSS interview question

Q1 What is CSS?

CSS is the combination of three alphabets "Cascading Style Sheets". It is some kind of technique by which we can define a style for HTML elements, which means how HTML elements look on a web page, what will be their color, size, location, and much more things.

CSS is a web designing language simple for HTML elements.

Q2 How to attach a CSS external file to HTML?

<head>

<link rel="text/css" href="CSS_file_location" />

</head>

Q3 What is CSS flexbox?

CSS flexbox allows designing a flexible full responsive layout structure without using any float or positioning property of CSS.

Q4 What are the properties of flexbox?

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Q5 What is a class selector in CSS?

The CLASS selector is a unique (Class selector name should be unique) specific style but we can call one CLASS selector multiple times on an HTML web page according to requirement. On a web page, a declaration of style by CLASS selection & association with HTML can be made the page more flexible and attractive.

.class_name {

font-size: 20px;

} //class selector

USED IN BODY TAG HERE

<body class= "class_name"> //Here, write HTML codes which want to designed by this class property.</body>

Q6 What is ID in CSS?

ID is a selector & it is always unique in an HTML WEB page, which means we can call only one time in a whole page of the HTML page.

Q7 What is the name of all modules in CSS?

The list of several modules in CSS are:

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

Q8 How can define the dimension properties in CSS?

There are several ways to define dimension properties in CSS:

Height
Min-height
Max-height
Width
Min-width
Max-width

Q9 What are the different versions of CSS?

Currently, five versions are available in CSS

CSS 1
CSS 2
CSS 2.1
CSS 3
CSS 4

Q10 What are CSS box elements?

CSS box elements are used to design the layout. The elements are mentioned below one by one:

Margin
Padding
Border
Content

Q11 What is a CSS selector?

CSS Selectors are html elements identifier, CSS selector use to identify HTML element or group of html elements from html document.

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

Q12 What is the difference between CSS and CSS3?

CSS3 is divided into two various sections which are called modules.
CSS3 is the latest version of CSS.
Border-radius or box-shadow, flexbox graphics attribute can we use in CSS3.
CSS3 is more advanced, comparison to CSS.
CSS3 modules are supported almost on every browser and the modules of CSS are not supported in every browser.

Q13 What is the purpose of the z-index?

Z-index property helps in specifying the overlapping element. It is a number that can be a positive or negative value, but the default value of the z-index is zero.

Auto
Number
Initial
Inherit

Q14 What is the purpose of the important?

Important is defined as that declaration which is having more importance than the normal declaration, which means the important property definitely shows the value of attributes.

Q15 How many position states are used in CSS?

Static (default)
Relative
Fixed
Absolute

Q16 What are the margin properties in CSS?

Margin is a CSS property that is used to create space around elements where we used it. Margin used by five different names such as mentioned below:

margin (Around All Directions of Element)
margin-top (Only Top Directions of Element)
margin-right (Only Right Directions of Element)
margin-bottom (Only Bottom Directions of Element)
margin-left (Only Left Directions of Element)

Q17 Are quotes mandatory in URLs?

Quotes are optional in URLs, it can be single or double.

Q18 What benefits do external style sheets?

We can control one or more HTML pages by using the same CSS code.
Multiple HTML elements can have many documents, where classes can be created.
To group styles in complex situations, selector and grouping methods are used.

Q19 What are various font attributes?

Font-style
Font-size
Font-variant
Font-family
Line-height
Font-weight
Caption, Icon, etc...

Q20 What are the padding properties in CSS?

Padding properties are used to generate space around an element’s content inside the element border. The CSS padding properties are:

padding
padding-top
padding-right
padding-bottom
padding-left

Q21 What are the limitations of CSS?

In CSS no column declaration is possible.
Ascending by selectors is not possible.
Limitations of vertical control.
Pseudo-class is not controlled by dynamic behavior.
Rules, styles, targeting specific text are not possible.

Q22 How to give border in CSS class?

Three important border properties are used to style HTML elements.

Border Size
Border Types - solid, dotted, none, etc.
Border Color

EXAMPLE of BORDER

.class_name {

border: 2px, solid, #808080; //This border work for all directions.

}

Q23 How many ways can a CSS be integrated as a web page?

CSS Code write in Inline
CSS Internal Code in HTML web page in HEAD section
CSS Code in External file after that attached in HTML web page HEAD section.

EXAMPLE OF INLINE

<p style="colour:skyblue;"> hello inline css code!</p>

EXAMPLE OF EXTERNAL CSS CODE

<head>

<link rel="text/css" href="CSS_file_location" />

</head>

EXAMPLE OF INTERNAL CSS CODE

<head>

<style>

.p_class {

Color: pink; }

</style>

</head>

Q24 What are Pseudo-elements?

Pseudo-elements are used to add special effects to some selectors. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements.

Example of Pseudo-Elements

.selector::pseudo-elements{

property:value;

}

Q25 How many types of CSS files are used in HTML?

Three types of CSS files are used in HTML web page:

Inline - The CSS codes are written next to the text.
Internal - The CSS codes are written at the top of web page, means in head section.
External - The CSS codes are written in separate files.

Q26 What is the float property of CSS?

FLOAT property is used to give the direction of Text & Image. Basically, five values of the property are used in float such as

float: left
float: right
float: none
float: initial
float: inherit

The text can be moved to the right or the left along with the image to be wrapped around it, by the float property of CSS.

Q27 What are CSS counters?

CSS counters are variables that can be incremented by rules of CSS that inspector track how many times the variable has been used.

Q28 What is CSS opacity?

CSS opacity property is used to elaborate the transparency of an element, it is applied on image, text, background color, etc. We can take the values from 0.0 to 1.0 (if the value is lower then the image or text is more transparent).