Home/Blog/Interview Questions about CSS Job Application, Part 3
Man and woman shaking hands

Interview Questions about CSS Job Application, Part 3

Following part 1 – Questions about Front-end job application; and 2 – Questions about HTML Job Application, it is time for part 3 — refresh your CSS knowledge and take notes which interview questions are common on a CSS job interview.

1. In how many ways can CSS be added to a web page?

  • Inline
  • In <style> tag
  • Separate css file

2. What Is A CSS Reset?

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible.

For example, most browsers make links blue and visited links purple by default, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything.

3. What is the difference between block and inline elements?

  • A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
  • An inline element does not start on a new line and only takes up as much width as necessary. An element with display: inline; cannot have a height or a width or a vertical margin. An element with display: block; can have a width, height and margin. If you want to add a height to an inline element, you need to set this element to display: inline-block;

4. What is the difference between classes and IDs in CSS?

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one element.

5. What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

  • CSS resets aim to remove all built-in browser styling. Standard elements like H1–6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You’re then supposed to add all decoration yourself.
  • Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1–6 will appear bold, larger et cetera in a consistent way across browsers. You’re then supposed to add only the difference in decoration your design needs.

If your design:

a) follows common conventions for typography et cetera, and

b) normalize.css works for your target audience,

then using normalize.css instead of a CSS reset will make your own CSS smaller and faster to write.

6. Describe Floats and how they work.

It’s a box that is pulled to the left or right and let the following content flow along its side.

They are still in the flow of the page, but whereas the elements used to be stacked vertically, now they’re side by side. Very commonly used for things like navigations.

Has an annoying collapsing effect on the parent container. Fixed by clearing the float in the container.

7. Describe z-index and how stacking context is formed.

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default)

A stacking context is formed, anywhere in the document, by any element in the following scenarios:

8. Describe BFC (Block Formatting Context) and how it works.

A Block Formatting Context is part of the visual CSS rendering of a web page in which block boxes are laid out. The positioning scheme to which it belongs is normal flow. According to W3C:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

The above quote pretty much sums up how a block formatting context is formed. But lets redefine it in a way that is easier to understand. A block formatting context is an HTML box that satisfies at least one of the following conditions:

  • The value of float is not none
  • The value of position is neither static nor relative
  • The value of display is table-cell, table-caption, inline-block, flex, or inline-flex
  • The value of overflow is not visible

9. What are the various clearing techniques and which is appropriate for what context?

The Empty Div Method is, quite literally, an empty div. <div style=”clear: both;”></div>. Sometimes you’ll see a <br /> element or some other random element used, but div is the most common because it has no browser default styling, doesn’t have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contextual meaning at all to the page and is there purely for presentation. Of course, in the strictest sense they are right, but it gets the job done right and doesn’t hurt anybody.

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn’t specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.

The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like “clearfix” to it. Then apply this CSS:

.clearfix:after {

content: “.”;

visibility: hidden;

display: block;

height: 0;

clear: both;

}

10. Explain CSS sprites, and how you would implement them on a page or site.

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

11. What are your favourite image replacement techniques and which do you use?

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally, you’d like to show your logo, not text.

12. How would you approach fixing browser-specific styling issues?

Use a separate stylesheet that only loads when that specific browser is being used.

Realize that we don’t have to make the display on every browser exactly identical as long as what we make looks good in each browser.

I also use the knowledge and experience I’ve gained from my years in web development to know in advance what to avoid or what to do to make something work in all the browsers

13. What are the different ways to visually hide content (and make it available only for screen readers)?

  • absolutely positioning the element containing the text and moving it off the screen which include using a negative top position (or/instead of left); negative text indentation; and a height of 0.
  • CSS clipping — includes absolutely positioning the element and clip: rect (0px, 0px, 0px, 0px)
  • read more here: https://www.sitepoint.com/when-and-how-to-visually-hide-content/

14. Have you ever used a grid system, and if so, what do you prefer?

Yes, Bootstrap. It is easy to get started, it has a base styling model for most HTML elements, extensive list of components, bundled javascript plugins and good documentation.

15. Have you used or implemented media queries or mobile-specific layouts/CSS?

Yes. Media queries call styles to the user device based on its dimensions.

16. Are you familiar with styling SVG?

SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. SVG uses styling properties for the following:

  • Parameters which are clearly visual in nature and thus lend themselves to styling. Examples include all attributes that define how an object is “painted,” such as fill and stroke colors, line widths and dash styles.
  • Parameters having to do with text styling such as font family and size.
  • Parameters which impact the way that graphical elements are rendered, such as specifying clipping paths, masks, arrowheads, markers and filter effects.
  • SVG shares many of its styling properties with CSS

17. How do you optimize your webpages for print?

Add the print style sheet, with the media attribute set to “print”, at the end of the list of stylesheets in the header. This will allow you to create custom CSS classes applied only at the time of print. Make sure your structure CSS file is given a media attribute of “all.”

<! — Print only, on bottom →

<link rel=”stylesheet” type=”text/css” href=”/print.css” mce_href=”/print.css media=”print” />

