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.
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).
Q29 What is the use of % Unit?
The % Unit is used for defining the percentage values.
Q30 What are the properties of controlling the image position?
By default, the image is placed on the top-left of the web page but we can set the following properties to position the image such as.
- Right
- Left
- Center
- Top
- Bottom