10 Most Asked Important CSS Interview Questions & Answers

1.What is difference between CSS and CSS3?

S.No.CSSCSS3
1CSS is capable of positioning texts and objects. CSS is somehow backward compatible with CSS3.On the other hand, CSS3 is capable of making the web page more attractive and take less time to create it. If you write CSS3 code in CSS, it will be invalid.
2Responsive designing is not supported in CSSCSS3 is the latest version, hence it supports responsive design.
3CSS cannot be split into modules.Whereas, CSS3 can be breakdown into modules.
4Using CSS, we cannot build 3D animation and transformation.But in CSS3 we can perform all kinds of animation and transformations as it supports animation and 3D transformations.
5CSS is very slow as compared to CSS3Whereas, CSS3 is faster than CSS.
6In CSS we have a good collection of unique color schemas and standard color.Whereas, CSS3 has a good collection of HSL RGBA, HSLA, and gradient colors.
7In CSS we can only use single text blocks.But in CSS3 we can use multi-column text blocks
8CSS does not support media queries.But CSS3 supports media queries
9CSS codes are not supported by all types of modern browsers.Being the latest version, CSS3 codes are supported by all modern browsers.
10In CSS, designers have to manually develop rounded gradients and corners.But CSS3 provide codes for setting rounded gradients and corners
11There is no special effect like shadowing text, text animation, etc. in CSS. The animation was coded in jQuery and JavaScript.CSS3 has many advance features like text shadows, visual effects, and a wide range of font style and color.
12In CSS, the user can add background colors to list items and lists, set images for the list items, etc.Whereas, CSS3 list has a special display property defined in it. Even list items also have counter reset properties.

2. What are the selector in CSS?

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

3. What is media query in CSS?

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false. The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true.

4. What is different position in CSS?

The position property in CSS tells about the method of positioning for an element or an HTML entity. There are five different types of position property available in CSS:

  • Fixed
  • Static
  • Relative
  • Absolute
  • Sticky

The positioning of an element can be done using the toprightbottom, and left properties. These specify the distance of an HTML element from the edge of the viewport. To set the position by these four properties, we have to declare the positioning method. Let’s understand each of these position methods in detail:

Fixed: Any HTML element with position: fixed property will be positioned relative to the viewport. An element with fixed positioning allows it to remain at the same position even we scroll the page. We can set the position of the element using the top, right, bottom, left.

5. What is bom in CSS?

The Browser Object Model (BOM) is used to interact with the browser.

The default object of browser is window means you can call all the functions of window by specifying window or directly. For example:

  1. window.alert(“hello javatpoint”);  

is same as:

  1. alert(“hello javatpoint”);  

6. What is difference between PX, unit, em, rem in CSS?

px is not scalable, it is an absolute unit. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user setting. Element ( em ) and Root element ( rem ) are responsive units interpreted into equivalent px unit by the browser.

7. What is flex box in CSS?

CSS flexbox is a one-dimensional layout pattern that makes it easy to design flexible and effective layouts. The use of flexbox ensures that elements are properly placed and are predictable. Flex items are positioned inside a flex container along a flex line. By default, there is only one flex line per flex container.

8. What is pseudo selector in CSS?

CSS pseudo-classes are used to add styles to selectors, but only when those selectors meet certain conditions. A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed by a pseudo-class such as “hover”, “focus”, or “active”, like this: a:hover { /* your style here */ }

9. How to make website responsive?

  1. Set Appropriate Responsive Breakpoints
  2. Start with a Fluid Grid
  3. Take touchscreens into consideration
  4. Use Responsive Images and Videos
  5. Define Typography
  6. Use a pre-designed theme or layout to save time
  7. Test Responsiveness on Real Devices

10. What are breakpoint for viewport responsive device?

In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience. For example, when the website of The New Yorker is viewed on a regular desktop screen, the user sees the whole navigation menu on the sidebar

11. Why we use box-sizing in CSS?

The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock