Here are 40 CSS interview questions with answers and code samples to help you better prepare for CSS interviews.
- How to center an element?
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- How to make an element hidden?
.element {
display: none;
}
- How to make an element invisible but take up space?
.element {
visibility: hidden;
}
- How to clear the float?
.parent::after {
content: "";
display: table;
clear: both;
}
- How to set the font?
.element {
font-family: Arial, sans-serif;
}
- How to set font size?
.element {
font-size: 16px;
}
- How to set font bold?
.element {
font-weight: bold;
}
- How to set font color?
.element {
color: #000000;
}
- How to set background color?
.element {
background-color: #ffffff;
}
- How to set background image?
.element {
background-image: url("image.jpg");
}
- How to set background repeat?
.element {
background-repeat: repeat-x;
}
- How to set background size?
.element {
background-size: cover;
}
- How to set the border?
.element {
border: 1px solid #000000;
}
- How to set border radius?
.element {
border-radius: 5px;
}
- How to set border shadow?
.element {
box-shadow: 1px 1px 5px #000000;
}
- How to set the text to center?
.element {
text-align: center;
}
- How to set text wrapping?
.element {
word-wrap: break-word;
}
- How to style the list?
.element {
list-style: none;
}
- How to set hyperlink style?
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
}
- How to set clear default style?
* {
margin: 0;
padding: 0;
}
- How to set browser compatibility?
.element {
-webkit-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}
- How to set the center alignment of elements?
.parent {
display: flex;
justify-content: center;
align-items: center;
}
- How to set text overflow ellipsis?
.element {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- How to set element positioning?
.element {
position: absolute;
top: 0;
left: 0;
}
- How to set element width?
.element {
width: 100%;
}
- How to set element height?
.element {
height: 100px;
}
- How to set element minimum width?
.element {
min-width: 500px;
}
- How to set element minimum height?
.element {
min-height: 200px;
}
- How to set element max width?
.element {
max-width: 1000px;
}
- How to set element max height?
.element {
max-height: 500px;
}
- How to set element transparency?
.element {
opacity: 0.5;
}
- How to animate elements?
.element {
animation: myanimation 1s infinite;
}
@keyframes myanimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- How to set element transition?
.element {
transition: all 1s ease-in-out;
}
- How to set element rotation?
.element {
transform: rotate(45deg);
}
- How to set element scaling?
.element {
transform: scale(2);
}
- How to set element tilt?
.element {
transform: skewX(30deg);
}
- How to set the element to move?
.element {
transform: translateX(50px);
}
- How to set element hierarchy?
.element {
z-index: 1;
}
- How to set element floating?
.element {
float: left;
}
- How to set element fixed positioning?
.element {
position: fixed;
top: 0;
left: 0;
}
}