What is CSS selector specificity?
CSS selector specificity is a ranking system that determines which CSS rule applies when multiple rules could apply to the same element.
Specificity is calculated based on the types of selectors used: inline styles, IDs, classes, attributes, and element selectors.
What is the difference between resetting and normalizing CSS?
- Resetting CSS: removes all default browser styles
- Normalizing CSS: preserves useful default styles while correcting inconsistencies
Choosing between them depends on the project requirements and desired browser behavior.
Describe floats and how they work.
Floats are a CSS positioning technique that allows elements to be taken out of the normal document flow and positioned to the left or right of their container.
Floats are commonly used for text wrapping around images.
Describe z-index and how stacking context is formed.
Z-index is a CSS property that determines the stack order of elements. Higher values are stacked on top of lower values.
A new stacking context is formed when an element is positioned and has a z-index value other than ‘auto’.
Describe BFC (Block Formatting Context) and how it works.
BFC is a layout mechanism that allows block-level elements to be contained within a specific area, preventing margin collapse and controlling floats.
Elements that create a BFC include floated elements, absolutely positioned elements, and elements with overflow set to anything other than ‘visible’.
What are the various clearing techniques and which is appropriate for what context?
- Clearfix: adds a pseudo-element to clear floats
- Overflow: setting overflow to ‘auto’ or ‘hidden’
- Clear property: using the clear property on an element
The choice depends on the layout and specific requirements of the design.
Explain CSS sprites, and how you would implement them on a page or site.
CSS sprites combine multiple images into a single image file to reduce HTTP requests.
To implement, use background positioning to display the desired part of the sprite.
How would you approach fixing browser-specific styling issues?
Use CSS resets, vendor prefixes, and feature detection tools like Modernizr.
Testing across different browsers and using conditional comments or polyfills can also help.
How do you serve your pages for feature-constrained browsers?
Use progressive enhancement, graceful degradation, and serve simplified versions of pages.
Techniques include using HTML5 shims and avoiding CSS features unsupported by older browsers.
What are the different ways to visually hide content (and make it available only for screen readers)?
- Using
display: none; - Using
visibility: hidden; - Using
position: absolute;with off-screen positioning
The choice depends on whether the content should be completely hidden or just visually hidden.
Have you ever used a grid system, and if so, what do you prefer?
Yes, I prefer using CSS Grid for its flexibility and control over layout.
Grid systems help create responsive layouts more efficiently.
Have you used or implemented media queries or mobile specific layouts/CSS?
Yes, media queries are essential for responsive design, allowing styles to adapt based on screen size.
They enable different layouts for mobile, tablet, and desktop views.
Are you familiar with styling SVG?
Yes, SVG can be styled with CSS just like HTML elements.
This includes setting fill, stroke, and other properties.
Can you give an example of an @media property other than screen?
@media print { … }
This targets styles specifically for printed documents.
What are some of the ‘gotchas’ for writing efficient CSS?
- Overly specific selectors can lead to maintenance issues
- Excessive use of !important can cause conflicts
- Not using shorthand properties can increase file size
Keeping CSS organized and modular helps avoid these issues.
What are the advantages/disadvantages of using CSS preprocessors?
- Advantages: variables, nesting, mixins, and functions
- Disadvantages: added complexity and build process
Preprocessors like SASS and LESS enhance CSS but require a compilation step.
Describe what you like and dislike about the CSS preprocessors you have used.
- Like: Improved organization and maintainability
- Dislike: Learning curve and build setup
Personal preferences may vary based on project needs.
How would you implement a web design comp that uses non-standard fonts?
Use @font-face to load custom fonts and ensure fallbacks are in place.
This allows for consistent typography across different browsers.
Explain how a browser determines what elements match a CSS selector.
The browser parses the HTML and CSS, applying specificity rules and inheritance to determine which styles apply.
It checks the DOM tree against the CSS rules in the order they are defined.
Describe pseudo-elements and discuss what they are used for.
Pseudo-elements are used to style specific parts of an element, such as ::before and ::after.
They allow for additional styling without adding extra HTML elements.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
The box model consists of margins, borders, padding, and the content area. Use box-sizing to control how the box model is applied.
box-sizing: border-box; includes padding and border in the element’s total width and height.
What does * { box-sizing: border-box; } do? What are its advantages?
It changes the box model so that padding and borders are included in the element’s total width and height.
This simplifies layout calculations and prevents overflow issues.
What is the CSS display property and can you give a few examples of its use?
The display property controls how an element is displayed on the page. Examples include:
* block
* inline
* flex
* grid
Each value affects layout and behavior differently.
What’s the difference between inline and inline-block?
- Inline: elements do not start on a new line and only take up as much width as necessary
- Inline-block: elements do not start on a new line but can have width and height
Inline-block allows for padding and margins to be applied.
