How would you center an element horizontally and vertically?
Solution:
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<body>
<div class=”container”>
<div class=”box”>
<h1>Hello, World!</h1>
</div>
</div>
</body>
</html>
What is the box model in CSS?
Solution:
The box model is a concept in CSS that refers to the rectangular box that surrounds every HTML element. It consists of four parts: content, padding, border, and margin. The content is the actual text or media that is displayed within the element, while the padding is the space between the content and the border. The border is the visible edge around the element, and the margin is the space between the border and other elements on the page.
How would you create a responsive layout using CSS?
Solution:
<html>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-12 col-sm-6 col-md-4″>
<div class=”box”>
<h1>Box 1</h1>
</div>
</div>
<div class=”col-12 col-sm-6 col-md-4″>
<div class=”box”>
<h1>Box 2</h1>
</div>
</div>
<div class=”col-12 col-sm-6 col-md-4″>
<div class=”box”>
<h1>Box 3</h1>
</div>
</div>
</div>
</div>
</body>
</html>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.item {
width: 50%;
}
}
What is the difference between display: none and visibility: hidden?
Solution:
display: none removes the element from the document flow and makes it completely invisible, while visibility: hidden hides the element but still reserves space for it in the layout.
How would you create a hover effect on a button?
Solution:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.2s ease-in-out;
}
.button:hover {
background-color: darkblue;
}
How would you add a custom font to a website?
Solution:
@font-face {
font-family: ‘CustomFont’;
src: url(‘path/to/font.woff2’) format(‘woff2’),
url(‘path/to/font.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘CustomFont’, sans-serif;
}
How would you create a fixed header that stays at the top of the page while scrolling?
Solution:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1;
}
How would you create a responsive image that adjusts its size based on the screen width?
Solution:
img {
max-width: 100%;
height: auto;
}
How would you create a gradient background using CSS?
Solution:
body {
background: linear-gradient(to bottom, #f1c40f, #e67e22);
}
How would you create a sticky footer that stays at the bottom of the page?
Solution:
html, body {
height: 100%;
}
.container {
min-height: 100%;
margin-bottom: -50px; /* height of footer */
}
.footer {
height: 50px;
}
<html>
<body>
<div class=”container”>
<h1>Main Content</h1>
</div>
<div class=”footer”>
<p>Sticky Footer</p>
</div>
</body>
</html>
How would you create a CSS animation?
Solution:
<html>
<body>
<div class=”box”></div>
</body>
</html>
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.element {
animation: slide 1s infinite;
}
How would you create a responsive grid system using CSS?
Solution:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
How would you create a custom checkbox using CSS?
Solution:
input[type=”checkbox”] {
display: none;
}
.checkbox {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid gray;
border-radius: 4px;
}
.checkbox:checked {
background-color: blue;
}
How would you create a responsive navbar using CSS?
Solution:
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.menu {
display: none;
}
@media (min-width: 768px) {
.menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
}
}
How would you create a CSS tooltip?
Solution:
.tooltip {
position: relative;
}
.tooltip:before {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 5px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out;
}
.tooltip:hover:before {
opacity: 1;
visibility: visible;
}
How would you create a custom scrollbar using CSS?
Solution:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background-color: lightgray;
}
How would you create a responsive image gallery using CSS?
Solution:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.gallery img {
max-width: 100%;
height: auto;
display: block;
}
How would you create a CSS transition on hover?
Solution:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: transform 0.2s ease-in-out;
}
.button:hover {
transform: scale(1.1);
}
How would you create a responsive font size using CSS?
Solution:
body {
font-size: calc(16px + (20 – 16) * ((100vw – 320px) / (1600 – 320)));
}
How would you create a CSS hover effect that reveals text over an image?
Solution:
.container {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.container:hover .text {
opacity: 1;
}
How would you center an element horizontally and vertically using CSS?
Solution:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
How would you create a CSS fade-in animation?
Solution:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
opacity: 0;
animation: fadeIn 1s forwards;
}
How would you create a sticky header using CSS?
Solution:
header {
position: sticky;
top: 0;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 20px;
}
How would you create a CSS flip card?
Solution:
.card {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
}
.card:hover {
transform: rotateY(180deg);
}
.card .front,
.card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card .front {
z-index: 2;
background-color: white;
}
.card .back {
transform: rotateY(180deg);
background-color: blue;
color: white;
}
How would you create a CSS progress bar?
Solution:
.progress {
position: relative;
width: 100%;
height: 20px;
background-color: lightgray;
border-radius: 10px;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: blue;
border-radius: 10px;
transition: width 0.2s ease-in-out;
}
.progress-bar-50 {
width: 50%;
}
<html>
<body>
<div class=”progress progress-bar-50″>
<div class=”progress-bar”></div>
</div>
</body>
</html>
How would you create a CSS triangle?
Solution:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
}
How would you create a CSS accordion?
Solution:
.accordion {
width: 100%;
}
.accordion-item {
background-color: white;
border: 1px solid lightgray;
border-radius: 5px;
margin-bottom: 10px;
overflow: hidden;
}
.accordion-header {
padding: 10px;
font-weight: bold;
cursor: pointer;
}
.accordion-header:hover {
background-color: lightgray;
}
.accordion-content {
padding: 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.accordion-item.active .accordion-content {
max-height: 500px;
}
How would you create a CSS pulse effect?
Solution:
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.5); }
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
animation: pulse 1s infinite alternate;
}
How would you create a CSS tooltip?
Solution:
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 5px 10px;
border-radius: 5px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
How would you create a CSS responsive grid?
Solution:
.row::after {
content: “”;
clear: both;
display: table;
}
.col {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.col {
width: 50%;
}
}
@media (min-width: 992px) {
.col {
width: 33.33333%;
}
}
@media (min-width: 1200px) {
.col {
width: 25%;
}
}
How would you create a CSS gradient background?
Solution:
.gradient {
background: linear-gradient(to bottom right, #1abc9c, #2ecc71);
}
How would you create a CSS navigation bar?
Solution:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar li {
margin-right: 20px;
}
.navbar a {
color: blue;
text-decoration: none;
font-weight: bold;
}
.navbar a:hover {
text-decoration: underline;
}