Interview Preparation — CSS Questions-2

Welcome to part-14 of the series and the second part in CSS questions. You can find part-13 here.

Question 86- What is specificity in CSS?
Answer- If you have for an HTML element, having two conflicting styles then the browser decides which one to apply based on it’s specificity. Specificity is nothing but set of rules the browser has. Let’s look into the important rules here -

Last Style Rule
If we have two same styles applied to an element, then the browser picks the last style. Consider the below example and the “background: red” will be picked by the browser.

Image for post
Image for post
Last Style

Class rule
If one of the rule have class property, then it’s specificity becomes high and it is displayed by browser.

Image for post
Image for post
Class rule

ID rule
If we have an ID property in the element, it’s specificity is more then the class. So, browser will pick it up.

Image for post
Image for post
ID rule

!important rule
The highest specificity is of the !important. If applied to any element, the browser will pick that rule.

Image for post
Image for post
!important rule

You can find jsfiddle for the same here.

Question 87- How to centrally align a block element inside another element in using plain CSS?
Answer- We will first have two <div>,one an outer and other an inner. The basic style will cause the inner <div> to be placed at the top-left.

Image for post
Image for post
Initial step

To make it exactly at the centre, the outer div will have a “position: relative” and inner div will have a “position: absolute”. Then we will move the inner div to “top: 50%”. It will result in the below.

Image for post
Image for post
top: 50%

Next we will move it to “left: 50%”. It will result in the below. As you might have notice it is not exactly centre, because the box was moved top and left from it’s edge.

left: 50%

To exactly centre it we will use the “tranform” property to move the div.

Image for post
Image for post
transform: translate(-50%, -50%)

You can find the JSfiddle for the above here.

Question 88- How to centrally align a block element inside another element in using flexbox or CSS Grid?
Answer- Using flexbox or CSS Grid to centrally align a block element inside another element is very easy. We will use two properties —“ justify-content” and “align-items”. One is used to align along the row axis and other along the column axis.

Image for post
Image for post
Using flexbox

The same can be done using CSS grid as it also have those two properties.

Image for post
Image for post
Using CSS Grid

Question 89- What is the difference between static, relative, absolute and fixed position?
Answer- By default the position property of elements are static. So, if we have 3 elements then they will have a basic flow as shown in below jsfiddle.

Image for post
Image for post
position: static

position: relative
Let’s change the position of second element to relative and move it 50px from top. As you might have notice that it moved 50px down from it’s original position, without affecting the element “one” and “three”. So, “position: relative” doesn’t disturbs it’s environment that much. The JSfiddle for the same is here.

Image for post
Image for post
position: relative

position: absolute
We will now change the position of second element as absolute. When we give “two” absolute, then “three” moves up below of “one”, as if “two” doesn’t exists. I have given “two” some opacity, so that we can see what happening behind it. So, “position: absolute” does disturbs it’s environment as it is referenced to it’s parent. The JSfiddle for the same is here.

Image for post
Image for post
position: absolute

position: fixed
The position fixed is like absolute but it is referenced to the entire page and not to it’s parent like absolute. So, it will stay at it’s position even after whatever happen to other elements. We will replicate the “three” element many times to see what happen. Now, scroll the jsfiddle and you will notice that “two” stays at it’s place. This is very useful position property to have a always present header navbar, even after scrolling down the page. Or to display a pop-up.
The JSfiddle for the same is here.

Image for post
Image for post
position: fixed

Question 90- What is the difference between visibility: hidden and display: none?
Answer- With “visibility: hidden” set to an element, the element hides but it’s space is left blank and an empty space is visible.
But with “display: none”, it is totally removed from the DOM and no space is shown behind. The below jsfiddle displays the same.

Image for post
Image for post
visibility: hidden and display: none

Question 91- What is shadow DOM?
Answer- CSS is basically global. If i write an style for one element, it can effect other element. The Shadow DOM is a way to attach hidden separated DOM to an element, so that the CSS stays encapsulated.

Let’s look at the below example. Here we have an <h3> “Welcome to Our Website”, which takes style from the global CSS and displayed as blue.
Now, we have a template which we have programmatically inserted into id “shadowHost” . It have it’s own <h3> style, so “News Widget” get displayed in green text. This is how we achieve shadow DOM.
The JSfiddle for the same can be found here.

Image for post
Image for post
shadow DOM

Question 92- How to built triangle using plain CSS?
Answer- We will first have a simple <div>, which will be a square box with equal width and height as shown below.

Image for post
Image for post
Square Box

Now we will have all borders of different color.

Image for post
Image for post
borders of different color

Now, we will make the height and width of 0. We will now see four small triangles.

Image for post
Image for post
four small triangles

Now, we increase the size of border and we will get four big triangles.

Image for post
Image for post
four big triangles

So, now we can show any of the triangle we need. We first removed the “background: red”. Then we have to remove the opposite triangle of the triangle which we need and also to make the other two transparent. Below is what we need to do for a “Blue Triangle”.

Image for post
Image for post
Blue triangle

The below is what need to be done for “Green Triangle”.

Image for post
Image for post
Green Triangle

Question 93- What are pseudo elements in CSS?
Answer- Pseudo elements are used to give you selector some special effects and it will allow some extra markup for the elements without disturbing it’s environment.

In the example below we have two pseudo elements ::after and ::before. As, per there name they inject content after and before an element respectively.

Image for post
Image for post
::after and ::before

One of the practical use of pseudo elements is to create a tooltip. We can create tooltip with help of pseudo class hover as below. Now, when we hover over the button, the “Welcome” changes to “Welcome My Martian friend”

Image for post
Image for post
tooltip using hover

You can find the JSfiddle for the above here.

Question 94- What are data attributes and there utilities?
Answer- In HTML if you want to store data, you can use data attributes. You can see in the below example, we have a button with various data attributes. Note that data attributes always starts with keyword “data”. Now, we can access the data attributes inside our CSS like a variable using “attr”. We used the dat attribute to create a tooltip, which will add data-name(Nabendu) to Profile if we hover over it.

data attributes

After hovering, it shows as below.

Image for post
Image for post
After hovering

The JSfiddle for the above is here.

Question 95- What is z-index?
Answer- The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Let’s consider the below jsfiddle. There are four element stack over each other, but we are able to see only “D” as it is the last one.

Image for post
Image for post
Four element stack over each other

We will add some left to 3 element to be able to see the elements.

Image for post
Image for post
left to see elements

Now, we will see the z-index property. All four elements have a z-index 0 by default. We are making z-index: 1 for “C”. Now, “C” with green background will come on top.

Image for post
Image for post
z-index: 1

We are now making element “B” with aqua background, z-index:2 so now it will show as it is having the highest z-index.

Image for post
Image for post
z-index:2

The jsfiddle for the above is here.

This concludes the part-14 of the series and final part of CSS questions. You can find part-15 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store