70+ Interview Questions on CSS

Astha Jain -

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

CSS is used to create attractive and aesthetic user interface for a web application. Currently, there is a tremendous demand for web developers who have a good knowledge of HTML and CSS. This article will cover everything you need to know for your CSS interview.

Table of Content

  1. Multiple Choice Questions
  2. Descriptive Questions
  3. Programming questions

Multiple Choice Questions

1. The full form of CSS is:

a. Cascading Style Sheets
b. Coloured Special Sheets
c. Color and Style Sheets
d. None of the above

Ans: Option a. Cascading Style Sheets

Explanation: Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML.

2. Which HTML tag is used to declare internal CSS?

a. <style>
b. <link>
c. <script>
d. All of the above

Ans: Option a. <style>
Explanation: An internal CSS is defined in the < head> section of an HTML page, within a < style> element.

3. How can we select an element with a specific ID in CSS?

a. # id
b. .id
c. ^id
d. id

Ans: Option a. #id
Explanation: IDs are selected in CSS using # followed by the ID name.

4. What is the correct syntax for referring an external CSS?

a. <style rel="stylesheet" type="text/css" href="style.css">
b. <link rel="stylesheet" type="text/css" href="style.css">
c. Both A and B
d. None of the above.

Ans: Option a. <style rel="stylesheet" type="text/css" href="style.css">
Explanation: The external style sheet is generally used when you want to make changes on multiple pages. It uses the < link> tag on every pages and the tag should be put inside the head section.

5. Which of the following are parts of the CSS box model?

a. Margins
b. Borders
c. Padding
d. All of the above

Ans: Option d. All of the above
Explanation: Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

6. What will be the width of the div element given below?

div {
  width: 310px;
  padding: 20px;
  border: 5px solid blue;
  margin: 0;
}

a. 310px
b. 350px
c. 360px
d. 260px

Ans: Option c. 360px
Explanation: 310 px (width) + 20 * 2 px (left + right padding) + 5 * 2 px (left + right border) + 0px (margin) = 360px.

7. Which of the following CSS property specifies the type of list item marker?

a. list
b. list-style-type
c. ol
d. item-marker

Ans: Option b. list-style-type
Explanation: The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

8. Which of the following is the correct approach to make a table responsive?

a. overflow-x: auto
b. overflow-x: none
c. Both A and B
d. None of the above

Ans: Option a. overflow-x: auto
Explanation: Adding a container element (like < div>) with overflow-x:auto around the < table> element will make it responsive.

9. Which of the following CSS properties specifies the stack order of elements?

a. z-index
b. overlap
c. Both A and B
d. None of the above

Ans: Option a. z-index
Explanation: The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

10. What are the uses of CSS pseudo-elements?

a. Style specified parts of an element.
b. Style the first letter or line of an element.
c. Insert content before or after the element.
d. All of the above.

Ans: Option d. All of the above.
Explanation: A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

11. What parameter does the calc() function in CSS take?

a. A sentence
b. A mathematical expression
c. A number
d. A value

Ans: Option b. A mathematical expression
Explanation: The calc() function takes a mathematical expression as a parameter and returns its value.

12. What function is used to insert values of a CSS variable?

a. var()
b. rand()
c. varchar()
d. calc()

Ans: Option a. var()
Explanation: The var() function is used to insert values of a CSS variable.

13. Which of the following is not a type of combinator?

a. >
b. ~
c. +
d. *

**Ans: Option d. * **
Explanation: CSS Combinators clarifies the relationship between two selectors. There are four types of combinators in CSS that are listed as follows:

  • General sibling selector (~)
  • Adjacent sibling selector (+)
  • Child selector (>)
  • Descendant selector (space)

14. Which of the following selector in CSS is used to select the elements that do not match the selectors?

a. :! selector
b. :not selector
c. :empty selector
d. None of the above

Ans: Option b. :not selector
Explanation: The :not selector in CSS matches the elements that are not the specified element/selector.

15. How to select the elements with the class name "example"?

a. example
b. #example
c. .example
d. Class example

Ans: Option c. .example
Explanation: The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name. A class name should not be started with a number.

16. Which of the following are valid CSS position property values?

