Commonly Asked CSS Questions for UI Developers
1. What are different ways to apply styles to the web page?
2. What is the difference between classes and IDs in CSS?
3. Describe pseudo-elements and discuss what they are used for.
4. Describe the Pseudo class?
5. CSS grouping?
6. Explain how a browser determines what elements match a CSS selector.
7. Explain your understanding of the box model? How you would tell the browser in CSS to render your layout in different box models.
8. What does * { box-sizing: border-box; } do? What are its advantages?
· box-sizing: border-box changes how the width and height of elements are being calculated, border and padding are also being included in the calculation.
· The height of an element is now calculated by the content's height + vertical padding + vertical border width.
· The width of an element is now calculated by the content's width + horizontal padding + horizontal border width
Grid and flexbox. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
9. Have you played around with the new CSS Flexbox or Grid specs?
flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
10. What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
11. What is the difference b/w inline and block?
12. What's the difference between inline, inline-block and block?
13. What is the difference b/w display: none and display: hidden?
14. Shorthand properties?
15. Describe Floats and how they work and various techniques?
· Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike position: absolute elements, which are removed from the flow of the page.
· The CSS clear property can be used to be positioned below left/right/both floated elements.
· If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.
· The .clearfix hack uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class clearfix to it. Then apply this CSS:
16. CSS Sprites?
17. Describe z-index and how stacking context is formed.
18. Describe BFC (Block Formatting Context) and how it works.
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.
19. What are your favorite image replacement techniques, and which do you use when?
20. How would you approach fixing browser-specific styling issues?
21. How do you serve your pages for feature-constrained browsers?
22. What techniques/processes do you use?
23. What are the different ways to visually hide content (and make it available only for screen readers)?
24. Have you ever used a grid system, and if so, what do you prefer?
25. Have you used or implemented media queries or mobile specific layouts/CSS?
26. Are you familiar with styling SVG?
27. How do you optimize your webpages for print?
28. What are some of the "gotchas" for writing efficient CSS?
29. What are the advantages/disadvantages of using CSS preprocessors?
30. Describe what you like and dislike about the CSS preprocessors you have used.
31. How would you implement a web design comp that uses non-standard fonts?
32. List as many values for the display property that you can remember.
33. What's the difference between a relative, fixed, absolute and statically positioned element?
static, relative, fixed, absolute, sticky
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A "positioned" element is one whose position is anything except static.
div.relative { position: relative; width: 400px;height: 200px;border: 3px solid #73AD21;} div.absolute { position: absolute; top: 80px;right: 0;width: 200px;height: 100px;border: 3px solid #73AD21; } div.relative { position: absolute; width: 400px; height: 200px; border: 3px solid #73AD21;}
div.absolute {
position: relative ;top: 80px;right: 0;width: 200px;height: 100px;border: 3px solid #73AD21;
}
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).
34. 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?
35. What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
36. How is responsive design different from adaptive design?
37. Have you ever worked with retina graphics? If so, when and what techniques did you use?
38. Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?
39. CSS 2D Transforms