What is Flex layout? Difference Flex and grid layout?

Ans: Flex layout is a one-dimensional layout method for arranging items in rows or columns.
Flexbox is designed for one-dimensional layout whereas grid is 2 dimensional layout. Flexbox is designed for small scale layout while grid is for large scale layout.

Explain CSS position property? What are some differences between absolute position and relative position?

Ans: CSS position property defines the position of an element in document. It works with top, bottom, left , right and Z-index to determine the final position of an element on a page. There are five different properties value which are static, relative, absolute, sticky, fixed.

Relative position places an element relative to it’s current position without changing the layout around it whereas Abosolute position places an element relative to its parent’s position with changing the layout around it.

What is a box model? And what are the different elements of a box model?

Ans: Around every HTML element a rectangle box is wrapped. The box model consists of width and height of rectangle box and is used to determine width and height of the rectangle box.
There are main four elements in a box model which are content, padding, border, margin

What is a Hover effect? What is the purpose of the active class?

Ans: CSS hover effect takes place when an user hover over the element and the element responds with transition effects. It is used to mark an element on web page and it is an effective way to improving user experience.

The use of :active pseudo-class to select an element which is activated when the user clicks on it.

What are the different types of Selectors in CSS?

Ans: There are different types of Selectors in CSS which are listed below.

Universal Selector: The provided style will be applied to all elements by selecting all elements on a page

Element type Selector: The element selector selects HTML elements based on the element name.

ID Selector: The id selector uses the id attribute of an HTML element to select a specific element.

Class Selector: The class selector selects HTML elements with a specific class attribute.

Grouping Selector: The grouping selector selects all the HTML elements with the same style definitions.

What is CSS Specificity?

Ans: It is a process of determining which CSS rule will be applied to an element.

What is a CSS Preprocessor? What are some benefits of Sass?

Ans: A CSS preprocessor is a scripting language that extends CSS and is compiled into regular CSS syntax.

There are some benefits of Sass which are given below.
To write clean, easy and less CSS in a programming construct
Contain fewer codes and help to write CSS quicker
Compatible with all version of CSS so that any available CSS libraries can be used.

More stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.

What is a Pseudo element? What is pseudo-class?

Ans: Pseudo Element: Task of Pseudo element create items that do not normally exist in the document tree. For example ::after, ::before, ::first-letter, ::first-line, ::selection

Pseudo Class: Pseudo class help us to select regular items under certain conditions. For example :hover, :focus, :link, :active, :visited

How will you use media queries to make a website responsive?

Ans: There are many ways of media queries to make website responsive which are

• Using min-width and max-width media queries
• Multiple media queries for one call
• Media queries for landscape layout
• Media queries for portrait layout

How will you make font size responsive?

Ans: Two best way to make font size responsive which is listed below:
By using vwunit for font size as a result font size will follow the size of browser window

Using media queries font size can be changed so that font size can vary on specific devices.

What are the difference between reset CSS and normalze CSS?
Ans: Normalize CSS means to make built-in browser styling whereas Reset CSS means to remove built-in browser styling

How is the different border-box from content-box?

Ans: In content-box, there is height and the width properties consist only of the content by excluding the border and padding whereas border-box property includes the content, padding and border in the height and width properties

Why should we use floating property in CSS?

Ans: For positioning HTML elements horizontally either towards the left or right of the container.

What are the different ways to hide elements using CSS?

Ans: By using display:none, visibility:hidden, position:absolute

What is cascading in CSS?

Ans: Cascading is a process of style declarations and defining weight or importance to the styling rules that help the browser to select what rules have to be applied in times of conflict.

What is differences between nth-child() and nth-of-type?

Ans: The purpose of nth-child() pseudo-class is to match elements based on the number that represents the position of an element based on the siblings. The number is used to match an element on the basis of the element’s position amongst its siblings.

However, The nth-of-type() pseudo-class helps in matching the selector based on a number that represents the position of the element within the elements that are the siblings of its same type. The number can also be given as a function or give keywords like odd or even.

What does ! important means in CSS?

Ans: Important will have the highest precedence and it overrides cascading property.

What is the importance of CSS sprites?

Ans: CSS sprites is used for combining multiple images in a single larger image. Actually, it helps to represent icons that are used in the user interfaces. It reduces the number of HTTP requests to get data of multiple images.

How does Z-index function?

Ans: While using CSS for positioning HTML elements, overlapping may occur. Z-index helps in specifying the overlapping element. The number of Z-index can be negative or positive and the default value is zero.

What is the difference between padding and margin?

Ans: Padding creates space around the content of elements whereas margin creates space around elements. So we can say that margin generates space outer side of content of element but padding generates space inner side of content