CSS Interview Questions

Web developers familiar with CSS are in high demand in the market. These CSS interview questions and answers will validate your knowledge of two column layout, h2.ping ~ h4, h1 + h2, the different selector types exist in CSS, etc to your potential employers. Our experts have compiled the best possible interview questions on CSS with detailed answers that will help you crack your CSS Interview and get hired as an HTML CSS developer or a web developer in general.

  • 4.8 Rating
  • 25 Question(s)
  • 32 Mins of Read
  • 3294 Reader(s)

Beginner

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 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>

The aspect ratio is defined as the ratio of width media feature to the ratio of height media features W:H.

And the aspect ratio 16/9 is 42:32

The below Media query allows to target the media query based on device-aspect-ratio which is 16/9

@media screen and (device-aspect-ratio: 16/9) {
  /* Your code here */
}

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:

  •          Hexadecimal colors color: #000000;
  •          RGB colors color: rgb(100, 115, 220);
  •          RGBA colors color: rgba(0, 0, 1, 0.6);
  •          HSL colors color: hsl(34, 100%, 23%);
  •          HSLA colors color: hsla(34, 100%, 53%, 0.5);
  •          Predefined/Cross-browser color names color: burlywood;

Question Continued:

  1. object-fit
  2. font-variation-settings
  3. transform
  4. opacty

Answer:

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; 
}

Advanced

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:

HTML

<div class="row"> 
  <div class="column">
    Left column
  </div>
 
  <div class="column">
    Right column
  </div>
 
</div>

CSS

.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 */
}

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:

  1. Universal 
  2. Element or Type selector
  3. ID
  4. Class
  5. Descendant combinator
  6. Child combinator
  7. General Sibling combinator
  8. Adjacent Sibling combinator
  9. Attribute selector
  10. Pseudo-class
  11. Pseudo-element

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 */
}

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:

HTML

<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;
}

CSS

.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                

HTML

<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>&nbsp;&amp; 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>&nbsp;&amp; i love to cross the parent width limit.</p>
  </div>
</div>

CSS

#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 which can perform complex operation on raster images and svgs.

It gives tremendous power to css author to perform these operation in browser dynamically. invert()css function invert the color of input image.

 filter: invert(1);

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;
}

CSS paint api allows to programmatically generate an image via css.
The author can create their own paint worklet which is written in javascript and that code can be used with background-image: paint(checkerboard).

The css paint api is still an evolving technology and google chrome is leading the pack among the browser.
https://ishoudinireadyyet.com/

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.

HTML

<div id="fill-stroke">
  <h1>
    Stroke &amp; Fill
  </h1>
</div>

CSS  

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:

The will-change property inform the browser which properties are expected to change via css or by javascript

HTML

<a class='demo' href='#'>Demo url</a>

CSS

.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;
}

DEMO:

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 variable font is a single font, yet it can exhibit multiple appearance. It can be considered as evolution of Open type fonts.

The permutation of appearance is stored in a single font and the file size may be larger than the traditional font.

It gives css authors to vary the size and appearance based on content and context while working with single font.

font-variation-settings provides low level control to modify the weight (thickness), font stretch and other related properties which are manipulated by axis of variation (identifiable by axis tag).

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 refers to the areas above and below the thumb.

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.

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.

HTML 

<ol>
<li>Who</li>
<li>When</li>
<li>Where</li>
<li>What</li>
<li>How</li>
<li>Why</li>
</ol>

CSS

 li{
  list-style-type:lower-greek
}

Output

Question Continued:

  1. div > p
  2. div + p
  3. div.p

Answer:

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

Question Continued:

HTML

<div class="layout">
  <div class="a box">A</div>
  <div class="b box">B</div>
  <div class="c box">C</div>
  <div class="d box">D</div>
</div> 

CSS

body {
  margin: 0;
  font-family: Arial;
  background-color: #f2f2f2;
}
.box {
  color: #fff;
  padding: 1em;
  text-align: center;
  background-color: #efefef;
}
.a {
  background-color: purple;
}
.b {
  background-color: violet;
}
.c {
  background-color: burlywood;
}
.d {
  background-color: gainsboro;
} 
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100vh;
}

Answer:

The 4 child divs will be horizontally placed next to each other and will be of equal width.

Description

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!

Read More
Levels