CSS3 Interview Questions

CSS3 Interview Questions | Freshers & Experienced

  • Subrata Dutta
  • 06th Dec, 2021

About Css3

CSS3 is the Cascading Style Sheets language's latest evolution and aims to extend CSS2.1. It brings many new features and additions, such as rounded corners, shadows, gradients, transitions or animations, and new layouts such as multi-columns, flexible boxes, or grid layouts.

Key Features of Css3

Below are few major features of Css3

Box Shadows

Rounded Corners

Background Gradients

Animations and Transitions

Advanced Selectors



Media Queries

3D Transforms

Practice Best CSS3 Interview Questions & Answers;

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?

In CSS, transitions are used to provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

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

 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;
  10% {
    background-color: #001F3F;
  40% {
    background-color: #001F3F;
   70% {
    background-color: #001F3F;
  100% {
    background-color: #FF4136;

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?

There are possible values of the Position attribute in CSS3. These Position attributes are as follows:

  • Relative
  • Fixed
  • Inherit
  • Static
  • Absolute

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?

The new box model properties introduced in CSS3 are as follows:

Border - A border that goes around the padding and content.

Margin - Clears an area outside the border. The margin is transparent.

Content - The content of the box, where text and images appear.

Padding - Clears an area around the content. The padding is transparent.


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.


#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.


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

Q13. How to clear float in CSS3?

The value of the property clear specifies the side on which the floating element is to be cleared. These are as follows:

None - the element is not moved down to clear past floats.

Left - the element is moved down to clear past left floats.

Right - the element is moved down to clear past right floats.

Both - the element is moved down to clear past both left and right floats.


Q14. Explain transform property in CSS3?

In CSS the transform property can be explained as it is the property that lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. The transform property applies a 2D or 3D transformation to an element and allows you to rotate, scale, move, skew, etc.

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.