TOP 10 CSS interview questions

Below is a list of CSS interview questions that you are very likely to face when applying for a front end position.

🤨Q. What are the three main ways to add CSS to a webpage? Describe the advantages and disadvantages of each method.

🤓A. There are three ways to apply CSS to a webpage—inline, embedded, and as an external style sheet. The three approaches along with their pros and cons are described below.

Inline CSS can be written directly into the HTML elements as a style attribute. The primary advantage of inline CSS is the ability to override other style specifications in the single instance of an HTML element that it is applied to. However, this is only feasible if there are a small number of style definitions. It is generally better to use embedded or external style sheets for more complex styles.
External style sheets allow the developer to separate style from content, and control multiple HTML documents from a single separate file, making it easy to style the entirety of a site with a single document. It enables complex styling through classes, selectors, and other grouping methods. The disadvantage of an external CSS file is that it must be downloaded first for the HTML file to be properly rendered.
Embedded CSS can be written within the <style> tags inside the <head> section of an HTML document. It shares many of the same advantages as the External Style Sheet, with access to classes, selectors, and more complex styling. Embedded CSS has the added advantage of loading with the HTML document—no extra download required. However, that also means that any external HTML documents will not inherit the styling of CSS written within these tags.

🤨Q. What are CSS media queries and what are they used for?

🤓A. CSS media queries are the filters that make responsive web design (RWD) possible. With the introduction of laptops, tablets, and smartphones with screens of varying sizes and aspect ratios, RWD is crucial for modern day app development. CSS media queries adjust content style based on device characteristics like width, height, orientation, resolution, and display type. When used properly, the end result is a website or app capable of providing a sleek UI/UX across multiple devices.

🤨Q. What is a CSS preprocessor? Would you recommend using one for this project?

🤓A. A preprocessor is an abstraction layer built on top of CSS. Preprocessors extend the functionality of CSS by offering powerful features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors—try asking the developer which one they prefer more. Selecting a preprocessor really boils down to preference, and it can be revealing to see how a particular developer might decide to use one over the other for your project.

🤨Q. List the basic layout components of the CSS box model with a brief description for each

🤓A. In many ways, front-end web design is all about managing rectangles, and the CSS box model provides a layout paradigm for HTML elements that you can use to structure a webpage. The basic components are described below.

border: The border surrounding the padding.
content: Any text or images within the box.
margin: The transparent area surrounding borders.
padding: The transparent area surrounding content.

🤨Q. How would you implement the basic layout components of the box model in CSS? Give an example.

🤓A. Each element of the box model—border, content, margin, and padding—can be specified independently for each side of the element by listing dimensions in the following order: top, bottom, right, and left. Alternatively, multiple sides can be specified as a group by listing fewer parameters. An example has been provided below.

margin: 50px 100px 100px 50px;
/* Sets the top, right, bottom and left margins */

margin: 25px;
/* Sets the margin on all sides */

padding: 50px 100px;
/* Sets the top/bottom margin as a group and the right/left margin as a group */

🤨Q. Give an example of how you would use counter-increment and counter-reset in CSS to create automatic numbering within a webpage.

🤓A. The counter-reset and counter-increment properties allow a developer to automatically number CSS elements like an ordered list (<ol>). The counter-reset property resets a CSS counter to a given value. The counter-increment property then increases one or more counter values. Automatic numbering within a webpage is often useful, much like the section headers within this article. An example of how to use counters in CSS is displayed below.

body {
    counter-reset: foo;
}

h1 {
    counter-reset: bar;
}

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

h2:before {
    counter-increment: bar;
    content: counter(foo) "." counter(bar) " "; 
}

🤨Q. Describe the following common CSS units of length: cm, em, in, mm, pc, pt, and px.

🤓A. There are many ways to express units of length within CSS, but these are just some of the more common ones.

cm: centimeters
em: a relative unit of measurement based on the size of a font
in: inches
mm: millimeters
pc: pica, a unit of length equivalent to 12 points, or 1/6 of an inch
pt: 1/72 of an inch
px: a device-specific relative measurement equivalent to a certain number of pixels on a display

🤨Q.What are CSS vendor prefixes? Can you name some of the more common ones that you’re familiar with?

🤓A. Depending on your project, you might be looking for a CSS developer who can take advantage of experimental non-standard features that are only available on certain platforms. Vendor prefixes are extensions to CSS standards that can be added to these features to prevent incompatibilities from arising when the standard is extended. CSS vendor prefixes for some common platforms are listed below.

-webkit-: Android, Chrome, iOS, and Safari
-moz-: Mozilla Firefox
-ms-: Internet Explorer
-o-: Opera

🤨Q. How do you define a pseudo class in CSS? What are they used for?

🤓A. You can define a pseudo class by listing the selector followed by a colon and finally the pseudo class element. Pseudo classes can be used to give elements special states—the most common example being a:hover, which is used to change the color of a link when a mouse hovers over it. Other uses include using distinct styling for visited and unvisited links and styling an element differently when focused.

🤨Q. How would you select all the PDF links in the code block below with a single line of code?

<body>

<p><a href="default.asp" target="_blank">This is a link</a></p>
<p><a href="mydocument.pdf" target="_blank">This is a PDF</a></p>
<p><a href="default.asp" target="_blank">This is a link</a></p>
<p><a href="mydocument.pdf" target="_blank">This is a PDF</a></p>

</body>

🤓A big part of CSS is selecting and stylizing particular elements on a page. This question tests a developer’s knowledge of attribute selectors. All the elements of interest on the page happen to be links, but not all links are linking to PDFs. In CSS you can target the ending of the PDF link “.pdf” to quickly select all the PDF files by using the [attribute$=”value”] selector, which selects elements whose value ends with a specified value. In this case, we can use a[href$=“.pdf”] to select all PDF links.