CSS3, Most Common Interview Questions & Answers

1. What is CSS?

CSS outlines the style of an HTML webpage. It is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen. CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading Style Sheet.

2. What is the differences between CSS2 and CSS3?

• CSS3 is divided into two various sections which are called a module. Whereas in CSS2 everything accedes into a single document with all the information in it.
• CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.
• In CSS3, we will find that many graphics related characteristics have been introduced like Border-radius or box-shadow, flexbox.
• In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.

3. What is CSS Box Model and what are its elements?

This box defines design and layout of elements of CSS. The elements are:

• Margin: the top most layer, the overall structure is shown
• Border: the padding and content option with a border around it is shown. Background color affects the border.
• Padding: Space is shown. Background colour affects the border.
• Content: Actual content is shown.

4. What is the Box model in CSS?

A rectangle box is wrapped around every HTML element. The box model is used to determine the height and width of the rectangular box. The CSS Box consists of Width and height (or in the absence of that, default values and the content inside), padding, borders, margin.

• Content: Actual Content of the box where the text or image placed.
• Padding: Area surrounding the content (Space between the border and content).
• Border: Area surrounding the padding.
• Margin: Area surrounding the border.

5. What is the difference between padding and margin?

In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.

In CSS, we have margin property as follows:

• margin-top
• margin-right
• margin-bottom
• Margin-left

In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border.

CSS padding also has properties like,

• Padding-top
• Padding-right
• Padding-bottom
• Padding-left

Negative values are not allowed in padding.

6. What is a CSS Preprocessor?

A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like — variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS.

SASS: Sass is the acronym for “Syntactically Awesome Style Sheets”. SASS can be written in two different syntaxes using SASS or SCSS

7. What is VH/VW (viewport height/ viewport width) in CSS?

It’s a CSS unit used to measure the height and width in percentage with respect to the viewport. It is used mainly in responsive design techniques. The measure VH is equal to 1/100 of the height of the viewport. If the height of the browser is 1000px, 1vh is equal to 10px. Similarly, if the width is 1000px, then 1 vw is equal to 10px.

8. Difference between reset vs normalize CSS?. How do they differ?

Reset CSS: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same.

Normalize CSS: Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.

9. What is the difference between inline, inline-block, and block?

Block Element: The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are <div>, <p>.

Inline Elements: Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <span> , <strong>, and <img> tags.

Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.

10. How do you test the webpage in different browsers?

It’s most important to test a website in different browsers when you’re first designing it, or when making major changes. However, it’s also important to repeat these tests periodically, since browsers go through a lot of updates and changes.

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

Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.

• :link
• :visited
• :hover
• :active
• :focus

Example of the pseudo-class, In the below example, the color applies to the anchor tag when it’s hovered.

12. How do you specify units in the CSS?. What are the different ways to do it?

There are different ways to specify units in CSS like px, em, pt, percentage (%). px(Pixel) gives fine-grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade. em maintains relative size. you can have responsive fonts. Em, will cascade 1em is equal to the current font-size of the element or the browser default. If u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px).

13. Does margin-top or margin-bottom have an effect on inline elements?

No, it doesn’t affect the inline elements. Inline elements flow with the contents of the page.

14. Explain CSS position property?

Absolute: To place an element exactly where you want to place it. absolute position is actually set relative to the element’s parent. if no parent is available then the relative place to the page itself (it will default all the way back up to the element).

Relative: “Relative to itself”. Setting position: relative; on an element and no other positioning attributes, it will no effect on its positioning. It allows the use of z-index on the element and it limits the scope of absolutely positioned child elements. Any child element will be absolutely positioned within that block.

Fixed: The element is positioned relative to the viewport or the browser window itself. viewport doesn’t change if you scroll and hence the fixed element will stay right in the same position.

Static: Static default for every single page element. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control.

Sticky: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

15. What does DOM reflow occur?

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.

Reflow occurs when:

• Insert, remove or update an element in the DOM.
• Modify content on the page, e.g. the text in an input box.
• Move a DOM element.
• Animate a DOM element.
• Take measurements of an element such as offsetHeight or getComputedStyle.
• Change a CSS style.

16. Different Box Sizing Property?

The box-sizing CSS property sets how the total width and height of an element are calculated.

Content-box: The default width and height values apply to the element’s content only. The padding and border are added to the outside of the box.

Padding-box: Width and height values apply to the element’s content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.

Border-box: Width and height values apply to the content, padding, and border.

17. Can you name the four types of @media properties?

The four types of @media properties are:

All → It’s the default property. Used for all media-type devices.