a. static
b. relative
c. fixed
d. All of the above

Ans: Option d. All of the above
Explanation: The CSS position property can have the following values - static, absolute, fixed, relative, sticky, initial, inherit.

17. In the below code snippet, in what order will the margins be added?

p {
  margin: 25px 50px 75px 100px;
}

a. Top, Right, Bottom, Left
b. Top, Left, Bottom, Right
c. Top, Bottom, Right, Left
d. Right, Left, Top, Bottom

Ans: Option a. Top, Right, Bottom, Left
Explanation: The margins are added in the order Top, Right, Bottom, Left.

18. How can we add more importance to a property/value than normal?

a. !important
b. important
c. bold
d. None of the above

Ans: Option a. !important
Explanation: The !important rule in CSS is used to add more importance to a property/value than normal.

19. Which of the following are units of relative length in CSS?

a. em
b. rem
c. vmax
d. All of the above

Ans: Option d. All of the above
Explanation: All the given units are units of relative length in CSS.

20. What is the general syntax of writing the var() function?

a. var(--name, value)
b. var(--name)
c. var(value)
d. None of the above

Ans: Option a. var(--name, value)
Explanation: The first argument to the function is the name of the custom property to be substituted. An optional second argument to the function serves as a fallback value. If the custom property referenced by the first argument is invalid, the function uses the second value.

Descriptive Questions

1. What is CSS?

Cascading Style Sheets(CSS) is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.

2. Why do we use CSS?

  • CSS saves time: You can write CSS once and reuse the same sheet on multiple HTML pages.
  • Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically.
  • Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content.
  • Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
  • Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using of this we can view offline websites.

3. What are the advantages of using CSS?

The main advantages of CSS are given below:

  • Separation of content from presentation - CSS provides a way to present the same content in multiple presentation formats in mobile or desktop or laptop.
  • Easy to maintain - CSS, built effectively can be used to change the look and feel complete by making small changes. To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
  • Bandwidth - Used effectively, the style sheets will be stored in the browser cache and they can be used on multiple pages, without having to download again.

4. Explain the use of the ruleset.

The ruleset is used for the identification of selectors, which can be attached with other selectors. The two parts of a ruleset are:

  • Declaration block: contains one or more semicolon-separated declarations
  • Sector: indicates the HTML element needed to be styled

5. What are selectors?

In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.

6. How are the CSS selectors matched against the elements by the browser?

The order of matching selectors goes from right to left of the selector expression. The elements in the DOM are filtered by browsers based on the key selectors and are then traversed up to the parent elements for determining the matches. The speed of determining the elements depends on the length of the chain of selectors. Consider an example:

p span{ 
    color: black;
}

Here, the browser first finds all span elements in the DOM and then it traverses to each of its parent elements to check if they are the paragraph p elements.

Once the browser finds all matching span tags having paragraph elements as parent and applies the color of black to the content, the matching process is stopped.

7. What do you understand by the universal sector?

A universal selector is a selector that matches any element type's name instead of selecting elements of a particular type.

8. What do you understand by the class sector?

The .class selector is used to select all elements which belong to a particular class attribute. In order to select the elements with a particular class, use the period (.) character specifying the class name ie., it will match the HTML element based on the contents of their class attribute. The class name is mostly used to set the CSS property to a given class.
Syntax:
.class {
// CSS property
}

9. What do you understand by the id sector?

The #id selector is used to set the style of given id. The id attribute is the unique identifier in HTML document. The id selector is used with # character.
Syntax:

#id {
    // CSS property
}

10. Explain element type selectors.

This selector matches one or more HTML elements of the same name. In the given example, the provided styles will get applied to all the ul elements on the page.
ul {
line-style: none;
border: solid 1px #ccc;
}

11. Explain the attribute selector in CSS

The [attribute] selector is used to select elements with a specified attribute.

Selector Example Example description
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute^=value] a[href^="https"] Selects every < a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every < a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every < a> element whose href attribute value contains the substring "w3schools"

12. Explain Combinators as selectors.

CSS combinators are explaining the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purpose. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators.
There are four types of combinators available in CSS which are discussed below:

General Sibling selector (~)
Adjacent Sibling selector (+)
Child selector (>)
Descendant selector (space)

