Skip to main content



You make also like this CSS interview question set 1.

Let's begin with set 2,

5)What is the difference between opacity 0 vs display none vs visibility hidden?

Property           | occupies space | consumes clicks |


| opacity: 0         |        yes      |        yes       |


| visibility: hidden |        yes       |        no        |


| display: none      |        no       |        no        |

When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc.

In essence "visibility: hidden" behaves like a combination of "opacity: 0" and "pointer-events: none".

6)CSS 3 new features?

CSS3 allows developers to style HTML elements easier. 
They are less dependent on image files 
and can complete CSS styling with fewer lines of code.
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. 
It brings a lot of new features and additions, like rounded corners, shadows, gradients,
 transitions or animations, as well as new layouts like multi-columns, 
flexible box or grid layouts.

Box Shadow
One of the CSS3 new features is the box-shadow property that adds a shadow to an element. Instead of using multiple images around an item, this property lets you add shadow with a short line of code.

One of the CSS3 properties called opacity makes elements see-through or completely transparent.

For instance, you can apply opacity to images or other HTML elements. The transparency level depends on the indicated values.

Rounded Corners
Before the release of CSS3, developers had to write long code to produce rounded corners.
 Now, it is enough to apply the border-radius CSS3 property to HTML elements.

New Colors
One of the CSS3 features is the addition of new colors:

Gradient Colors

Attribute Selectors:
CSS3 also introduced new selectors in addition to the ones in CSS2.
Instead of applying IDs or classes for styling, developers can select HTML elements according to their attributes.

Refer to this link for a detailed study.

7)Css 3 flexbox ?

The Flexible Box Layout Module, 
makes it easier to design flexible responsive layout structure without
using float or positioning.
Before the Flexbox Layout module, there were four layout modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for the explicit position of an element
a)To start using the Flexbox model, you need to first define a flex container.
b)The flex container becomes flexible by setting the display property to flex:

Check this link for more details

I hope you like this article.
Please stay connected for the CSS interview questions set 3.
You can also follow me on Twitter or Linkedin for the latest updates.

Written By:

Saurabh Joshi


Popular posts from this blog

Node JS:Understanding bin in package.json.

Well as a Node Js developer we know package.json as dependency file where we keep a note of all dependencies of our project. Here we will be looking at what is bin in package.json? To understand this we first need to understand command line application and it's purpose. CLI applications are mostly used to automate things such as deployments of application,running tests,building reports and the list goes on and on. So lets start with creating our first CLI application. First, let’s make sure you have the tools required. To complete this tutorial, you will need the following: 1)A recent version of Node.js downloaded and installed 2)A good text editor, such as Visual Studio Code Next, open your computer’s command prompt (Windows) or terminal (macOS/Linux). Change the current directory to the folder where you save your documents or projects. Enter the following commands to create a new project folder and initialize the project. mkdir hello-cli cd hello-cli npm init Nex

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som

Node.js: create an excel file with multiple tabs.

This article is a sample code to generate an excel file with multiple tabs using  excel4node  module. Install: npm i excel4node Let's see the sample code, var excel = require( 'excel4node' ); // Create a new instance of a Workbook class var workbook = new excel.Workbook(); // Add Worksheets to the workbook var worksheet = workbook.addWorksheet( 'Buy order types' ); var worksheet1 = workbook.addWorksheet( 'Sell order types' ); // Style for headers var style = workbook.createStyle({ font : { color : '#EA3A14' , size : 18 }, numberFormat : '$#,##0.00; ($#,##0.00); -' }); var styleForData = workbook.createStyle({ font : { color : '#47180E' , size : 12 }, alignment : { wrapText : true , horizontal : 'center' , }, numberFormat : '$#,##0.00; ($#,##0.00); -' }); let buyOrderTypes = [ {name : "buy" ,id : "1" ,comment : "Normal