CSS Interview Questions

What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

"Resetting" and "normalizing" CSS are two different approaches to dealing with browser inconsistencies and default styles that can affect the rendering of HTML elements. CSS Reset: This approach involves completely resetting all default styles for HTML elements, so that the developer can start with a clean slate and have complete control over the styling of every element. It involves setting all styles to a common baseline, which can eliminate browser-specific styling inconsistencies. The disadvantage of this approach is that it can result in a lot of extra CSS code, as the developer must manually set styles for every HTML element. CSS Normalize: This approach involves retaining some of the default styles for HTML elements while also normalizing them across different browsers. It aims to create a consistent baseline of styles that are more user-friendly than a full CSS reset. The Normalize.css stylesheet is a popular example of a CSS normalization approach. The advantage of this approach is that it can reduce the amount of CSS code needed, as the developer doesn't need to manually set styles for every HTML element. The choice between a CSS reset or normalize depends on the specific requirements of your project and your personal preferences as a developer. If you prefer complete control over every aspect of the styling and don't mind the extra CSS code, then a CSS reset may be a good option. If you want a more user-friendly baseline of styles while also reducing the amount of CSS code needed, then a CSS normalize may be a better choice.

Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?

- Mobile-first design is a strategy that prioritizes the mobile user experience over the desktop experience, which can lead to better usability and faster load times on mobile devices. - Responsive design, on the other hand, is a strategy that aims to provide a consistent experience across all devices.

What is the difference between a block level element and an inline element. Can you provide examples of each type of element?

A block level element takes over that space from left to right even if its content width isn't big enough to take over that space. It will push over any other elements to the next line. An inline element will let other element align next to it from left to right. Inline elements cannot have margins or padding applied to them, and their width and height are determined by the content within them.

What are some of the "gotchas" for writing efficient CSS?