13. Explain General sibling selector.

General Sibling selector: The general sibling selector is used to select the element that follows the first selector element and also shares the same parent as the first selector element. This can be used to select a group of elements that share the same parent element.

14. Explain Adjacent sibling selector.

Adjacent Sibling selector: The Adjacent sibling selector is used to select the element that is adjacent or the element that is next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.

15. Explain Child Selector.

Child Selector: This selector is used to select the element that is the immediate child of the specified tag. This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent.

16. Explain Descendant selector.

Descendant selector: This selector is used to select all the child elements of the specified tag. The tags can be the direct child of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.

17. What are pseudo-classes in CSS?

A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states. For Example, changing the style of an element when the user hovers over it, or when a link is visited. All of these can be done using Pseudo Classes in CSS.
Syntax:
selector: pseudo-class{
property: value;
}

There are many Pseudo-classes in CSS but the ones which are most commonly used are as follows:

  • :hover Pseudo-class: This pseudo-class is used to add a special effect to an element when our mouse pointer is over it. The below example demonstrates that when your mouse enters the box area, its background color changes from yellow to orange.
  • :active Pseudo-class: This pseudo-class is used to select an element that is activated when the user clicks on it. The following example demonstrates that when you click on the box, its background color changes for a moment.
  • :focus Pseudo-class: This pseudo-class is used to select an element that is currently focussed by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it. In the following example, the background color of the input field which is currently focused changes.
  • :visited Pseudo-class: This pseudo-class is used to select the links which have been already visited by the user. In the following example, the color of the link changes once it is visited.

18. What are pseudo-elements in CSS?

Pseudo Elements: Pseudo-element in CSS is used to add style to specified parts of an element. Example: Using style before or after an element.
Syntax:
selector::pseudo-element {
property:value;
}
Use of Pseudo-Element: Below is some examples to describe the use of pseudo-element.

  • ::before Pseudo-element: It is used to add some CSS property before an element when that element is called.
  • ::after Pseudo-element: It is used to add some CSS property after an element when that element is called.
  • ::first-letter Pseudo-element: It is used to make changes to the first letter of an element.
  • ::first-line Pseudo-element: It is used to make changes to the first line of an element.

19. Explain CSS specificity.

When more than one set of CSS rules apply to the same element, the browser will have to decide which specific set will be applied to the element. The rules the browser follows are collectively called Specificity

20. List some specificity rules.

  • CSS style applied by referencing external stylesheet has lowest precedence and is overridden by Internal and inline CSS.
  • Internal CSS is overridden by inline CSS.
  • Inline CSS has highest priority and overrides all other selectors.

21. Explain specificity heirarchy.

Every element selector has a position in the Hierarchy.

  • Inline style: Inline style has highest priority.
  • Identifiers(ID): ID have the second highest priority.
  • Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.
  • Elements and pseudo-elements: Elements and pseudo-elements have lowest priority.

22. What is the Box model in CSS? Which CSS properties are a part of it?

A rectangle box is wrapped around every HTML element. The box model is used to determine the height and width of the rectangular box. The CSS Box consists of Width and height (or in the absence of that, default values and the content inside), padding, borders, margin.

Content: Actual Content of the box where the text or image is placed.
Padding: Area surrounding the content (Space between the border and content).
Border: Area surrounding the padding.
Margin: Area surrounding the border.

23. How to include CSS in the webpage?

There are different ways to include a CSS in a webpage,

  1. External Style Sheet: An external file linked to your HTML document: Using link tag, we can link the style sheet to the HTML page.
    <link rel="stylesheet" type="text/css" href="mystyles.css" />

  2. Embed CSS with a style tag: A set of CSS styles included within your HTML page.

<style type="text/css">
/*Add style rules here*/
</style>

Add your CSS rules between the opening and closing style tags and write your CSS exactly the same way as you do in stand-alone stylesheet files.

  1. Add inline styles to HTML elements(CSS rules applied directly within an HTML tag.): Style can be added directly to the HTML element using a style tag.
    <h2 style="color:red;background:black">Inline Style</h2>

  2. Import a stylesheet file (An external file imported into another CSS file): Another way to add CSS is by using the @import rule. This is to add a new CSS file within CSS itself.
    @import "path/to/style.css";

