All The Useful CSS3 Interview Questions & Answers

Q 1. Which CSS has the highest priority?
In CSS, Inline CSS has the highest priority, followed by Internal/Embedded sheets, then followed by External CSS, having the least priority.

Q 2. How to select the next element in CSS3?
In CSS, the jQuery element + next Selector is used to select elements that are placed next to each other. Here's an example to select the <a> element that are next to each <div> element.
$("div + a")

Q 3. What are the possible ways to apply CSS styles to a Web page?
CSS can be applied to any web page using the following three ways:

Inline CSS
Internal Style Sheet
External Style Sheets

Q 4. How to create shadow effect in CSS3?
The box-shadow property is used to add shadow effects around any element's frame. Users can set multiple effects to a portion separated by commas. Usually, it is described by X and Y offsets relative to the part, color, and blur and spread radii.

Example:
                                                   
#box {
  box-shadow: 3px 13px #999999;
}

Q 5. What are the new color properties in CSS3?
The CSS3 has included 147 additional color keywords introduced in it. CSS3 also offers a number of other color options to users such as HSLA, HSL, and RGBA. These color types also have the ability to declare semitransparent colors.

Q 6. What is the grouping selector in CSS?
The grouping selector in CSS selects all the HTML elements with the same style definitions. This will be better to group the selectors, to minimize the code.

The comma is a grouping method, it selects all the matching nodes.

Example: div, span will match both <span> and <div> elements.

Q 7. How to use before and after in CSS3?
The ::before the selector is used to inserting something before the content of any selected element. Whereas, the ::after selector to insert something after the content in a specified element.

Syntax for before selector:
::before {
  css declarations;
}

Syntax for After Selector:
::after {
  css declarations;
}

Example:
                                                   
before

p::before {
  content: "Read this -";
  color: red;
  background-color: red;
} 

after

p::after {
  content: " - Read this";
  color: red;
  background-color: red;
} 

Q 8. What is tweening in CSS?
Tweening is a term that's not used too often in CSS. It has its roots in computer animation and products like Flash. In tweening, rather than telling the program exactly how to render each frame, the animator/designer would tell the program what position the objects are in at two "keyframes" while the program figures out how to do the transition of the objects between the two mentioned points.

Here's an example of sliding in an element from the left side of a browser screen using tweening.

Example:
                                                   
p {
animation-duration: 4s;
animation-name:tweening;
}

@keyframes slidein {
from {
margin-right: 100%;
width: 300%;
}
to {
margin-right: 0%;
width: 100%;
}
} 

Q 9. What is media query in CSS3?
The media query is a technique used to produce a tailored style sheet, better known as responsive web design, to desktops, tablets, laptops, and other mobile devices. We can also use media queries to specify certain styles required for printed documents or for screen readers.

Q 10. How to apply CSS to all elements?
To apply CSS to all elements, use the CSS * Selector.

Example:
* {
  background-color: red;
}

This selects all the elements and changes their background color to blue.

Q 11. What are the difference between CSS and CSS3?

CSS      vs     CSS3

1.    Mostly focused on offering various formatting features    - Focused on improve the design of web pages.
2.    Missing features such as layer design, page element addition, special effects, etc. -    Easier to use and includes plenty of features that were missing on CSS.
3.    Can't split into modules    - Can split into multiple modules
4.    Only support single text blocks    - Multi-column text blocks are supported here.

Q 12. What is attr()?
In CSS3, the attr() function is used to retrieve the value of an attribute of the element selected and use it in the style sheet. This function also can be used on pseudo-elements, in which case pseudo-element's originating element attribute value will be returned.

Q 13. What is the use of CSS3 Sprites?
CSS3 Image sprites are a collection of images put in a single image to reduce the number of server requests, thereby saving bandwidth, and avoiding multiple server requests for each image.

#homeDiv {
  width: 32px;
  height: 32px;
  background: url(img_cssprites.gif) 0 0;
}

In the above example, we have combined 3 images into a single GIF, cssprites and we can use CSS to display a specific part as required.

Q 14. How does the Z Index work in CSS3?
In CSS, the z-index property specifies the stack order of elements. An element having a greater stack order is placed in front of an element with a lower stack order.

Here's its CSS Syntax:
z-index: auto|number|initial|inherit;

Here's an example to set the z-index of an image:

img {
  position: fixed;
  left: 3px;
  top: 10px;
  z-index: -2;
}

Q 15. What is the white-space property in CSS?
White-space is a property within CSS which helps in controlling whitespace and other line breaks inside an element's text. It has a default value of normal.

Here's an example to display the different values within a white-space property:

p.e {
  white-space: nowrap;
}
p.f {
  white-space: normal;
}
p.g {
  white-space: pre;
}

Q 16. What are CSS3 Transitions?
CSS transitions 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.

Q 17. What is a flexbox layout?
Flexbox is a layout model that allows elements to align and distribute space within a container. Using flexible widths and heights, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.

Q 18. What is the difference between 'word-break: break-all' and 'word-wrap: break-word' in CSS?
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line.

Difference between the “word-break: break-all;” and “word-wrap: break-word;”

