CSS3 Interview Questions Archives - Coding Compiler | Programming Tutorials

CSS3 Interview Questions And Answers For Experienced. Here Coding compiler sharing a very good list of 75 CSS3 interview questions asked in various UI development interviews by MNC companies. We are sure that these CSS interview questions will help you to crack your next CSS job interview. All the best for your future and happy CSS learning.

CSS3 Interview Questions

What is the difference between CSS2 and CSS3?
What are the new features of CSS3?
What are the CSS3 modules?
What are CSS3 media queries?
What are CSS3 media types?
What are CSS3 Selectors?
How can you create Rounded corners in CSS3?
What are the associated border-radius properties?
How can you create a CSS3 property for each corner?
Is it possible to create border as an Image in CSS3?

CSS3 Interview Questions And Answers

Let’s start learning about various CSS3 interview questions and answers for experienced.

Difference Between CSS2 and CSS3

Modules
Media Queries
Namespaces
Selectors
Color

1) CSS3 Modules

1) The main difference between CSS2 and CSS3 is that CSS3 divided into two different sections Called Modules.
2) In CSS2 everything is submitted as a single document with all the Cascading Style Sheets information within it.
3) These Modules are much easier for different browsers to accept various aspects of CSS3 and implement.
4) There is a wider range of browser support for CSS3 Modules over CSS and CSS2.

CSS3 Modules List

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

2) CSS3 Media Queries

1) In CSS2, we have Media Types, users can define different style rules for different media types like computer screens, printers, and handled devices.

2) But in CSS3, instead of using Media Types, extended the CSS2 Media Types idea with Media Queries.

3) Unlike looking for a type of device in CSS2 media type, CSS3 Media Queries look at the capability of the device.

4) CSS3 media queries look for width and height of the viewport, width, and height of the device, orientation, and resolution of the screen.

CSS3 Media Types

all – Used for all media type devices
print – Used for printers
screen – Used for computer screens, tablets, smart-phones etc.
speech – Used for screenreaders that “reads” the page out loud

CSS3 Media Query Example

If the viewport is minimum 480 pixels or widee then the body backgroud color will be changed to blue.

@media screen and (min-width: 480px) {
body {
background-color: blue;
}
}

3) CSS3 Namespaces

This CSS Namespaces module defines syntax for using namespaces in CSS. It defines the @namespace rule for declaring a default namespace and for binding namespaces to namespace prefixes.

@namespace “http://www.w3.org/1999/xhtml”;
@namespace svg “http://www.w3.org/2000/svg”;

The first rule declares a default namespace http://www.w3.org/1999/xhtml to be applied to names that have no explicit namespace component.

The second rule declares a namespace prefix svg that is used to apply the namespace http://www.w3.org/2000/svg where the svg namespace prefix is used.

4) CSS3 Selectors

In CSS3, there are few new Selectors and pseudo-elements are introduced, let’s discuss them.

1) attribute beginning matches exactly

element[foo^=”bar”]

The element has an attribute called foo that begins with “bar” e.g.

2) attribute ending matches exactly

element[foo$=”bar”]

The element has an attribute called foo that ends with “bar” e.g.

3) attribute contains the match

element[foo*=”bar”]

The element has an attribute called foo that contains the string “bar” e.g.

CSS3 new pseudo-classes:

:root

The root element of the document. In HTML this is always

:nth-child(n)

use this to match exact child elements or use variables to get alternating matches

:nth-last-child(n)

match exact child elements counting up from the last one

:nth-of-type(n)

match sibling elements with the same name before it in the document tree

:nth-last-of-type(n)

match sibling elements with the same name counting up from the bottom

:last-childmatch

the last child element of the parent

:first-of-typematch

the first sibling element of that type

:last-of-typematch

the last sibling element of that type

:only-childmatch

the element that is the only child of its parent

:only-of-typematch

the element that is the only one of its type

:emptymatch

the element that has no children (including text nodes)

:targetmatch

an element that is the target of the referring URI

:enabledmatch

the element when it’s enabled

:disabledmatch

the element when it’s disabled

:checkedmatch

the element when it’s checked (radio button or checkbox)

:not(s)

match when the element does not match the simple selectors

New CSS3 Style Properties

Many graphics related properties are introduced in CSS3.

1) Border-radius or box-shadow, flexbox or even CSS Grid are newer styles introduced in CSS3.

2) In CSS3 the box model not changed but using new style properties users can change background, border and styles of a box.

3) In CSS3 using properties like background-image, background-position, and background-repeat styles users can specify multiple background images to be placed on top of one another.

