CSS3 interview questions

CSS3 interview questions | Freshers & Experienced

  • Subrata Dutta
  • 13th Nov, 2019
  • 615 Followers

CSS3 Interview Questions

Q1. What is CSS3?

CSS3 is an upgraded version of CSS. In CSS3 new features and enhancement are done to improve the presentation of websites.

Q2. What is difference between css and css3?

Difference between CSS and CSS3

CSS: It is a basic version of the component and it will not support responsive design. There are no specific modules for CSS

CSS3: It is the latest version and a more updated form of component. It easily supports responsive design and it can be split into several modules as per the user’s convenience.

Q3. What are Transitions in CSS3?

Q4. What is universal selector in CSS3?

A universal selector is used to apply CSS on all elements of HTML. It is beneficial when you want to apply a set of styles to every element of the webpage. In CSS an asterisk(*) is used to denote a universal selector.

Example of Universal selector

* {
color: black; 
background: red; 
}

The above line of code will change the color of every element of an HTML page to black and background color to red.

Q5. Enlist common pseudo classes in CSS?

Below are few common pseudo-classes used in CSS.

:active, :host, :current, :only-child, :empty, :first, :first-child, :first-of-type, :nth-of-type(). 

Read Complete list of pseudo-classes from https://developer.mozilla.org

Q6. What is the syntax to add opacity in CSS3?

Opacity property in CSS defines transparency of an element. The default Opacity value of an element is 1 which means the element is 100% opaque.

Below is the syntax to add opacity to an element in CSS

#mydiv{
 opacity: 0.5; 
}

Q7. What is animation in CSS3?

Animation is a property in CSS which is used to animate other properties of an element like color, height, width, background, visibility, etc without using Javascript.

Below is an example of animation in CSS

.animate-div {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
	height:5px;
	width:5px;
  }
  10% {
    background-color: #001F3F;
	height:10px;
	width:5%;
  }
  40% {
    background-color: #001F3F;
	height:20px;
	width:20%;
  }
   70% {
    background-color: #001F3F;
	height:35px;
	width:35%;
  }
  100% {
    background-color: #FF4136;
	height:50px;
	width:100%;
  }
}

Q8. Enlist major modules avaialable in CSS3?

Below is the list of some important CSS3 modules :

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Q9. What are the possible values of the Position attribute in CSS3?

Q10. What is Flexbox in CSS3?

Flexbox Layout is a module in CSS that makes a flexible responsive layout structure easy to design without using float. It helps CSS developers to create complex layouts with less line of code.

Before Flexbox Layout was introduced there are four layout modes which are block, inline, t and positioned. Flexbox layout properties are supported by all modern browsers.

Q11. What are new box model properties introduced in CSS3?

Q12. What are Gradients in CSS? How to add Linear gradient in CSS3?

CSS Gradients allow us to create smooth transitions between two or more colors. In CSS you can create two types of gradients which are Linear Gradients and Radial Gradients.

Linear Gradients: It create color transitions in down/up/left/right/diagonally directions.

Example:

#linear-gradient {
  background-image: linear-gradient(yellow, blue);
}

Radial Gradients: A radial gradient is defined by center. Minimum 2 colors are required to create it. By default the shape of Gradient is an ellipse, size is farthest-corner, and position is center.

Example:

#radial-gradient {
  background-image: radial-gradient(yellow 5%, blue 15%, green 70%);
}

Q13. How to clear float in CSS3?

Q14. Explain transform property in CSS3?

Q15. What are Web Fonts?

Web fonts are special types of fonts that are not available on the computer. You can use Web fonts websites using the CSS @font-face declaration. Different Font Formats available for web fonts are TTF, OTF, WOFF, SVG Fonts, EOT.

About Author :

  • Author of CSS3 interview questions

    Subrata Dutta

    Subrata Dutta is IT Project Manager from Noida, Uttar Pradesh, India. He is an exceptional team player who is proactive, efficient, methodical and has strong interpersonal & people management skills.

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.