18. What are some of the “gotchas” for writing efficient CSS?

  • Use efficient CSS selectors
  • Avoid a universal key selector.
  • Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.
  • Make your rules as specific as possible.
  • Prefer class and ID selectors over tag selectors.
  • Remove redundant qualifiers.
  • These qualifiers are redundant:
  • ID selectors qualified by class and/or tag selectors
  • Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).
  • Avoid using descendant selectors, especially those that specify redundant ancestors.
  • For example, the rule body ul li a {…} specifies a redundant body selector, since all elements are descendants of the body tag.
  • Use class selectors instead of descendant selectors.
  • Avoid CSS expressions
  • Put CSS in the document head

19. What are the advantages/disadvantages of using CSS preprocessors?

Advantages:

  • Nested tags
  • Ability to define mixins, variables
  • Math functions, operational functions
  • Importing other styles in
  • Modularity, joining of multiple files

Disadvantages:

  • Nested tags are hard to read after a certain point
  • Have to use build tools to compile
  • Easy to abuse (@extend in sass)

20. How would you implement a web design comp that uses non-standard fonts?

Using @font-face and Webfonts (font services like: Google Webfonts, Typekit etc.)

21. Explain how a browser determines what elements match a CSS selector.

One of the important things to understand about how browsers read your CSS selectors is that they read them from right to left. That means that in the selector ul > li a[title=”home”] the first thing thing interpreted is a[title=”home”]. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.

22. Describe pseudo-elements and discuss what they are used for.

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

23. Explain your understanding of the box model and how you can tell the browser in CSS to render your layout in different box models.

For a display purpose, every element in the page is considered a box. The box model refers to the specification of the box attributes such as the width, padding, border and margin.

You can change the box model by setting the box-sizing property. Some values are: content-box (default), padding-box, and border-box):

  • Content-box: width & height includes content but not padding/border/margin
  • Padding-box: include up to padding
  • Border-box: include up to border, but not margin

24. What does * { box-sizing: border-box; } do? What are its advantages?

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. * will apply this rule to all properties.

25. List as many values for the display property that you can remember.

Inline, block, inline-block, none, table, inline-table, table-row, table-cell, flex, inline-flex etc.

26. What’s the difference between inline and inline-block?

Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.

Difference of supported styles as summary:

· inline: only margin-left, margin-right, padding-left, padding-right

· inline-block: margin, padding, height, width

27. What’s the difference between a relative, fixed, absolute and statically positioned element?

Static: This is the default for every single page element. The element will flow into the page as it normally would. The only reason you would ever set an element to position: static; is to forcefully remove some positioning that got applied to an element outside of your control.

Relative: What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be.

There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t really work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.

Absolute: This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left, bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.

The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

Fixed: This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

28. The ‘C’ in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?

The cascading system in CSS is a set of rules that define which property is to be used if one element has the same property assigned in different places.

  • User Opted Styles (E.g. those who are visually impaired may opt for font sizes to be larger)
  • Developer Added Stylesheets/Styles (Ordered by location in document. Lowest Position takes priority.): In line Styles (<p style=”color:blue”></p>); In Style tag <style>p{color:blue;}</style>; Stylesheets (Lowest position in document is priority); User Agent (Browser).

29. Have you played around with the new CSS Flexbox?

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate all kinds of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

30. Explain what Responsive Web Design is. Discuss how it can be achieved with CSS.

Responsive Web design is an approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

The @media rule is used to define different style rules for different media types/devices. In CSS2 this was called media types, while in CSS3 it is called media queries. Media queries look at the capability of the device, and can be used to check many things, such as: width and height of the viewport.

31. How is responsive design different from adaptive design?

Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser’s width).

Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen. Is the browser 300px wide or 30000px wide? It doesn’t matter because the layout will respond accordingly. Well, at least if it’s done correctly!

Adaptive websites adapt to the width of the browser at a specific points. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout.

32. Have you ever worked with retina graphics? If so, when and what techniques did you use?

On retina devices the websites are not broken. They just look vague and pixels start appearing as low resolution images. So the only way to correct is to resize the images by following one of the techniques below:

  • Using alternate high resolution pixels

Suppose we have an image of 200px by 400px (CSS pixels) and we want to display it properly in a retina display, we can upload an alternate image of size 400px by 800px in our server and render them whenever the webpage is opened in a retina device

  • Using @face-fonts instead of images icon
  • Using SVG images instead of Bitmap images
  • Using JavaScript to replace all the images with double sized image

33. Is there any reason you’d want to use translate instead of absolute positioning, or vice-versa? And why?

Yes, translate does not cause the browser to trigger repaint and layout and instead acts only on the compositor. I tend to always use only translate/transform nowadays, and also absolute positioning for an element’s initial position. I’ll then translate it from that initial position for better performance.

34. Tell us your favourite differences between css3 and css2

Media queries, flex grid, new pseudo elements, transitions, translations, animations, new border and background properties etc.

35. Explain what CSS vendor prefixes are.

CSS vendor prefixes, also sometimes known as or CSS browser prefixes, are a way for the browser makers to add support for new CSS features before those features are fully supported in all browsers.

36. Explain what elements will match each of the following CSS selectors:

  • span, a — Selects all <span> elements and all <a> elements
  • span a — Selects all <a> elements inside <span> elements
  • span > a — Selects all <a> elements where the parent is a <span> element
  • span + a — Selects all <a> elements that are placed immediately after <span> elements
  • span ~ a — Selects every <a> element that are preceded by a <span> element

This article is brought to you by
The Web Developer That Your Brand Needs
Check my work
Share on