4) CSS3 background-clip property defines how the background image should be clipped.

5) CSS3 background-origin property determines whether the background should be placed in the padding box, the border box, or the content box.

6) CSS3 background-size property allows you to indicate the size of the background image. This property allows users to stretch smaller images to fit the page.

7) CSS borders can be the styles of solid, double, dashed, and image. In addition to existing boarder properties CSS3 brings in the ability to create rounded corners.

8) There are some new border-radius properties are introduced in CSS3.

9) border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radiusThese properties allow you to create rounded corners on your borders.

10) border-image-source – Specifies the image source file to be used instead of border styles already defined.

11) border-image-slice – Represents the inward offsets from the border image edges

12) border-image-width – Defines the value of the width for your border image

13) border-image-outset – Specifies the amount that the border image area extends beyond the border box

14) border-image-stretch – Defines how the sides and middle parts of the border image should be tiled or scaled

15) border-image – The shorthand property for all the border image properties

16) column-width – Defines the width of your columns should be.

17) column-count – Defines the number of columns on the page.

18) columnsShorthand property where you can define either the width or number.

19) column-gap Defines the width of the gaps between the columns.

20) column-rule-color Defines the color of the rule.

21) column-rule-style Defines the style of the rule (solid, dotted, double, etc.)

22) column-rule-width Defines the width of the rule

23) column-rule A shorthand property defining all three column rule properties at once.

24) CSS Template layout module and CSS3 Grid positioning module- creating grids with CSS

25) CSS3 Text module – outline text and even create drop-shadows with CSS

26) CSS3 Color module – with opacity

27) Changes to the box model – including a marquee property that acts like the IE tag

28) CSS3 User Interface module – giving you new cursors, responses to actions, required fields, and even resizing elements

29) CSS3 Ruby module – provides support for languages that use textual ruby to annotate documents

30) CSS3 Paged Media module – for even more support for paged media (paper, transparencies, etc)

31) Generated content – running headers and footers, footnotes, and other content that is generated programmatically, especially for paged media

32) CSS3 Speech module – changes to aural CSS

33) CSS3 supports additional color properties like RGBA colors, HSL colors, HSLA colors, Opacity.

CSS3 Interview Questions And Answers For Experienced

1) How can you create Rounded corners in CSS3?

A) By using CSS3 border-radius property, we can create rounded corners to body or text.

Sample CSS3 Code to create Rounded corners:

Boarder-Radius Syntax:

#roundcorners {
border-radius: 60px/15px;
background: #FF0001;
padding: 10px;
width: 200px;
height: 150px;
}

2) What are the associated border-radius properties?

A) There are four border-radius properties are there, they are:

border-radius Use this element for setting four boarder radius property
border-top-left-radius Use this element for setting the boarder of top left corner
border-top-right-radius Use this element for setting the boarder of top right corner
border-bottom-right-radius Use this element for setting the boarder of bottom right corner
border-bottom-left-radius Use this element for setting the boarder of bottom left corner

3) How can you create CSS3 property for each corner?

A) We can create property for each corner by defining style for each corner, see below example:

4) Is it possible to create border as a Image in CSS3?

A) Yes it is possible, by using CSS3 border image property we can use image as a border.

5) What are the associate boarder image properties in CSS3?

A) There are four major boarder image properties are there, they are:

border-image-source Used to set the image path
border-image-slice Used to slice the boarder image
border-image-width Used to set the boarder image width
border-image-repeat Used to set the boarder image as rounded, repeated and stretched

6) Can you write CSS3 code for creating boarder image?

A) Here is the CSS3 code for creting boarder as image:

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border-bg.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}

7) What is Multi Background property in CSS3?

A) Multi background property is used to add one or more images to the background in CSS3.

8) What are the most commonly used Multi Backgroud properties in CSS3?

A) There are four most commonly used multi background properties, they are:

background-clip Used to declare the painting area of the background
background-image Used to specify the background image
background-origin Used to specify position of the background images
background-size Used to specify size of the background images

9) Can you write CSS3 code for creating Multi Background Images?

A) Here is the CSS3 code for creating multi background images.

10) What are the new color properties introduced in CSS3?

A) In CSS3, there are few Color properties are introduced they are:

RGBA colors
HSL colors
HSLA colors
Opacity

Advanced CSS3 Interview Questions And Answers

11) What RGBA stands for in CSS3?

A) RGBA stands for Red Green Blue Alpha.

12) What HSL stands for in CSS3?

A) HSL stands for hue, saturation, lightness.

13) What HSLA stands for in CSS3?