Screen → Used for computer screen, mobile screen.

Print → Used for printers.

Speech → Used for screen readers.

18. What is the grid system?

CSS Grid Layout is the most powerful layout system available in CSS. It is said to be a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

19. What are the different ways to hide the element using CSS?

Using display property(display: none). It’s not available for screen readers. The element will not exist in the DOM if display: none is used.

Using visibility property(visibility: hidden), will take up the space of the element. It will be available to screen reader users. The element will actually be present in the DOM, but not shown on the screen.

Using position property (position: absolute). Make it available outside the screen.

20. What does the :root pseudo-class refer to?

The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 specification.

21. What do CSS Custom properties variables mean?

Custom properties (sometimes referred to as CSS variables or cascading variables) are defined by users that contain specific values to be reused throughout a document. The value is set using — notion. And the values are accessed using the var() function.

22. What does Accessibility (a11y) mean?

Accessibility refers to how software or hardware combinations are designed to make a system accessible to persons with disabilities, such as visual impairment, hearing loss, or limited dexterity.

For example, a website developed with accessibility in mind might have text-to-speech capabilities. In the USA public websites have to have accessible compliance. It’s defined in 508 compliance. It gives the guidelines and best practices for all website users that should be met with key areas of accessibility.

23. How do I restore the default value of a property?

The keyword initial can be used to reset it to its default value.

24. Difference between CSS grid vs flexbox?

CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows. Grid layout is intended for larger-scale layouts which aren’t linear in design.

Flexbox is largely a one-dimensional system (either in a column or a row). Flexbox layout is most appropriate to the components of an application.

25. How does Calc work?

The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element’s width, we can use calc() to specify that the width is the result of the addition of two or more numeric values.

26. What is specificity? How to calculate specificity?

A process of determining which CSS rule will be applied to an element. It actually determines which rules will take precedence. Inline style usually wins then ID then the class value (or pseudo-class or attribute selector), the universal selector (*) has no specificity. ID selectors have a higher specificity than attribute selectors.

27. What is the difference between CSS variables and preprocessor(SASS, LESS, Stylus) variables?

CSS variables can be used without the need of the preprocessor. Currently, all the major browsers support the CSS variables.

CSS variable cascade. But the preprocessor variables don’t cascade.

CSS variable can be accessed and manipulated javascript.

28. What does * { box-sizing: border-box; } do? What are its advantages?

It makes every element in the document include the padding and border in the element’s inner dimension for the height and width computation. In box-sizing: border-box, The height of an element is now calculated by the content’s height + vertical padding + vertical border width.

The width of an element is now calculated by the content’s width + horizontal padding + horizontal border width.

29. What does important mean in CSS?

The style is having the important will have the highest precedence and it overrides the cascaded property.

28. What does * { box-sizing: border-box; } do? What are its advantages?

It makes every element in the document include the padding and border in the element’s inner dimension for the height and width computation. In box-sizing: border-box, The height of an element is now calculated by the content’s height + vertical padding + vertical border width.

The width of an element is now calculated by the content’s width + horizontal padding + horizontal border width.

29. What does important mean in CSS?

The style is having the important will have the highest precedence and it overrides the cascaded property.

30. What is progressive rendering? How do you implement progressive rendering in the website?. What are the advantages of it?

Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.

We can implement the progressive rendering of the page by loading the lazy loading of the images. We can use Intersection Observer API to lazy load the image. The API makes it simple to detect when an element enters the viewport and take an action when it does. Once the image enters the viewport, we will start loading the images.

31. What is CSS opacity?

It is the property that elaborates on the transparency of an element. By this property, we can transparent the image that can take the values from 0.0–1.0. If the value is lower, then the image is more transparent. IE8 and earlier versions of the browser can take the values from 0–100.

32. What are the advantages of using translate() instead of absolute position?

Translate() does not cause the browser to trigger repaint and layout and instead only acts on the compositor. The absolute position triggers the repaint or DOM reflow. So, translate() gives the better performance.

33. What is the ‘important’ declarations in CSS?

Important declarations are defined as that declaration which is having more importance than the normal declaration. While executing, these declarations override the declaration which is having less importance.

34. What is the Difference between inline and block elements?

Inline element does not have an element to set width and height and also it does not have the line break.

Block element specification:

• They do have the line break.
• They define the width by setting a container and also allow setting height.
• It can also contain an element that occurs in the inline element.

35. What is the CSS image scripts?

CSS image scripts are a group of images that are placed into one image. It reduces the load time and request number to the server while projecting multiple images into a single web page.