15 Essential CSS Interview Questions Asked At Proficed

In this blog post, we will discuss 15 common CSS interview questions asked at Proficed for roles like “Website Designer” and “Frontend Developer.” These questions aim to assess your core knowledge and your ability to apply CSS techniques in practical scenarios.

1. Is it possible to make the <b> tag work like the <i> tag and vice-versa using CSS? If yes, how? If no, why not?

• Yes, it is possible to make the <b> tag behave like the <i> tag and vice-versa by using the font-style and font-weight properties in CSS.
  • To make <b> behave like <i>, apply font-style: italic;.
  • To make <i> behave like <b>, apply font-weight: bold;.
  • To revert <b> back to normal text (non-bold), apply font-weight: normal;.
  • To revert <i> back to normal text (non-italic), apply font-style: normal;.

2. What is the difference between the <strong> and <b> tags?

• <strong> has semantic meaning, indicating that the content is of strong importance. It is often displayed as bold text, but its meaning can also be interpreted by screen readers.
• <b> is purely a visual element used to make text bold without any semantic meaning.

3. Are there any math functions in CSS?

• Yes, CSS includes several math functions like calc(), min(), max(), and clamp() to perform calculations directly within the CSS.

4. How can I number headings using CSS?

You can use the counter-reset and counter-increment properties in CSS along with the content property in a ::before pseudo-element to number headings.

h1 {
    counter-reset: section;
}
h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

5. What is the difference between em and rem in CSS?

• em is relative to the font size of its nearest parent element, while rem is relative to the font size of the root element (html tag). This makes rem easier to predict across different components.

6. How can you change the color of the blinking cursor on a textbox using CSS?

You can change the color of the blinking cursor (caret) using the caret-color property in CSS.

input {
    caret-color: red;
}

7. I want to create a responsive div that is 20% wider than its parent, but its width should range between 50px and 500px. Which CSS property can be used if I don't want to use min-width and max-width?

The clamp() CSS function can be used here. It allows setting a preferred value with limits, which in this case is 20% width with a minimum of 50px and a maximum of 500px.

div {
    width: clamp(50px, 20%, 500px);
}

8. What are the CSS Units?

• CSS units are measurements used in web design. They include:
  • Absolute units: px, cm, mm, in
  • Relative units: em, rem, vw, vh, %

9. What are CSS transitions?

CSS transitions allow you to change property values smoothly (over a given duration) instead of instantaneously.

div {
    transition: background-color 0.5s ease;
}

10. What is masking in CSS?

• Masking in CSS is used to hide part of an element using an image or gradient, creating visual effects. You can use the mask property to apply a mask over an element.

11. How can you make a div transparent without using the opacity property?

You can achieve transparency by using an rgba color with an alpha value for the background color.

div {
    background-color: rgba(255, 255, 255, 0.5); /* 50% transparent */
}

12. Which pseudo-element should be used for drop-capping a paragraph?

The ::first-letter pseudo-element can be used to create a drop-capped effect on the first letter of a paragraph.

p::first-letter {
    font-size: 2em;
    float: left;
}

13. How can you indent the first line of text in a paragraph?

Use the text-indent property to indent the first line of a paragraph.

p {
    text-indent: 20px;
}

14. Using which CSS property can you apply graphical effects such as blur or grayscale to images?

The filter property can be used to apply graphical effects like blur or grayscale.

img {
    filter: blur(5px) grayscale(100%);
}

15. There is an image that is 400px wide and 300px tall. I want to fit it inside a div that is 200px wide and 300px tall. I want to make sure no part of the image is cropped and no part of the image is stretched. What should I do?

You should use the object-fit: contain; property to ensure that the image scales to fit the div without being stretched or cropped.

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

These questions span a wide range of CSS knowledge, from foundational properties to advanced concepts like Flexbox and Grid layouts. Preparing for them will boost candidates' confidence during interviews for positions like “Website Designer” and “Frontend Developer” at Proficed.