A) HSLA stands for hue, saturation, lightness and alpha.

14) What is gradient in CSS3?

A) Gradients displays the combination of two or more colors in one grid.

15) What are the types of Gradients in CSS3?

A) In CSS3 there are mainly two types of gradients are there, they are:

Linear Gradients(down/up/left/right/diagonally)

Radial Gradients

16) How can you add gradients to your project?

A) All gradients are read from a gradients.json file which is available in this project’s repo. Simply add your gradient details to it and submit a pull request.
http://uigradients.com/#

17) How can you create shadow effets in CSS3?

A) We can create shadow effects for text using text-shadow and for boxes using box-shadow properties.

18) Can you write CSS3 code to create shadow effect?

A) Here is the sample code for shadow effects:

Text shadow for text element:

H1 {
text-shadow: 2px 2px;
}

Box shadow for box element:

19) What are the newly introduced Text related features in CSS3?

A) There are mainly three Text related features are introduced, they are:

text-overflow
text-emphasis
text-align-last
word-wrap
word-break

20) What is text-overflow property used in CSS3?

A) The text-overflow property determines how overflowed content that is not displayed is signaled to users.

Example 1:

p.text1 {
white-space: nowrap;
width: 400px;
border: 2px solid #000000;
overflow: hidden;
text-overflow: clip; //It wont show overflow text.
}

Example 2:

p.text2 {
white-space: nowrap;
width: 300px;
border: 2px solid #000000;
overflow: hidden;
text-overflow: ellipsis; //It indicates overflow text with dots …
}

Real-Time CSS3 Interview Questions And Answers

21) What is word-break property used in CSS3?

A) In CSS3 word-break is used to break the line.

Example 1:

Example 2:

p.text2 {
width: 150px;
border: 2px solid #000000;
word-break: break-all; // It breaks the work without hyphens in line break
}
</style>

22) What is CSS3 word-wrap property?

A) In CSS3 word-wrap is used to break the line and wrap onto next line.

23) What are the different web fonts formats in CSS3?

A) Web fonts allows users to use the fonts in CSS3, which are not installed on local system.

There are five types of web fonts formats are there, they are:

1) TTF – TrueType Fonts
2) OTF – OpenType Fonts
3) WOFF – The Web Open Font Format
4) SVG Fonts
5) EOT – Embedded OpenType Fonts

24) What are 2D transforms in CSS3?

A) In CSS3, by using 2D transforms we can re-change the element structure as translate, rotate, scale, and skew.

25) What are the common values used in 2D Transforms?

A) Here are the some commonly used values in 2D Transforms,

matrix(n,n,n,n,n,n) – Used to defines matrix transforms with six values
translate(x,y)- Used to transforms the element along with x-axis and y-axis
translateX(n) – Used to transforms the element along with x-axis
translateY(n) – Used to transforms the element along with y-axis
scale(x,y) – Used to change the width and height of element
scaleX(n) – Used to change the width of element
scaleY(n) – Used to change the height of element
rotate(angle) – Used to rotate the element based on an angle
skewX(angle) – Used to defines skew transforms along with x axis
skewY(angle) – Used to defines skew transforms along with y axis

26) What are 3D transforms in CSS3?

A) By using 3D transforms, we can move element to x-axis, y-axis and z-axis.

27) What are the common values used in 3D Transforms?

A) Here are the some commonly used values in 3D Transforms,

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) – Used to transforms the element by using 16 values of matrix
translate3d(x,y,z) – Used to transforms the element by using x-axis,y-axis and z-axis
translateX(x) – Used to transforms the element by using x-axis
translateY(y) – Used to transforms the element by using y-axis
translateZ(z) – Used to transforms the element by using y-axis
scaleX(x) – Used to scale transforms the element by using x-axis
scaleY(y) – Used to scale transforms the element by using y-axis
scaleY(y) – Used to transforms the element by using z-axis
rotateX(angle) – Used to rotate transforms the element by using x-axis
rotateY(angle) – Used to rotate transforms the element by using y-axis
rotateZ(angle) – Used to rotate transforms the element by using z-axis

28) What are the CSS3 Animations?

A) In CSS3 Animation is process of making shape changes and creating motions with elements.
@keyframes – Keyframes will control the intermediate animation steps in CSS3.

29) How can you create Multi Columns in CSS3?

A) In CSS3, Multi Columns feature allows users to create, text as news paper structure in multi columns.

30) What are the values associated with multi columns?

A) Here is the list of most commonly used multi column values, they are:

