Cascading Style Sheets or CSS is a stylesheet language used to describe a document's presentation in HTML or XML. When it comes to explaining how elements should be rendered on screen, on paper, or in speech, CSS does that for you. Whether you are a beginner or an intermediate or experienced in CSS, this write-up will aid you in increasing your confidence and knowledge in CSS. The guide also provides step-by-step explanations for every question, which helps you understand every concept in detail. These questions will also help you to validate your knowledge of two-column layouts, the different selector types that exist in CSS, etc., to your potential employers. With CSS interview questions in your reach, you can be pretty much confident that you can prepare well for your upcoming interview.
Conditional comments are developed by Microsoft. And it only worked with IE browser. The conditional comments help to target IE browser & comments can be written to target the different version of IE 5-IE 9. CSS rules or code embedded inside of the comments will be used by an Internet Explorer based browser. Whereas from IE10 & above, the support for conditional comments has been dropped.
<p class=“conditional-comments“> <!--[if IE]> According to the conditional comment this is IE<br /> <![endif]--> <!--[if !IE]> --> According to the conditional comment this is not IE 5-9<br /> <!-- <![endif]--> </p>
A must-know for anyone heading into a CSS interview, this is frequently asked in CSS basic interview questions.
The aspect ratio is defined as the ratio of the width media features to the ratio of height media features W:H. And the aspect ratio 16/9 is 42:32.
The below Media query allows targeting the media query based on device-aspect-ratio, which is 16/9.
Clear all
Clear all@media screen and (device-aspect-ratio: 16/9) {
/* Your code here */
}It's no surprise that this one pops up often in CSS interview questions for freshers.
The :first-line pseudo-element is used to style the first formatted line of a paragraph by using text-transform property with value uppercase.
For e.g.
p:first-line { text-transform: uppercase } Colors in CSS can be specified by the following six methods:
opacty is not a css property.
Pseudoclass :first-letter can refer to the first letter of the element, paragraph as below. It is clean approach without enclosing the first letter in span tag and applying the required rule based on the representation.
HTML <p>Booker T</p>
CSS
html {
font-size: 3rem;
}
p::first-letter {
border: 1px solid;
font-weight: bold;
color: red;
}
A common in advanced CSS interview question, don't miss this one.
CSS3 is the latest evolution extending CSS2. It has a lot of new features like selectors, rounded corners, border-image, text-shadow, box-shadow, transitions, animations, gradients, and grid layouts. Let us discuss each of them below.
<!DOCTYPE html>
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div id="rcorner"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<p id="borderimg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ut esse, accusamus id totam ipsam voluptatum magni. Aliquam, ipsa ipsum! Soluta optio quia recusandae qui sed suscipit. Dolorem, libero obcaecati.</p>
</body>
</html>| CSS | CSS3 |
|---|---|
| CSS main focus was on providing formatting features and basic styling to the HTML elements. | CSS3 has evolved to overcome the drawbacks of CSS with a lot of new features and better performance. |
| In CSS, everything was a kind of specification which defined different features. | CSS3 has made this simpler by bringing in the concept of modules. |
| CSS will not support media queries for responsive design. | CSS3 supports media queries for responsive design. |
| CSS supports only standard hex colors and It’s a pain to use elegant colors and make the UI better. | CSS3 supports RGBA, HSL, HSLA and gradient colors too. Using these types of colors helps us to frame and use better colors in UI. |
| CSS supports simple selectors. Like the ones with ID, class and tag names. | CSS3 calls the components as a sequence of selectors in a very different and advanced way. |
| CSS supports only ‘web-safe fonts’ to make sure that the text displays in all the browsers. | CSS3 has introduced designers to use special fonts like those available in Google fonts. |
CSS3 position property allows us to position an element. The types of property values available for a position are static, absolute, fixed, relative, sticky, initial, and inherit.
CSS can be written in three different ways for an HTML file.
The best way to write CSS by having an external document and linking it in the required HTML documents. Whereas the reason why having an external document is best because having our CSS written inline it should be rewritten for another element too lots of same code comes up. Whereas CSS is embedded in a style tag we cannot use the styles in a different HTML document again the code should be rewritten in different HTML document too. So, the best way is to use an external document to write CSS and link it in an HTML document.
Ex:
The inline one is written along with the HTML element encapsulated in the body tag. And, the embedded style is written in the style tag encapsulated inside the head tag. And, the external style sheet named main.css is linked using link tag.
A staple in HTML CSS interview question, be prepared to answer this one.
Selectors are used to selecting the content which you want to add styles too. There are five types of selectors in CSS.
1. Type Selector (Element Selector): selects all the elements which match the given type.
Example: h1 [Selects all the elements with h1 tag.]
2. ID Selector: selects the element which matches the ID value. It’s suggested that there should be only one element for a given ID.
Example: #first-name [Selects the element having first-name as an ID value.]
3. Class Selector: selects all the elements which match the given class name.
Example: .blue [selects all the elements with a class name blue.]
4. Universal Selector: selects all the elements in the document.
Example: * [Selects all the elements in the document.]
5. Attribute Selector: selects the element which matches the attribute value.
Example: a [target = “_blank”] selects all the anchor elements with attribute value is _blank.
90% of the times we use class selectors to apply styles. Only for specific conditions, we use other selectors. It’s better to use class selectors to apply styles for similar elements like labels in a form.
In CSS3 the value for a color property can be given in the below-mentioned ways.
Serif and sans-serif are the parent fonts to all the available fonts. Serif fonts usually have a hook (commonly known as feet) for all the letters, whereas in sans-serif (sans means without in French), we will not have those hooks.
From the above image, we could clearly see that for the first ‘F’ I have hooks which are highlighted by circles and these are also called as feet. Whereas, we don’t have the feet in the second ‘F’. It’s important to always know which font-family that font which you are using belongs to. Some of the examples of popular serif fonts are Times New Roman, Bookman, Baskerville, Cambria, Courier, Century, Copper Black, Minion, and New York. Some of the examples of popular sans-serif fonts are Arial, Calibri, and Comic Sans, Helvetica, Geneva, San Francisco, and Ubuntu.
All the elements of HTML are boxes. In CSS we use the term box model when we talk about the designs and layouts of the HTML elements. The CSS box model consists of margins, border, padding, and content.
From the above figure, we can clearly understand that the element as a box and the meaning of all other properties of a box model. It’s always important to know the meaning of all the properties and how they behave and where exactly they occupy the space to become a better CSS developer.
This is a frequently asked in HTML CSS Javascript interview questions.
Shorthand notations are also called as shorthand properties in CSS. That lets you set multiple values of CSS properties simultaneously. It’s often good to use shorthand notations because it reduces the file size and even improves the performance.
/* Example */
.border{
border-width: 1px;
border-style: solid;
border-color: #000;
}
/* shorthand property for the above border example */
.border{
border: 1px solid #000;
}In the above example, we can see that for a border class, we have written three different properties of a border (width, style, and color), which can be written in a better way by just mentioning the border and giving all the required values (width, style, and color). This helps in reducing the file size and even increases the performance.
Similarly, there are shorthand notations for many CSS properties. One of the other examples is padding and margin properties, which take four different values sequentially and assign each in the clockwise direction (Top, Right, Bottom, and Left).
This question is a regular feature in CSS basic interview questions, be ready to tackle it.
A pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available. Some of the relevant examples of pseudo-classes are active, checked, disabled, empty, first-child, hover, focus, in-range, invalid, last-child, nth-child, optional, read-only, target, valid, visited, root, required which can actually be used to apply styles.
/* Color changes to Brown on Hovering on anchor tag */
a:hover{
color: brown;
}
/* Color changes to Red on clicking on anchor tag */
a:active{
color: black;
}
/* Color changes to red after visiting on anchor tag */
a:visited {
color: red;
}In the above example for anchor tag where: visited, hover and: active are used specify the state of the anchor tag and depending on the pseudo-classes the specific styles will be applied. By default, the color of the anchor tag will be blue, on hovering on the anchor tag the color will change to blue, on clicking on it when it activates the color will change to black and after clicking for the remaining period of time the color of the anchor tag will be in red.
For the above scenario, we need to use a pseudo-class to achieve this. pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available. We use: read-only pseudo-class here in order to achieve selecting the right element and to make the selector only select the not editable one.
/* :read-only pseudo-class is used for the input element */
input:read-only{
background: cyan;
}From the above code, we can see that we have used the input selector to select the input element, and the: read-only pseudo-class targets the required element. And the cyan color is added using background property.
Expect to come across this popular HTML CSS interview question.
The easiest way to draw a circle in CSS is using border-radius property. The code below will display a circle.
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners {
border-radius: 50%;
background: #73AD21;
border: 3px solid black;
padding: 20px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="rcorners"></div>
</body>
</html>OUTPUT:
Make sure you have the same width and height and have border-radius as 50% which will display a circle as shown above.
In CSS, ID is suggested to be unique for an element whereas the class name is can be the same for many elements. As the ID is unique for the element, ID has higher priority than class in CSS. Consider the below example for better understanding.
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners {
border-radius: 50%;
background: #FF0000;
border: 3px solid black;
padding: 20px;
width: 200px;
height: 200px;
}
.corners-div {
border-radius: 50%;
background: #73AD21;
padding: 1px;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="rcorners" class="corners-div"></div>
</body>
</html>OUTPUT:
For the above example, we still see the background color red with the black border as output even after trying to override the background color as green without a border using the class selector below. This clearly answers our question that ID has a higher priority than class.
It's no surprise that this one pops up often in CSS viva questions.
We can define a two column layout using a container and two divs inside the container by the following code.
The parent container (.row) will have display: flex property. And the column will have flex value 50%, which will divide the available width from the parent in two equal halves.
Code example:
<div class="row"> <div class="column"> Left column </div> <div class="column"> Right column </div> </div>
.row {
display: flex;
width: 100%;
}
.column {
flex: 50%;
border: 1px solid #ccc;
}Output
We can use the CSS pseudo-class property :checked on input type radio & checkbox and the adjacent sibling combinator (E + F) E is the first element which is input type radio or checkboxes and F is the next element which is label.
CSS
/* E + F */
/* Selected radio input & label */
input[type=radio]:checked+label{
/* Your styles here */
}
/* Checked checkbox input & label */
input[type=checkbox]:checked+label {
/* Your styles here */
}This is a frequently asked CSS interview question.
CSS variables enables developers to reuse the code, once the variable are defined and it can be reused effectively, which gives good control over stylesheet in terms of code readability, maintenance and bring consistency.
The variables which are declared in :root pseudo-class act as global CSS variables.
We can declare the variable via :root pseudo-class and reusing the variable using var followed by variable name in parenthesis and assigning to CSS property.
The class .foo and .bar will have the text color in red, the declared variable
--color has been reused via var (--color) in both of these classes.
:root {
--color: red;
}
.foo {
color: var(--color)
}
.bar {
color: var(--color)
} There are 11 types of selector, such as:
Expect to come across this popular HTML CSS interview question.
The element with position:fixed property will be displayed at the specific offset (top, bottom, left and right) based on the position relative to the viewport.
It will stay at same place when the page is scrolled.
Whereas in position:sticky the element behave as relatively positioned element and once the containing block of the element crosses a specified threshold value it act as position:fixed element. So, the element switches its position based on the threshold value specified by top, bottom, left & right co-ordinates value.
We can do a pattern match for such urls by using the following syntax
a[href^="/"], a[href^=".."] {
/* Write your styles here */
}A must-know for anyone heading into CSS interview, this is a frequently asked CSS interview question for experienced professionals.
The visibility of the div during 3d transform can be managed via backface-visibility:hidden This property set the visibility as whether to show or hide the back face of an element during 3d transform.
Example from code:
<div class='container'>
<div class="card">
<div class="face front">
See
</div>
<div class="face back">
Saw
</div>
</div>
</div>
.container {
position: relative;
margin: 12px 24px;
font-family: system-ui, -apple-system, Arial, Helvetica, Trebuchet MS;
}.card {
width: 200px;
height: 50px;
position: relative;
transform-style: preserve-3d;
transition: 0.5s;
}
.container:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
backface-visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
line-height: 50px;
text-align: center;
border-radius:5px;
}
.front {
background: DodgerBlue;
z-index: 10;
}
.back {
transform: rotateY(180deg);
background: SlateBlue;
}
.container:hover .front {
z-index: 0;
}
The difference between the two lies how the effective width of the container is calculated. The border-box & content-box belong to box-sizing property. The box-sizing property tell the browser how the effective width of the container to be calculated.
content-box is based on default css box sizing behavior. The rendered width of the container will include the container width+padding+border. Whereas the border-box tell the browser to include the padding & border values with-in the declared width for e.g. 200 pixels. So, the rendered width will be 200 pixels only.
So, If you see in terms of historical perspective it behave as the earlier version of internet explorer box model whereas as the content-box is based on W3C box model computation.
Code example
<div id="container-parent"> <p>I am a parent with two children. </p> <div id="container-border-box"> <p>I am child with <code>box-sizing:border-box</code> & i stay with in parent width limit.</p> </div> <br /> <div id="container-content-box"> <p>I am child with <code>box-sizing:content-box</code> & i love to cross the parent width limit.</p> </div> </div>
#container-parent {
width: 400px;
height: 300px;
border: solid 10px DodgerBlue;
margin: 0.8em;
}
#container-parent div {
width: 100%;
border: 10px solid SlateBlue;
padding: 5px;
}
#container-border-box {
box-sizing: border-box;
}
#container-content-box {
box-sizing: content-box;
}
CSS Counters are similar to variables. It allows to number a list of element.
It is also supported by vast number of browsers IE, Edge, Firefox, Chrome, Safari & Opera. CSS counters can be used to order
It can be used in various ways to dynamically manage the information with sequential number with prefix or suffix content. It is a great addon for css authors if they are working on a content which include table of content, chapters heading and the numbering is been prefered to be handled by dynamically, rather fixing the numbers manually at each location/line in the code.
CSS has filters that can perform complex operations on raster images and svgs.
It gives tremendous power to css author to perform this operation in browser dynamically. invert()css function invert the color of input image.
filter: invert(1);
It's no surprise that this one pops up often in CSS interview questions.
To select language text direction the selector will be [dir=rtl] and followed by class .cw-alert, and to select the div except class .alert-button-container :not pseudoclass can be used as follows.
[dir=rtl] .cw-alert>div:not(.alert-button-container){
/* Your code here */
} The font family system is proposed by apple in 2015, available with prefix as -apple-system
The idea behind is to allow the web author to make use of native fonts available on different platform running the browser. The font-family system is platform-specific rather browser specific.
The same browser running on different platform/operating system will implement the generic font differently as available on that platform.
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}For more: https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
The @page at-rule is used to specify the bleed area. It is a good property to manage your content when the medium is based on print.
The bleed is the part on the side of a document that gives the printer a small amount of space.
@page {
bleed: 1cm;
} To apply stroke on text and fill color, the property text-stroke and text-fill-color can be used with prefix. The same property with prefix (-webkit) is supported by edge, firefox, chrome, safari and opera.
<div id="fill-stroke"> <h1> Stroke & Fill </h1> </div>
h1 {
font-family: Arial, Helvetica, Sans-serif;
}
#fill-stroke {
background-color: rgb(255, 255, 255);
color: rgb(102, 102, 102);
-webkit-text-stroke: 1.4px rgb(0, 0, 0);
-webkit-text-fill-color: rgb(46, 255, 60);
}Output:
A common in HTML CSS Javascript interview questions, don't miss this one.
The will-change property inform the browser which properties are expected to change via css or by javascript
<a class='demo' href='#'>Demo url</a>
.demo {
transition: opacity .2s;
opacity: 1;
font-family: Arial, Helvetica, Sans-serif;
font-size: 35px;
font-weight: bold;
color: black;
}
.demo:hover {
will-change: opacity;
}
.demo:active {
opacity: .2;
}The anchor will appear as below. With the css declaration .demo:hover the browser has been informed in advance that opacity will change and set up optimizations in advance.
And when the hyperlink is clicked, the text will have 20% opacity during the transition.
The scrollbar thumb is styled by pseudoclass ::-webkit-scrollbar-thumb
A scrollbar is made of scrollbar buttons and a track. The track is made up of track pieces and a thumb. The track pieces refer to the areas above and below the thumb.
One of the most frequently posed CSS interview question for experienced, be ready for it.
The reflow can be imagined via water. As water fit itself according to the container it is poured into. It becomes the cup when poured in cup, if poured in a glass it become glass.
Similarly the content displayed on various devices need to fit and reflow the content based on the device size. For example, by using media queries the page can be authored to reflow the content based on the device dimensions. The reflow of content is also known as responsive web design (RWD).
Reflow computes the layout of page. And it recomputes the position and dimension of the element.
object-fit is the property which handles the picture based on the available width and height.
Using fill value the aspect ratio (Width:Height) will be maintained and image will not appear distorted or squeezed, it will resized so that the longest of either the height or width can fit in the given dimensions.
Other values are cover, none, scale-down.
A staple in advanced CSS interview questions, be prepared to answer this one.
The :focus-within pseudo selector in CSS, It selects an element if that element contains any children that have :focus.
For e.g. In a form element if there is an element which is capable to receive :focus, the :focus-within will be active on form element.
When the list-style-type:lower-greek symbol is used, the list can be rendered as below.
<ol> <li>Who</li> <li>When</li> <li>Where</li> <li>What</li> <li>How</li> <li>Why</li> </ol>
li{
list-style-type:lower-greek
}Output
Based on the DOM tree, the representation is div element followed by paragraph element which is p, so the choice is (1)
HTML
<div id='container'> The Creative tension </div>
CSS
#container {
display: flex;
align-items: center;
justify-content: center;
border: 1px dotted #c1c1c1;
}Output 
To add a background color to paragraph element who has no children, we can use the following rule with :empty pseudo class.
HTML
<p></p> <p>Just</p> <p>Another world!</p>
CSS
p:empty {
width: 100px;
height: 20px;
background: whitesmoke;
}Output
The 4 child divs will be horizontally placed next to each other and will be of equal width.
The basic idea to draw a triangle using pure CSS is using border of a box with zero height and width. Let’s see the code below.
<!-- HTML Code -->
<div class="triangle"></div>
/* CSS Code */
.triangle {
height: 0;
width: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 100px solid red;
}Using the basic idea, in the above code example, we have kept the width and height as zero, where the top and bottom borders are transparent and then the right border will be responsible to display the triangle in red color. You can event toggle them by having any two of the borders as transparent and the other border with a random color. Give a try.
/* Answer */
#outer {
width: 300px;
height: 300px;
background-color: black;
position: relative;
}
#inner {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}OUTPUT:
We have a relative position to the outer div tag and an absolute position for the inner div tag. In order to place the inner div in the middle. We used the top and left at 50%. Using top and left the box position starts from the middle of the top and left which not exactly in the center. So, in order to keep the inner div exactly at the center, we need to use transform, which helps us to place the inner div exactly at the center of the outer div.
Expect to come across this popular question in HTML CSS interview questions.
Using a CSS selector alone is inefficient in some situations. So, CSS selectors become much more useful when we start combining them to perform a better selection. These relationships are indicated using CSS combinators. Below are examples of combinators.
| Name | Syntax | Selects |
|---|---|---|
| Selector List | A, B | Selects the matching element A/B. |
| Descendant Combinator | A B | Selects any element matching B that is descendant of an element matching A. |
| Child Combinator | A > B | Selects any element matching B that is the direct child of an element matching A. |
| Adjacent Sibling Combinator | A + B | Selects any element matching B that is the next sibling of the element matching A. |
| General Sibling Combinator | A ~ B | Selects any element matching B that is one of the next siblings of an element matching A. |
Pseudo-elements are used to style or modify the specific part of an HTML element using CSS. Let us take an example and understand this better.
Examples:
/* Styling the first letter of a p tag */
p::first-letter {
color: red;
}
/* Adding the content after p tag */
p::after{
content: "I'm added after the element";
}
/* Adding the content before p tag */
p:hover::before{
content: "I'm added before the element"
}Here, in the above example to add the first letter to be in red we use the first-letter pseudo-element. For which the first letter of the paragraph will be in red color. In the next example, we have after and before in which while rendering the p tag. By default, we’ll have the content in the after pseudo-element displayed at the end of the p tag. Whereas when you hover on the p tag. We’ll have the content in the before pseudo-element displayed in the beginning as we have used hover pseudo-class.
Types of selectors:
Example: h1 [Selects all the elements with h1 tag.]
Example: #first-name [Selects the element having first-name as an ID value.]
Example: .blue [selects all the elements with a class name blue.]
Example: * [Selects all the elements in the document.]
Example: a [target = “_blank”] selects all the anchor elements with attribute value is _blank.
In CSS, Gradients lets you display transition between two or more colors in a very smooth way. There are two types of Gradients in CSS3.
1. Linear Gradients – In CSS, a Linear gradient is a property value which allows directions and stops colors. The direction goes in 5 different directions up, left, right, down and diagonal any one of the value can be used and for stop colors, there should be a minimum of 2 colors to be mentioned. We can even repeat the linear gradient.
Ex: p {background-image: linear-gradient (direction, stop-color1, stop-color2, stop-color3)}
2. Radial Gradients – In CSS, a Radial gradient is a property value where the transition of the color will be defined from its center axis. By default, the shape would be an ellipse and the position would be in the center. Similar to linear gradients there should at least be two stop colors specified.
Ex: p {background-image: radial-gradient (yellow, green, blue)}
In CSS, say if you have two conflicting styles for an element, the browser should decide which one to apply and render. This is chosen by the browser-based on specificity. Specificity is nothing but a set of rules. Some of the rules are mentioned below.
In CSS, rule sets are the complete composition of writing a style to an element. Which comprises of selector along with a pseudo-class or a pseudo-element, declaration block with style properties and values.
CSS stands for “Cascading Style Sheet”. It is used to format the display of HTML elements on screen paper or in any other media, as well as control the layout of multiple web pages. CSS programmers aid in creating user-friendly web applications for clients. This field requires a basic associate’s degree or a bachelor's degree.
Every business is trying to make websites that are user engaging. An attractive website increases the engagement time as the customer spends some time exploring it. For a company, it’s necessary to have a different kind of professionals from the different fields of expertise. Today there is a huge demand for CSS composers and designers. The average pay for an HTML CSS Developer is $60,571 per year. With a huge demand, there is also an increased number of CSS- related job interviews occurring.
That’s why we have talked about some of the most popular CSS interview questions. These Interview questions on CSS will be the best source for your preparation.
CSS interview questions and answers here covers almost all the basic and advanced level questions. Every candidate faces jitters when it comes to CSS interviews. If you are planning to build a career as a CSS programmer and are facing troubles in cracking the CSS interview, then practice these Interview questions on CSS.
To give you an idea of the type of questions which may be asked in an interview we have bought you a list of advanced CSS interview questions which are framed by experts. These are the best samples of advanced CSS interview questions and answers.
We are sure that these CSS interview questions for freshers and experienced will help you to crack your next CSS job interview. Many certifications are available in this technology. There is a huge demand for this technology in the market. You can also take up HTML/CSS Training which will enhance your skills.
Crack your CSS interview easily. All the best!
Get a 1:1 Mentorship call with our Career Advisor
Book free session
And when the hyperlink is clicked, the text will have 20% opacity during the transition.
