Engineering, Design, Marketing, and More

CSS interview questions

The most popular questions

Use our complementary questions and answers to filter and hire the best. Questions crowdsourced by our clients, answers by Punch. We provide these complementary questions to help our clients more quickly create tests for potential hires at their organizations.

Get a question answered
Punch offers four divisions of services: design, engineering, staffing, and demand

Interview questions for your next interview

Question
Explain what a class selector is and how it’s used.
Answer
A class can be thought of as a grouped collection of CSS attributes applied to HTML elements. This allows you to apply the same styling to multiple HTML elements by placing them in the same CSS class.

Class methods can be called by inserting a ‘class’ property and name within an HTML element, then calling the class name with a ‘.’ in the CSS doc.

The code listed here identifies the class ‘intro’ in the HTML doc, then applies the same background-color styling to all paragraphs within that class.
Question
What are pseudo classes and what are they used for?
Answer
Pseudo classes are similar to classes, but are not explicitly defined in the markup, and are used to add additional effects to selected HTML elements such as link colors, hover actions, etc.

Pseudo classes are defined by first listing the selector, followed by a colon and then pseudo-class element. E.g., a:link{ color: blue }, or a:visited { color: red }

:link, :visited, :hover, :active, :first_line are all examples of pseudo classes, used to call a specific action on an element, such as the changing of a link color after it has been visited.

Find developers today

Hire a Punch engineer

Punch offers four divisions of services: design, engineering, staffing, and demand. Our four divisions form the core of our People Forward Approach.

Contact us
Find developers today
Question
Explain the three main ways to apply CSS styles to a Web page.
Answer
Inline: Though this method often goes against best practices, it’s easily done by inserting a ‘style’ attribute inside an HTML element.

Embedded/Internal: Done by defining the head of an HTML document by wrapping characteristics in a <style> tag. Linked/External: CSS is placed in an external .css file, and linked to the HTML document with a <link> tag. This can also be accomplished using the ‘@import’, however, this can slow page load time and is generally not advised.
Question
What is grouping and what is it used for?
Answer
Grouping allows you to apply the same style to multiple elements with a single declaration. This is done by grouping the selectors into a list, separated by commas.

Grouping helps memory usage and enhances readability.
Question
What is an ID selector and how is it used?
Answer
IDs are used to identify and apply styling to a single specific HTML element. IDs are defined within the HTML page by inserting an ID selector in the HTML element. ID selectors are defined within the CSS page by calling a ‘#’ followed by the name of the ID. ID selectors are unique and can only be applied to a single element.
Question
What is a Class selector and how does it differ from an ID selector?
Answer
Class selectors are used to apply style to multiple HTML identified with the same class. Class selectors are called within the CSS document by a ‘.’, followed by the class name. The main difference is that the same class selector can be applied to multiple HTML elements, whereas ID selectors are unique.
Question
What are child selectors?
Answer
Child selectors are another way to group and style a set of elements that descend from a parent element. A child selector is matched by calling two or more elements, separated by a ‘>’ sign to indicate inheritance.
Question
How is the float property implemented in CSS?
Answer
Floats allow an element to be positioned horizontally, allowing elements below the floated element to flow around it. Several floating elements can be placed together to make a gallery type layout. Floats can only accept a left or right value. To prevent subsequent elements from flowing around the floated element, pass in the clear property, followed by the side you wish to disable (i.e., ‘left’, ‘right’, ‘both’).
Question
What is the CSS Box Model used for? What are the elements that it includes?
Answer
CSS box model is made up of margins, borders, padding, and content. Box model provides a structured way to space elements in relationship to each other.
Question
How to restore the default property value using CSS?
Answer
In short, there’s no easy way to restore to default values to whatever a browser uses . The closest option is to use the ‘initial’ property value, which will restore it to the default CSS values, rather than the browser’s default styles.

Find developers today

Hire a Punch engineer

Punch offers four divisions of services: design, engineering, staffing, and demand. Our four divisions form the core of our People Forward Approach.

Contact us
Find developers today
Question
How are inline and block elements different from each other?
Answer
A block element is an element that takes up the full width available, and has a line break before and after it. <h1>, <p>, <li>, and <div> are all examples of block elements. An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <span> are examples of inline elements.
Question
What is the purpose of the z-index and how is it used?
Answer
The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number. An element with a higher z-index is always stacked above one with a lower index.
Question
Why shouldn’t I use fixed sized fonts?
Answer
Often times, fixed font sizes will show up incorrectly on the user end and will prohibit responsiveness. Using relative sizing will keep fonts proportionate in their relationships to each other and will allow for greater end user flexibility.
Question
Which font names are available on all platforms?
Answer
Only five basic font families( serif, sans-serif, cursive, fantasy, and monospace) are recognized across platforms, rather than specific fonts. Specific font name recognitions will vary by browser.
Question
What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)
Answer
Ability to use nested sytax, define variables and mixins, use of mathematical and operational functions, and the ability to join multiple files into a single one.

Ask a question

Ask a question, and one of our engineers will answer it.

We keep our questions nice and simple to be useful for everyone, and we may not answer or publish every question.

Your number is stored privately and never shared.
By submitting a question, you agree to our terms.
Request sent. Thank you!
Send another one