word-break: break-all; It is used to break the words at any character to prevent overflow.
word-wrap: break-word; It is used to broken the words at arbitrary points to prevent overflow.

Q 19. What is text-overflow property use in CSS3?
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string

Q 20. What is the function of the CSS clear property?
The clear property is used to specify that which side of floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element which is floated, it will.

Syntax:
clear: none|left|right|both|initial;

Q 21. What are the different web fonts formats in CSS?

Different Font Formats:
TrueType Fonts (TTF) TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. 
OpenType Fonts (OTF) OpenType is a format for scalable computer fonts.
The Web Open Font Format (WOFF) 
The Web Open Font Format (WOFF 2.0)
SVG Fonts/Shapes. 
Embedded OpenType Fonts (EOT)

Q 22. What is the syntax of opacity in CSS3?
The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Default value:    1

Q 23. Who is the founder of CSS & when was CSS3 released?
CSS is founded by Hakon Wium Lie and first released on December 17, 1996, as an official World Wide Web Consortium. CSS3 is the most advanced version of CSS and was released in June 1999.

Q 24. What are the different types of style sheets?
There are three types of CSS available for users as following,
Inline CSS: It contains CSS property in the body section attached with the element.
Embedded CSS: Used to style a single HTML document uniquely.
External CSS: It contains separate CSS files which contain only style property with the use of tag attributes.

Q25. What are the media types?
It has a total of 10 media types supported it. Here are those:

All - Intended for all devices
Braille - Braille tactile feedback devices
Aural - Used for speech synthesizers
Embossed - Used for paged Braille printers
Print - Applies for printed documents
Handheld - Applies for handheld devices
TTY - Used for media including a fixed-pitch character grid
TV - Used for television-type devices
Screen - Required for computer screens
Projection - Used for projected presentations

Q 26. Explain CSS3 Selectors.
CSS3 selector is a part of the CSS3 rule set that selects the content that the user wants to style.

There are different types of selectors available in CSS3.
Universal Selector
ID Selector
Element Type Selector
Class Selector
Chile Combinator
Descendant Combinator
General Sibling Combinator
Adjacent Sibling Combinator
Attribute Selector
Pseudo-element
Related Article: HTML5 and CSS3 Interview Questions

Q 27. How to create rounded corners?
The border-radius property is used to give any element rounded corners. This property defines the radius of an element's edge.

top-left corner, top-right corner, bottom-right corner, and bottom-left corner (Use of four values)
top-left corner, top-right, and bottom-left corners, and bottom-right corner (Use of three values)
top-left and bottom-right corners, and top-right and bottom-left corners (Use of two values)
The value applies for all four corners equally

Q 28. How we can add border to a image?
Users have to apply the border-image property to specify the image to be used as the border around an element.

Example:
                                                   
img {

  border:1px solid #021a40;

}

Q 29. List some css3 new style properties.
CSS3 has plenty of new style properties in addition to it. Box-shadow: Used to effect the surround item containers on a webpage.

The rounded corner effect
Text shadow effect
Background gradient effect

Q 30. What is gradient and explain its types?
In CSS3, gradients let users display smooth transitions two or number of specified colors.

CSS defines two types of gradients, which are:
Linear Gradients: It goes up/down/right/left/diagonally
Radial Gradients: Usually defined by its center

Q 31. List some newly introduced Text related features in CSS3.
CSS3 has a number of text related features introduced with it. Here are a few best of them:

3D text effect
Text shadow effect
Letterpress text effect
Embossed CSS3 text effect
Subtle CSS3 Text Style
Date display technique
Awesome Anaglyphic text effect
Text rotation

Q 32. What is word-break property used in CSS3?
In CSS3, the word-break property is used to specify how words should break when reaching the end of a line. The syntax for the word-break property is as follows:

Example:
                                                   
p.a {

  word-break: break-all;

}

                                               
Q 33. Explain CSS3 Animations.
CSS3 animations allow HTML element animation without using Flash or JavaScript. It lest elements gradually change form one style to another. The users must have to specify some keyframes for the animation to apply CSS3 animation.

Q 34. What is the use of calc()?
The calc() function in CSS3 is used for simple calculations to determine CSS property values present right in CSS. It allows mathematical expressions with addition, subtraction, multiplication, and division to be used as component values.

Q 35. What is linear-gradient() used in CSS3?
In CSS3, the linear gradient starts at the top with the color red, transitioning to yellow and later to blue. It sets a linear gradient as the background image. Users have to define at least two color stops to create a linear gradient.

Q 36. What is the use of hsl()?
The CSS3 HSL() function is used to provide a color value when using CSS. It allows users to specify a color value by determining the hue, saturation, and light (which represent HSL) components of the color.

Q 37. How to use pseudo-elements in CSS3?
In CSS, pseudo-element is used to style detailed and specific parts of an element.

For example, it may be used to:
Style an element, letter or line.
Insert content in an element before or after the content within the element.
It is a keyword added to a selector that lets you in styling a specific part of the selected element(s).

For example, ::first-line is used to change the font of the first line of a paragraph below.

p::first-line {
  color: blue;
  text-transform: uppercase;
}