CSS Questions For Interview & Simplified Answers

I did not write these CSS questions only for passing the interview but also it will help you to learn in-depth. I hope this will help you on your learning path. And also it will help to solve web design issues in your practical life. After learning, you can take an assessment and see your progress.

Disclaimer: Please do not use these questions & answers while you sit for an online examination or taking an assessment.

1. How to center a button?

button {
    display: block;
    margin: 0 auto;
}

To center a button, the first step is to block it and then give it an auto margin both on the left & right sides. If you do not block the button then the margin property will not work. You can also center a button using flexbox and other different ways.

2. How to indent the first line of a paragraph from 90px left?

p{
    text-indent: 90px;
}

The text-indent property in CSS allows you to define the starting point of a certain element. It also accepts negative values such as -90px.

3. How to specify or increase space between letters?

p, a, button, h2, div {
    letter-spacing: 3px;
}

The letter-spacing property specifies the space between letters. It also accepts negative values and brings the letters closer.

4. How to capitalize all the first letters of each word in a headline (h1)?

h1 {
    text-transform: capitalize;
}

The text-transform property specifies the transformation of texts. It also accepts other values: lowercase, uppercase.

5. How to use an image as the background of a section?

section {
    background-image: url("path-to-the-image/picture.jpg");
}

It’s a good practice to use ‘background-color’ along with the ‘background-image’ property. It will work as a fallback. If the image takes longer to load, the background color will come into play in the meantime.

6. How to center an image?

img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

Images are an inline element. So you do need to block it. Otherwise, the margin property will not work. Here width value is just to make sure that it does not exceed the viewport.

7. How to center text?

p {
    text-align: center;
}

The text-align property is responsible for aligning texts. It’s also applicable for other HTML elements, classes, IDs, etc.

8. How to center a div?

div {
    max-width: 400px;
    margin: 0 auto;
}

You have to assign a width value first and then auto margin both from left & right side to center a div. You can also use max-width instead of width.

9. How make a round corner?

.element {
    border-radius: 50%;
}

The 50% value will make sure that all four corners are fully rounded. But you can use a pixel or any other value depending on your needs. However, the 50% will make it fully rounded in all scenarios.

10. How to assign border to an image?

img {
    border: 1px solid #FF9800;
    padding: .725rem;
}

The padding is not required to assign the border to the image. But small padding looks good with image border.