column-count – Used to count the number of columns that element should be divided
column-fill – Used to decide, how to fill the columns
column-gap – Used to decide the gap between the columns
column-rule – Used to specifies the number of rules
rule-color – Used to specifies the column rule color
rule-style – Used to specifies the style rule for column
rule-width – Used to specifies the width
column-span – Used to specifies the span between columns

CSS3 Technical Interview Questions And Answers

31) Can you write CSS3 code to arrange text in multi columns?

A) Here is the code for arranging text in multi columns,

/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;

/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>

32) What is CSS3 Outline offset?

A) CSS3 outline, draws a line around the element at outside of boarder.

Sample Code for creating Outline:

33) What is Box sizing property?

A) Box sizing property is using to change the height and width of element.

Example Code for CSS3 Box sizing:

34) What is CSS3 Responsive Web Design?

A) CSS3 Responsive web design provides an optimal experience for the user. Responsive design allows users easy reading and easy navigation with a minimum of resizing on different devices.
The best thing about web responsive design is, it will changes the height and width of the website automatically to fit the device screen (desktop, laptop, tablets and mobiles) to provide best user experience to the user.

35) What is CSS unicode-bidi Property?

A) The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.

CSS unicode-bidi property example:

div {
direction: rtl;
unicode-bidi: bidi-override;
}

36) What is CSS transition-timing-function Property?

A) The transition-timing-function property specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration.

Example:

div {
transition-timing-function: linear;
}

37) What is CSS text-indent Property?

A) The text-indent property specifies the indentation of the first line in a text-block.

Example:

p {
text-indent: 50px;
}

38) What is CSS transform-origin Property?

A) The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.

Example:

div {
transform: rotate(45deg);
transform-origin: 20% 40%;
}

39) What is CSS hanging-punctuation Property?

A) The hanging-punctuation property specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.

Example:

p {
hanging-punctuation: first;
}

40) What is CSS counter-increment Property?

A) The counter-increment property increases or decreases the value of one or more CSS counters. The counter-increment property is usually used together with the counter-reset property and the content property.

Example:

body {
/* Set “my-sec-counter” to 0 */
counter-reset: my-sec-counter;
}

h2:before {
/* Increment “my-sec-counter” by 1 */
counter-increment: my-sec-counter;
content: “Section ” counter(my-sec-counter) “. “;
}

CSS Interview Questions For Experienced

41) What is CSS background-attachment Property?

A) The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

Example:

body{
background-image: url(“img_tree.gif”);
background-repeat: no-repeat;
background-attachment: fixed;
}

42) What is CSS backface-visibility Property?

A) The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed. This property is useful when an element is rotated.

Example:

#div1 {
backface-visibility: hidden;
}
#div2 {
backface-visibility: visible;
}

43) What are CSS functions?

A) CSS functions are used as a value for various CSS properties.

attr()
calc()
cubic-bezier()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
var()

44) What is CSS attr() funtion?

A) The attr() function returns the value of an attribute of the selected elements.

Example: a:after {
content: ” (” attr(href) “)”;
}

45) What is CSS calc() function?

A) The calc() function performs a calculation to be used as the property value.

Example: #div1 {
position: absolute;
left: 50px;
width: calc(100% – 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}

46) What is the cubic-bezier() function?

A) The cubic-bezier() function defines a Cubic Bezier curve.

Example:

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

47) What is the CSS3 hsl() function?

A) The hsl() function define colors using the Hue-saturation-lightness model (HSL). HSL stands for hue, saturation, and lightness – and represents a cylindrical-coordinate representation of colors.

Example:

#p1 {background-color:hsl(120,100%,50%);} /* green */
#p2 {background-color:hsl(120,100%,75%);} /* light green */
#p3 {background-color:hsl(120,100%,25%);} /* dark green */
#p4 {background-color:hsl(120,60%,70%);} /* pastel green */

48) What is CSS3 hsla() Function?

A) The hsla() function define colors using the Hue-saturation-lightness-alpha model (HSLA). HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity of the color.

Example:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* green */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* light green */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* dark green */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* pastel green */

49) What is CSS linear-gradient() Function?

A) The linear-gradient() function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops.

Example:

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

50) What is CSS radial-gradient() Function?

A) The radial-gradient() function sets a radial gradient as the background image. A radial gradient is defined by its center. To create a radial gradient you must define at least two color stops.

Example:

#grad {
background: radial-gradient(red, green, blue);
}

References: Thoughtco | Tutorialspoint | W3Schools

Category: CSS3 Interview Questions

CSS3 Interview Questions And Answers For Experienced