A high level of specificity means that your styles will be harder to override, but it also makes your CSS harder to maintain and can slow down rendering times. Using descendant like(.main-div p) selectors can also slow down rendering times. Try to avoid using too many of them, especially if they are nested deeply. Redundant code: Avoid repeating the same styles for different selectors. Instead, use classes to group styles that are used more than once. This will help keep your code DRY (Don't Repeat Yourself). Large images. Try to optimize images. Avoid a universal key selector.

What are the advantages/disadvantages of using CSS preprocessors?Describe what you like and dislike about the CSS preprocessors you have used.

Advantages: Variables: CSS preprocessors allow you to define variables, which can simplify the process of writing and maintaining CSS by allowing you to reuse values throughout your stylesheets. Functions: Preprocessors allow you to write functions to generate CSS, which can help you create dynamic stylesheets that respond to changes in user input or other variables. Disadvantages: Performance: Preprocessors can increase the file size of your CSS, as the preprocessed code needs to be compiled into plain CSS before it can be served to the browser. This can affect performance, especially on slower devices or networks. Tooling: Preprocessors often require additional tools and dependencies to be installed, which can make your development environment more complex and harder to set up. I have not used a css preprocessor.

Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?

An example would be :hover. If we add :hover to a selector and when our pointer hovers over that element then they style would change.

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

Block formatting context is an element with a new behavior and its triggered by one of the following properties: * float: left/right * overflow: hidden/auto/scroll *display: table-cell and any of the table related values/inline-block position: absolute/fixed In human terms: * makes the block not wrap around the floated element *makes the block narrower Example: .block1 { float:left;width:100px;} .block2{height:300px; } block1 will be floating left and 'look' like its being consumed by block2. If we have a long paragraph inside block2 it will wrap around block1. If we give block2 overflow of hidden (without setting a width)then block1 and block2 will seperate.

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

COIEG, [co-eeg] acronym The clearfix method: The clearfix method is a popular technique for clearing floats. It involves adding a pseudo-element to the parent container and applying a clear property to it. This technique is appropriate for most scenarios and works well for clearing floats within a container. The overflow method: The overflow method involves setting the overflow property of the parent container to "auto" or "hidden". This technique works well for clearing floats within a fixed-height container. The inline-block method: The inline-block method involves setting the display property of the parent container to "inline-block". This technique works well for clearing floats within a horizontal layout. The empty div method: The empty div method involves adding an empty div element after the floated elements and applying a clear property to it. This technique is not recommended as it adds unnecessary markup to the HTML. The grid layout method: The grid layout method involves using CSS grid to layout content in rows and columns. This technique works well for complex layouts and allows for easy clearing of floats within the grid.

What is the difference between CSS Grid and Flexbox? When would you use one over the other?

CSS grid is more complex and 2 dimensional. You want to use css grid when you need multiple columns and rows with varying sizes. As for flexbox its one dimensional. You can create responsive columns and rows that are less complex.

What is CSS selector specificity and how does it work?

CSS selector specificity is a measure of how specific a CSS selector is, and it determines which CSS styles are applied to an HTML element when multiple styles are defined for the same element. CSS selector specificity is calculated based on the combination of selector types, such as element selectors, class selectors, and ID selectors. The specificity is represented by a four-digit number, with each digit corresponding to a different level of specificity: Thousands place - represents the number of ID selectors Hundreds place - represents the number of class selectors, attributes selectors, and pseudo-classes Tens place - represents the number of element selectors and pseudo-elements Ones place - represents the number of universal selectors For example, the selector "h1#header .nav li.active" has a specificity of 0-1-2-2, because it contains one ID selector, two class selectors, and two element selectors. When multiple CSS rules apply to the same element, the browser determines which rule has the highest specificity, and applies that rule. If two rules have the same specificity, the one that comes later in the CSS file is applied

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

Here's an example of the CSS rules that accomplish this: .sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; top: auto; overflow: hidden; } Note: The following CSS approaches will NOT do the same thing: display: none; or visibility: hidden; hides content for everyone, including screen reader users Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it. Using the "aria-hidden" attribute: The Accessible Rich Internet Applications (ARIA) specification provides the "aria-hidden" attribute, which can be added to an element to hide it from screen readers.

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

I have not used retina graphics. I would be happy to learn it.

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

I have used bootstrap in production. I wouldn't save I have to change anything about it because its a great library.

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

I have used flex box to style my webpages.

Have you used CSS Grid?

I used css grid when I was first learning css but I have not used it since. I added it to my todo list for my next project. Something similar I have used is flex-box.

🚫try this out in CodeSandbox. How is clearfix css property useful?

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto; to the containing element to fix this problem.

Are you familiar with styling SVG?

In my Portfolio Project I have position and changed the font-size of svgs.

What's the difference between inline and inline-block?

Inline means that the element will have no width or height properties and inline-block will.

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

It gives all elements the border-box rule. This rule makes the width include padding, margin, content, and border. The advantage of this would take the guess work out of sizing elements when padding or borders are added. This would also make the webpage easier to make responsive. When the content needs to adapt to different web page sizes, overflow wouldn't be a problem because the element would be a constant size.

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.

How do you serve your pages for feature-constrained browsers?What techniques/processes do you use?

Progressive enhancement: Progressive enhancement is a design approach that starts with a basic HTML and CSS foundation and then adds enhancements as the user's device and browser capabilities allow. This ensures that the website works on all devices, regardless of their capabilities. Graceful degradation: Graceful degradation is the opposite of progressive enhancement, where a fully featured website is built and then scaled down for older browsers or devices with limited capabilities. This approach ensures that users on older devices or browsers can still access the website, but they may have a less feature-rich experience. Feature detection: Feature detection involves detecting which browser features are supported by the user's device and browser, and then applying code to accommodate or enhance those features. This technique ensures that the website works as expected on all devices, regardless of their capabilities. A website like https://caniuse.com/ Server-side detection: Server-side detection involves detecting the user's browser and device capabilities on the server-side and serving a version of the website optimized for that device. This approach can be more complex to implement, but it ensures that the website works optimally on each device. Using a mobile-first design approach: Designing for mobile-first means designing for smaller screens and slower connections, which can help ensure that the website works well on feature-constrained devices. This approach prioritizes the user experience on mobile devices, which can lead to a more streamlined and efficient website overall.

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

Psuedo-element come after (::) css selector and they are used to make elements more dynamic without extra markup. They are used to style specific parts of an element like the first letter or line, of an element. A commonly used psuedo element is ::before and ::after. ::before is used to add content before an element and ::after will add content ::after an element.

What's the difference between a relative, fixed, absolute and statically positioned element?

Relative means the element would be positions relative to its place. If moved its "ghost" stays in the original spot. Fixed means the element will stay in place even when moving around the web page. Absolute means you move the element from the normal flow of the page. It stays inside its ancestor(i.e. an ancestor with a position value other than static). Statically is the default behavior in which the element flows with the content.

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 defines how the layout and demensions of an element on the page. The box model on an element consists of margin, padding, border, and content area. There are 2 types of box models. One is the standard model and the width will be the total of the padding, border and content are. div { width: 200px; padding: 20px; border: 1px solid black; margin: 10px; } The code above would give us a total width of 242. The second is the alternative model. Using the box-sizing:border-box, the width would include the margin, padding, border, and content area. div { box-sizing: border-box; width: 200px; padding: 20px; border: 1px solid black; margin: 10px; } The code above would give us a total width of 200 because we use box-sizing.

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

The browser will change the html into a dom tree. Then it keeps each selector ready to match against each element of the dom tree,starting at the top. If an element has an opposing selector, then the most specific selector gets to style the element.

🚫What is the CSS display property and can you give a few examples of its use?

The display property tells and element how it will be positioned on the web page. For example absolute removes it from the order of the web page. Relative removes it from its place relative to it. Static keeps the element in one spot even when scrolling.

How would you approach fixing browser-specific styling issues?

Use browser-specific CSS: In some cases, you can use CSS that is specific to certain browsers to fix the issue. Use a CSS reset: A CSS reset is a set of CSS rules that normalize the default styles applied by different browsers. By using a CSS reset, you can ensure that your website looks consistent across different browsers. Check for conflicting styles: Sometimes, conflicting styles can cause issues in certain browsers. Check for any conflicting styles by using the developer tools in your browser to inspect the element and see which styles are being applied. Test and iterate: After making changes to your CSS, test your website again on different browsers to ensure that the issue has been resolved. Iterate on your changes as needed until the issue has been completely resolved.

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.)

