Best 50 CSS Interview Questions and Answers for Job Interview
Tejasvee Sharma
Nov 22, 2021
CSS is a very important part of technical Interview questions for software engineers, developers, etc. job roles. So here we bring you the list of frequently asked CSS interview questions and answers which you can prepare and clear your interview round. These 50+ CSS Questions will help you in understanding the CSS deeply with coding examples which will help you in clearing the interview.
About CSS: Cascading Style Sheets (CSS) is a style sheet language that we use for styling or describing the presentation of a document written in a markup language such as HTML.
CSS full form is Cascading Style Sheet. It is a very famous styling language that is used in designing websites with HTML. It is also used with any XML doc like plain XML, SVG, and XUL.
2. From where CSS is originated?
SGML (Standard Generalized Markup Language) is the origin of CSS. It is a markup language.
3. Name different variations of CSS?
CSS1
CSS2
CSS2.1
CSS3
CSS4
4. How can you incorporate CSS on a web page?
There are general three methods to incorporate CSS on web pages.
Inline method: To insert style sheets in HTML doc this method is used.
Embedded/Internal method: To add some unique style in a single doc this method is used.
Linked/Imported/External method: To make changes on multiple pages this method is used.
5. Tell some benefits of CSS?
Bandwidth
Accessibility
Site-wide consistency
Content separated from presentation
Page reformatting
6. Tell some CSS limitations?
Vertical control is limited
Rules, styles, targeting specific text are not possible
No column declaration
Dynamic behavior does not control Pseudo-class
Ascending by selectors is not possible
7. Explain CSS frameworks?
It is an already planned library that helps in web page styling and is easy to manage and more standard compliant. Some CSS frameworks are: -
Bootstrap
Foundation
Semantic UI
Gumby
Ulkit
8. Why background and color are different properties when they always set together?
It can be because of these two reasons:
The background property in CSS is quite complex and combining it with color properties will increase the complexity. The background property increases the legibility of style sheets.
The color property is inherited whereas the background property is not. So combining them will create confusion.
9. Explain Embedded Style Sheet?
It is a CSS style specification method where you can use the STYLE element to embed the entire stylesheet in an HTML document.
<style>
body {
. background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
10. Tell some Embedded Style Sheets advantages?
Create classes to use multiple tag types in the doc.
In complex situations use selector and grouping methods to apply styles
Import the information without any extra download.
11. Explain CSS selector?
It is a string that finds the elements to which a specific declaration will be applied. It makes a bridge between the HTML doc & the style sheet. Some types of selectors in CSS are:
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
12. Give some names of CSS-style components.
Few CSS Style components are:
Selector
Property
Value
13. Tell us the CSS Opacity usage?
This property is used to tell the transparency of an element. In simple term, it tells the clarity or transparency percentage of the image. Technically, Opacity is a degree where light is permissible to travel through an object. Example:
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
14. What is a universal selector?
It matches the name of any element type rather than selecting specific type elements.
<style>
* {
color: green;
font-size: 20px;
}
</style>
15. Name the command used to select all the elements of a paragraph?
You can use the p[lang] command to select all the elements of a paragraph.
16. Tell the use of % unit?
To show or define the percentage values % unit is used.
17. Which property is used to tell the background color of an element.
You can use the background-color property to tell the background color of the element. For example:
<style>
h2,p{
background-color: #b0d4de;
}
</style>
18. Which property is used for controlling the background image repetition?
The background-position property helps to control the image’s initial position of the background image. The image is placed on the top-left of the webpage by default.
You can set the following positions:
center
top
bottom
left
right
background: white url(‘good-morning.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
19. Which property is used for controlling the background image scroll?
The background-attachment property tells whether the background image is fixed or able to scroll with the page in the browser window. If you set the properties to a fixed background image, then the image does not move at all while scrolling through the web page. Let’s see a fixed background image example.
background: white url(‘bbb.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
20. Tell me the ruleset usage?
The ruleset is used to find that selectors can get attached with other selectors. It has two parts:
Selector: It tells the HTML element you want to style.
Declaration Block: It can contain one or more declarations parted by a semicolon.
21. Differentiate class selectors and id selectors?
An overall block is provided to a class selector while an id selector takes only one element differing from other elements.
CSS Class Selector
<style>
.center {
text-align: center;
color: blue;
}
</style>
CSS Id Selector
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
22. Tell some External Style Sheets examples?
It creates classes for reusing it.
External Style Sheets can control multiple documents styles from one file.
In difficult situations, use selectors and grouping methods to apply styles.
23. Tell the difference between inline, external, and embedded style sheets?
Inline: It is only used to style only one small piece of code.
Syntax
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Embedded: These are put between the <head>...</head> starting and closing of head tags.
Syntax
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
External: by changing just one style sheet it can apply the style to all the pages within a website
Syntax
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
24. Define RWD?
RWD means Responsive Web Design. It is a technique that shows the designed page perfectly on every screen (computer screen, mobile, tablets, laptops, etc.) of different screen sizes and devices. So, you don’t end up creating a different page for each device.
25. Give some benefits of CSS sprites?
If a web page has lots of images that take time to load because every single image separately sends out an HTTP request. The main concept used in CSS sprites is to decrease the loading time as it merges the small images into a single image. It decreases the no. of HTTP requests and also the loading time.
26. Differentiate between logical and physical tags?
Physical tags are used as presentational markup whereas logical tags are not of any use for appearances. Physical tags are updated in newer versions, whereas logical tags are quite old and use concentrated methods on content.
27. Describe the CSS Box model and its elements?
It describes the design and layout of CSS elements.
The elements are:
Margin: It is transparent and eliminates the area around the border.
Border: It displays the area around the padding
Padding: It is transparent and eliminates the area around the content.
Content: It shoes the content like text, images, etc.
28. Explain the floats property of CSS?
It shifts the image to the right or left with the text that is to be wrapped around it. It doesn’t modify the element’s property used before it.
29. What are the ways to restore the default property value using CSS?
There is no particular way but the nearest option is to use the ‘initial’ property value that brings back the default CSS values.
30. Explain z-index and its usage?
It helps to identify the stack order of positioned elements that may overlap one another. Zero is the default value of the z-index and can take on either a negative or positive number. A higher z-index element is always arranged above a lower index.
Z-Index can take the following values:
Auto: Equally set the stack order to its parents.
Number: Orders the stack order.
Initial: Sets the default value (0) of z-index.
Inherit: Inherits this property from its parent element.
31. Differentiate between visibility: hidden and display: none?
Visibility: hidden, it affects the layout of the document by hiding the element and occupying the space.
<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
visibility: visible;
}
h1.hid {
visibility: hidden;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>
<p>Note - Second heading is hidden, but it still occupy space.</p>
</body>
</html>
display: none it only hides the element and does not occupy space at all and also does not affect the layout.
<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
display: block;
}
h1.hid {
display: none;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>
<p>Note - Second heading is hidden and not occupy space.</p>
</body>
</html>
32. Explain W3C?
W3C means World Wide Web Consortium. It mainly delivers the information of the World Wide Web. It also made the rules and guidelines for the Web.
33. Describe tweening?
It generates intermediate frames between two images. It shows that the first image has been updated to the second one. All types of animations used tweening. To achieve tweening CSS3, Transforms (matrix, translate, rotate, scale) module can be used.
34. Differentiate between CSS2 and CSS3?
CSS3 is divided into different segments called modules. Unlike CSS2, these modules are sustained by many browsers. Other than that, CSS3 has General Sibling Combinators which match the sibling elements to the given elements.
35. Explain VH/VW (viewport height/ viewport width) in CSS?
It is a unit that measures the height and width in percentage w.r.t the viewport. In responsive design techniques, this VH/VW is used. The VH is measured 1/100 of the height/ width and if the height/ width is 1000px then 1vh and 1vw is equivalent to 10px.
36. Differentiate between reset and normalizing CSS?
Normalize CSS: It makes built-in browser styling consistent with all browsers. It also fixes bugs for browser dependencies.
Reset CSS: CSS reset eliminates all built-in browser styling such as margins, paddings, etc.
37. Why do you need to test the webpage in various browsers?
Yes, it is important to test a website in various browsers that you’re newly designing or making changes to. Other than that, you need to run these tests often, because the browsers got software updates and changes.
38. Explain Pseudo-elements and Pseudo-classes?
Pseudo-elements permit us to create items that generally not exist in the document tree.
::before
::after
::first-letter
::first-line
::selection
AS in the given example, the color will be shown only on the first line of the paragraph.
p: :first-line {
color: #ffOOOO;
font-variant: small-caps;
}
Pseudo-classes choose elements but under specific conditions like when the person hovers over the link.
:link
:visited
:hover
:active
:focus
In the below code, the color of the anchor tag changes when it’s hovered.
/* mouse over link */
a:hover {
color: #FFOOFF;
}
39. Does margin-top or margin-bottom affect inline elements?
No, it margin-top or margin-bottom does not affect the inline elements.
40. When does DOM reflow occur?
Reflow is a web browser process for positions re-calculating and geometries re-calculating of elements in the document, for the main reason of re-rendering part or the entire document.
Reflow occurs when:
Insert, remove or update an element in the DOM.
Modify content on the page, e.g. the text in an input box.
Move a DOM element.
Animate a DOM element.
Take measurements of an element such as offsetHeight or getComputedStyle.
Change a CSS style.
41. Tell us different Box Sizing Properties?
It is the total calculation of the width and height of an element is calculated.
Content-box: In this, the default width and height values apply only to the content.
Padding-box: Width and height is applied to content and padding. Presently, only Firefox browser supports the padding-box value.
Border-box: The Width and height values apply to the content, padding, and border. The border is added to the outside of the box
42. Name four types of @media properties?
All: Used for all media-type devices.
Screen: Used for computer and mobile screen.
Print: Used for printers.
Speech: Used for screen readers.
43. Explain the grid system?
CSS Grid Layout is the best layout CSS system available. It is a 2-dimensional (2D) system, which means it can manage columns and rows, unlike flexbox that is a 1-dimensional (1D) system.
44. What is :root pseudo-class means?
The :root selector permits you to target the highest parent element in the DOM, or document tree as per CSS Selectors Level 3 specification.
45. How do I restore the default value of a property?
The keyword initial is used to reset the property value to default.
46. How does Calc work?
The CSS3 calc() function do the mathematical operations on property values. For example.
.foo {
Width: calc(100px + 50px)
}1
47. What do CSS Custom properties variables mean?
Custom properties (CSS variables or cascading variables) contain particular values to be reused all over a document. The value is pre-set by using – notion and accessed using the var() function.
:root {
--main-bg-color: brown
}
.one {
color: white;
background-color· var (--main-bg-color);
margin: l0px,
width: 50px,
height: 5Opx;
display: inline-block;
}
48. Describe what!important means in CSS?
The style is having the important will have the highest precedence and it overrides the cascaded property.
p {
color: red !important;
}
#thing {
color: green;
}
<p id="thing">Will be RED.</p>
49. Does style1.css have to be downloaded and parsed before style2.css can be fetched?
<head>
<link h ref=" stylel. css" rel=" stylesheet">
<link href="style2.css" rel="stylesheet">
</head>
No, the browsers get the CSS downloaded in the order of its appearance on the HTML page.