24. What is VH/VW (viewport height/ viewport width) in CSS?

It’s a CSS unit used to measure the height and width in percentage with respect to the viewport. It is used mainly in responsive design techniques. The measure VH is equal to 1/100 of the height of the viewport. If the height of the browser is 1000px, 1vh is equal to 10px. Similarly, if the width is 1000px, then 1 vw is equal to 10px.

25. Difference between reset vs normalize CSS?. How do they differ?

  • Reset CSS: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same.

  • Normalize CSS: Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.

26. What is the difference between inline, inline-block, and block?

  • Block Element: The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are < div>, < p>.

  • Inline Elements: Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are < a>, < span> , < strong>, and < img> tags.

  • Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins and set height and width values.

27. What is resposive web design?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

28. How is border-box different from content-box ?

  • border-box: In this value, height and width properties are included but padding, border, or margin were not included.
  • content-box: In this value, only width and height properties are included but you will find padding and border inside of the box for example .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide.

29. Differentiate between absolute and relative in CSS.

The main difference is that relative is used for the same tag in CSS. If we write right:20 px, then padding shifts 20 px in the right. Whereas absolute is relative to the non-static parent, i.e., if we write right:20 px, the result will be 20 px far from the right edge of the parent element.

30. What is the difference between margin and padding?

  • Margin is used to create space around elements and padding is used to create space around elements inside the border.
  • We can set the margin property to auto but we cannot set the padding property to auto.
  • In Margin property we can allow negative or float number but in padding we cannot allow negative values.
  • Margin and padding target all the 4 sides of the element. Margin and padding will work without the border property also.

31. How can we format text in CSS?

CSS text formatting properties are used to format text and style text.
CSS text formatting includes the following properties:

Text-color
Text-alignment
Text-decoration
Text-transformation
Text-indentation
Letter spacing
Line height
Text-direction
Text-shadow
Word spacing

32. What are the different CSS link states?

A link is a connection from one web page to another web page. CSS property can be used to style the links in various different ways.

States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist in different states and they can be styled using pseudo-classes.
There are four states of links given below:

a:link: This is a normal, unvisited link.
a:visited: This is a link visited by a user at least once
a:hover: This is a link when the mouse hovers over it
a:active: This is a link that is just clicked.

33. What is the difference between display: none and visibility: hidden?

Both of the property is quite useful in CSS. The visibility: “hidden”; property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. The visibility is a property in CSS that specifies the visibility behavior of an element and display: “none” property is used to specify whether an element is exist or not on the website.
Syntax:
Visibility property:
visibility: visible| hidden | collapse | initial | inherit;
Display property:
display: none | inline | block | inline-block;

So, the difference between display: “none”; and visibility: “hidden”;, right from the name itself we can tell the difference as display: “none”, completely gets rids of the tag, as it had never existed in the HTML page whereas visibility: “hidden”;, just makes the tag invisible it will still be on the HTML page occupying space it’s just invisible.

34. Can we overlap elements in CSS?

Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple to design. Overlays can create using two simple CSS properties:

The z-index property is used to displace elements on the z-axis i.e in or out of the screen. It is used to define the order of elements if they overlap with each other.

Syntax:
z-index: auto|number|initial|inherit;
The position property in CSS tells about the method of positioning for an element or an HTML entity.

35. What are CSS transitions?

Transitions in CSS allow us to control the way in which transition takes place between the two states of the element.

The transition allows us to determine how the change in color takes place. We can use the transitions to animate the changes and make the changes visually appealing to the user and hence, giving a better user experience and interactivity. In this article, we will show you how to animate the transition between the CSS properties.

36. What are some of the CSS transition properties?

transition-property: It specifies the CSS properties to which a transition effect should be applied.
transition-duration: It specifies the length of time a transition animation should take to complete.
transition-timing-function: It specifies the speed of transition.
transition-delay: It specifies the transition delay or time when transition starts.

37. How can we animate using CSS?

CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. It has two parts, one which contains the CSS properties which describe the animation of the elements and the other contains certain keyframes which indicate the animation properties of the element and the specific time intervals at which those have to occur.