Describe z-index and how stacking context is formed.

When a z-index value is assigned to an element, it creates a new stacking context. Stacking context is a concept that describes how elements are stacked on top of each other in the visual layout of a webpage. When an element is positioned in a webpage, its z-index property determines its stacking order relative to other positioned elements. The stacking context is formed in the following way: The root element forms the initial stacking context, which has a z-index value of 0 by default. Positioned elements with a z-index value other than auto create a new stacking context. The z-index value can be a positive integer, a negative integer, or auto. The stacking context of a child element is contained within the stacking context of its parent element. If a parent element has a higher z-index value than its child, the child will be positioned behind the parent element. If two or more elements have the same z-index value, their stacking order will be determined by the order in which they appear in the HTML markup. The element that appears later in the markup will be positioned on top of the element that appears earlier.

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

Yes I have used media queries in my css to style for multiple screen sizes.

Can you give an example of an @media property other than screen?

Yes there Is @media print {} where you can change the style when it applies to printed documents and print preview modes.

Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

You would want to use translate() when you need it to stay in position no matter the screen size. You would use absolute if the the screen size stays the same.

What's the difference between the "nth-of-type()" and "nth-child()" selectors?

nth-of-style(2) would choose the second sibling of that type. nth-child(2) would choose the second sibling regardless of type of element.

Can you explain the difference between px, em and rem as they relate to font sizing?

px is static and is a good choice when you need pixel accuracy. em example: .container {.font-size: 16px; } p { font-size: 1em; } h2 { font-size: 2em; } <p> font size will be 16px because it will inherit from the parent. 1em = 16px <h2> will be 32px because 2em= 32px(2*16px) rem example: html { font-size: 16px; } p { font-size: 1.5rem; } Rem instead inherits from the "root" html <p> would be (1.5*16px)24px = 1.5rem