60+ CSS Interview Questions and Answers (2024)
Uploaded by
Md Naushad60+ CSS Interview Questions and Answers (2024)
Uploaded by
Md Naushad15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/
8 1/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 2/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 3/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 4/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
selector {
Property: value;
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 5/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
element_name {
// CSS Property
}
#id_name {
// CSS Property
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 6/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
.class_name {
// CSS Property
}
/* content */
h1 {
color:rgba(R, G, B, A);
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 7/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
h1 {
color:hsl(H, S, L);
}
HTML
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1{
color:hsl(120, 100%, 30%);
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 8/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 9/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin:50px;
border:70px solid green;
padding:80px;
}
</style>
</head>
<body>
<h1>GEEKSFORGEEKS</h1>
<h2>
Padding properties
</h2>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 10/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 11/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
outline: 5px solid #ddd;
border: 1px solid #000;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 12/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 13/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
list-style-image: none | url | initial | inherit;
display: "none";
display:"block";
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.visible {
display: block;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1 class="visible">visible heading</h1>
<h1 class="hidden">hidden heading</h1>
<p>
Note: The h1 element with display: none;
does not take up any space.
</p>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 14/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
visibility : 'hidden';
visibility :'visible';
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.visible {
visibility: visible;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h2 class="visible">This heading is visible</h2>
<h2 class="hidden">This heading is hidden</h2>
<p>Note: The hidden element still takes up space.</p>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 15/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
visibility: visible| hidden | collapse | initial | inherit;
display: none | inline | block | inline-block;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 16/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
z-index: auto|number|initial|inherit;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 17/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 18/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS | Display property</title>
<style>
#main{
height: 100px;
width: 200px;
background: teal;
display: inline-block;
}
#main1{
height: 100px;
width: 200px;
background: cyan;
display: inline-block;
}
#main2{
height: 100px;
width: 200px;
background: green;
display: inline-block;
}
.gfg {
margin-left:200px;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 19/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:210px;
}
.main {
margin:50px;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">display: Inline-block; property</div>
<div class = "main">
<div id="main"> BLOCK 1 </div>
<div id="main1"> BLOCK 2</div>
<div id="main2">BLOCK 3 </div>
</div>
</body>
</html>
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 20/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
vertical-align: middle;
line-height: normal;
}
div{
GeeksforGeeks
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal and Vertical alignment
</title>
<!-- Style to set horizontal and
vertical alignment -->
<style>
#Outer {
border: 2px solid black;
height: 300px;
position: relative;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id = "Outer">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfgbg.png"/>
</div>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 21/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 22/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
selector: pseudo-class{
property: value;
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 23/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
selector::pseudo-element {
property:value;
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 24/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
background-image: linear-gradient(direction, color-stop1, color-stop2,
...);
background-image: radial-gradient(shape size at position, start-color,
..., l
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 25/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
transition-property: none | all | property | property1,
property2, ..., propertyN;
transition-duration: time;
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 26/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
transition-delay: time;
transition: (property name) | (duration) | (timing function) |
(delay);
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#gfg {
animation-name: color;
animation-duration: 25s;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 27/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
padding-top:30px;
padding-bottom:30px;
font-family:Times New Roman;
}
#geeks {
font-size: 40px;
text-align:center;
font-weight:bold;
color:#090;
padding-bottom:5px;
}
#geeks1 {
font-size:17px;
font-weight:bold;
text-align:center;
}
@keyframes color {
0% {
background-color: red;
}
50% {
background-color: orange;
}
100% {
background-color: brown;
}
}
</style>
</head>
<body>
<div id = "gfg">
<div id = "geeks">GeeksforGeeks</div>
<div id = "geeks1">
A computer science portal for geeks
</div>
</div>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 28/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
box-sizing: content-box|border-box;
@media not | only mediatype and (expression) {
// Code content
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 29/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
.main-container {
display: flex;
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 30/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
grid: none|grid-template-rows / grid-template-columns|grid-template-
areas|
grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-
flow]
grid-auto-rows / grid-template-columns|initial|inherit;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 31/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
@import url|string list-of-mediaqueries;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 32/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
margin: 200px;
border-radius: 100px;
background-color: red;
animation: circle 8s infinite;
}
@keyframes circle {
0% {
background-color: red;
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 33/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 34/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
counter-reset: myCounter;
counter-increment: myCounter;
content: counter(myCounter);
* {
// CSS property
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 35/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
#element_id_name{
// CSS properties
}
.element_class_name{
// CSS properties
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 36/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
.pagination {
display:type
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 37/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
.pagination body {
color:colorname
decoration:type
}
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-box-reflect: right;
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<p>Shows the reflection of the image on right side:</p>
<img src=
"https://media.geeksforgeeks.org/wp-
content/uploads/20210322123023/gfg2.png">
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 38/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Column-count property</title>
<style>
.geeks_content {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding-top:35px;
text-align:justify;
}
.gfg {
text-align:center;
font-size:40px;
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 39/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
font-weight:bold;
color:green;
}
.geeks {
text-align:center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class = "geeks">A computer science portal for geeks</div>
<div class="geeks_content">
Sudo Placement: Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to be
asked in the interviews & make your upcoming
placement season efficient and successful.
Placement preparation solely depends on the
company for which you are preparing. There
are basically three different categories
into which we can divide the companies visiting
campuses for placements based on their recruitment
process. Mass Recruiters, Tech Giants, Others / Start-ups
Companies belonging to the above categories have
their own recruitment process. In this course, we
will try to cover every possible detail required
to know for cracking interview of the companies
falling in each of the above categories.
</div>
</body>
</html>
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 40/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
text-shadow: h-shadow v-shadow blur-radius color|none|initial|
element {
color: blue !important;
font-size: 14px !important;
...
}
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 41/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 42/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 43/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
Article Tags : CSS Interview Questions Web Technologies CSS-Questions +1 More
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 44/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 45/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 46/47
15/10/2024, 15:15 60+ CSS Interview Questions and Answers (2024)
https://www.geeksforgeeks.org/css-interview-questions-and-answers/ 47/47
You might also like
- CSS Interview Questions and Answers - Page 1No ratings yetCSS Interview Questions and Answers - Page 15 pages
- Cascading Style Sheets (CSS) : Irina McguireNo ratings yetCascading Style Sheets (CSS) : Irina Mcguire40 pages
- Css in HTML: CSS2.1 Quick Reference CardNo ratings yetCss in HTML: CSS2.1 Quick Reference Card2 pages
- What Is CSS?: CSS Stands For Cascading Style Sheets MediaNo ratings yetWhat Is CSS?: CSS Stands For Cascading Style Sheets Media17 pages
- CSS Cheat-Sheet Notes (Quick Reference)No ratings yetCSS Cheat-Sheet Notes (Quick Reference)14 pages
- Chapter 4 - Layout Elements and Properties, Forms and InputsNo ratings yetChapter 4 - Layout Elements and Properties, Forms and Inputs56 pages
- Top HTML CSS Questions for Developers 1733075584No ratings yetTop HTML CSS Questions for Developers 173307558411 pages
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
- Top 20 Phone Interview Questions & Answers - GeeksforGeeksNo ratings yetTop 20 Phone Interview Questions & Answers - GeeksforGeeks17 pages
- HTML Interview Questions and Answers (2024) - Intermediate Level - GeeksforGeeksNo ratings yetHTML Interview Questions and Answers (2024) - Intermediate Level - GeeksforGeeks17 pages
- It2357 Web Technology Lab: List of ExperimentsNo ratings yetIt2357 Web Technology Lab: List of Experiments32 pages
- Customui Ribbon Tabs Tab: " " Onload Rxiribbonui - OnloadNo ratings yetCustomui Ribbon Tabs Tab: " " Onload Rxiribbonui - Onload99 pages
- 4 - Topic 4a - Mobile Web Application 2No ratings yet4 - Topic 4a - Mobile Web Application 229 pages
- List of XML and HTML Character Entity References - Wikipedia, The Free EncyclopediaNo ratings yetList of XML and HTML Character Entity References - Wikipedia, The Free Encyclopedia18 pages
- MRP - Material Requirement Planning - Process Flow - DiagramNo ratings yetMRP - Material Requirement Planning - Process Flow - Diagram16 pages
- HTML Xmlns "Http://www.w3.org/1999/xhtml" Xml:lang "En" Lang "En" Scribd Script SRC "Http://s.scribd - Com/javascripts/base - 1238973480.js?1238973498" Type "Text/javascrNo ratings yetHTML Xmlns "Http://www.w3.org/1999/xhtml" Xml:lang "En" Lang "En" Scribd Script SRC "Http://s.scribd - Com/javascripts/base - 1238973480.js?1238973498" Type "Text/javascr1 page
- 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)No ratings yet75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)36 pages
- SR No Candidates Full Name Star Rating Depending Technical Coding Test (Out of 5)No ratings yetSR No Candidates Full Name Star Rating Depending Technical Coding Test (Out of 5)9 pages