The @keyframes rule: Keyframes are the foundations with the help of which CSS Animations works. They define the display of the animation at the respective stages of its whole duration. For example: In the following code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown.

38. How can we make our website responsive using CSS?

Media query is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types.

Media queries can be used to check many things:

width and height of the viewport
width and height of the device
Orientation
Resolution

A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device the document is displayed on. If the media query is true then a style sheet is applied.

Syntax:

@media not | only mediatype and (expression) {
    // Code content
}

39. What is !important?

The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon.

In other words, it adds importance to all the sub-properties that the shorthand property represents.
In normal use, a rule defined in an external style sheet which is overruled by a style defined in the head of the document, which in turn, is overruled by an inline style within the element itself (assuming equal specificity of the selectors).
Defining a rule with the !important attribute that discards the normal concerns as regards the later rule overriding the earlier ones.
So, it is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design.

40. What are the different ways to hide the element using CSS?

  • Using display property(display: none). It’s not available for screen readers. The element will not exist in the DOM if display: none is used.
  • Using visibility property(visibility: hidden), will take up the space of the element. It will be available to screen reader users. The element will actually be present in the DOM, but not shown on the screen.
  • Using position property (position: absolute). Make it available outside the screen.

41. How does Calc work?

The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width is the result of the addition of two or more numeric values.

.foo {
	Width: calc(100px + 50px)
}

42. What do CSS Custom properties variables mean?

Custom properties (sometimes referred to as CSS variables or cascading variables) are defined by users that contain specific values to be reused throughout a document. The value is set using -- notion. And the values are accessed using the var() function.

43. How does this property work overflow: hidden?

The overflow property in CSS is used for specifying whether the content has to be clipped or the scrollbars have to be added to the content area when the content size exceeds the specified container size where the content is enclosed. If the value of overflow is hidden, the content gets clipped post the size of the container thereby making the content invisible.

44. Explain the concept of Tweening.

Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image. It is mainly used for creating animation.

45. Define CSS image scripts.

CSS image scripts are a group of images that are placed into one image. It reduces the load time and request number to the server while projecting multiple images into a single web page.

Programming Questions

1. What will be the output of the following CSS code snippet?

span {
	border: 1px solid red;
    outline: green dotted thick;
}

Explanation: All span elements will have a outer green dotted border and an inner red border.

2. What will be the output of following CSS code snippet?

div { border-width:5px; border-style:dotted solid double dashed; }
Box having dotted top outline, solid right outline, double bottom outline and dashed left outline

3. What will be the output of following CSS code snippet?

h1 {color: "green";}

Explanation:

  1. Output of the above code snippet won’t happen as the declaration syntax is wrong. The correct declaration is : h1 { color: green; } which will yield an output. In CSS, we don’t write the value in double quotes.

4. What will be the output of following CSS code snippet?

h1 {color: red text-decoration: underline; font-style: italic;}

In this case, we should see the browser continue to parse the value of color as “red text-decoration: underline” before it sees a closing semicolon. The font-style property that follows would then be used. Because the color property has an illegal value, it should be ignored.

5. How to select all paragraph elements in a div element?

Answer: div p
Explanation: The CSS descendant selector is used to match the descendant elements of a particular element and represent it using a single space. The word descendant indicates nested anywhere in the DOM tree.

6. Which of the following is the correct syntax to select the p siblings of a div element?

Answer: div ~ p
Explanation: General sibling selector uses the tlide (~) sign as the separator between the elements. It can be used for selecting the group of elements that share the common parent element. The syntax div ~ p will select the paragraph elements that are the siblings of the div element.

7. Place an image behind a text message using z-index property.

<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>Z-Index demonstration</h1>
<img src="https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU=">

</body>
</html>

Output:

Explanation: The code uses z-index property to place the image behind the text. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

8. Using animation property, render a div element which changes color from red to yellow to red on a loop.

<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Explanation: The above code uses animation with iteration count infinite. The number of times the animation will run is infinite. At 0% completion of the animation, the background colour is red, at 50% it is yellow and at 100% it is back to red.

Sign up for FREE 3 months of Amazon Music. YOU MUST NOT MISS.