Updated CSS Interview Questions

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

CSS : .container { border: 1px solid #ccc; padding: 20px; /* Clearfix */ overflow: hidden; } .float-left{ float: left; width: 50%; } .float-right{ Float:right; Width: 50% } /* Adding some styling for clarity */ .box { background-color: #f2f2f2; border: 1px solid #999; padding: 10px; margin: 5px; } HTML : Left Content Right Content In this example, we have a .container with two floated elements .float-left and float-right inside it. The overflow: hidden; property applied to the container is the clearfix technique. It ensures that the container expands to contain its floated children properly, preventing layout issues. This code creates a basic two-column layout using the clearfix method to maintain proper container sizing when using floated elements.

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

Definition of feature constrained browser: A feature-constrained browser refers to a web browser deliberately designed with limited functionalities or capabilities compared to standard browsers. These browsers often focus on specific aspects such as security, privacy, or simplicity. They might restrict certain features like JavaScript execution, plugins/extensions, or multimedia support to provide a more controlled and secure browsing environment. Users might opt for such browsers for specific tasks or to mitigate security risks associated with complex functionalities. Interview answer Progressive enhancement - Pages are built with basic html and css and are enhanced as the browsers capabilities get better Graceful degration- Pages are built at first with the best capabilities but will lesson if needed by a browser ——————————- 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 detec

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

Interview Answer - 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.

Describe Floats and how they work.

Interview Answer A float is an element that is positioned horizontally and taken out of the normal flow of a document. Has an annoying collapsing effect on the parent container. Fixed by clearing the float in the container.

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

Interview Answer The clearfix method is good for most scenarios and works well for clearing floats within a container. The overflow method works well for clearing floats within a fixed-height container. The inline method works well within a horizontal layout. 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.

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models. *️⃣ there are two types

Interview Answer: 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.

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

Interview Answer: display: block;: This makes the element a block-level element, causing it to take up the entire width of its parent container and forcing subsequent elements to appear below it. display: inline;: This makes the element an inline-level element, allowing it to flow within the content, alongside other inline elements, without forcing a line break. display: inline-block;: This combines the characteristics of both inline and block, allowing the element to flow inline while still having block-level properties like setting width and height. display: none;: This hides the element from the layout entirely, as if it doesn't exist. The element is removed from the flow, and it won't take up space or be visible. display: flex;: This enables a flex container, turning its direct children into flexible items that can be arranged horizontally or vertically with powerful alignment and distribution options. display: grid;: This establishes a grid container, allowing you to create complex layouts by defining rows and columns for the child elements.

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

Interview Answer: 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. Examples: - div - paragraph - h1 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. Examples: - input - image - span

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

Interview Answer: 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 is the difference between CSS Grid and Flexbox? When would you use one over the other?

Interview Answer: 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 are the different ways to visually hide content (and make it available only for screen readers)?

Interview Answer: Here's an example of the CSS rules that accomplish this: .screen-reader-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.

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

Interview Answer: I have not used preprocessors but I have learned the advantages are the ability to use variables and functions that simplify writing and maintaining CSS. I learned the disadvantages are that it can increase file size of your CSSand compiling of plain CSS that can affect performance. Knowing JavaScript and CSS can help me learn how to use one. ------------------------------------------------- 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.

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

Interview Answer: I have not used retina graphics but I learned it is used for high resolution screens to make images sharper. I am eager to learn new things especially this position requires it. I love learning to new skills to add to my tool belt.

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

Interview Answer: I have used bootstrap and the thing I would change is extending its style.

Have you used CSS Grid?

Interview Answer: I haven't used a grid system but I know it works by allowing control over rows and columns at the same time. Something similar I have used is Flexbox and this would allow me to pick up the grid system quicker.

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

Interview Answer: I haven't used a grid system but I know it works by allowing control over rows and columns at the same time. Something similar I have used is Flexbox and this would allow me to pick up the grid system quicker. Explain what you do know about the skill, give examples of similar skills that you possess and express that you're willing to learn."I haven't used PowerPoint, but I know PowerPoint is used to create presentations, graphs and charts." This shows that you're informed and knowledgeable about the required skill even though you lack the hands-on experience, he says. The second step would be explaining what similar experience you have. For example, "I've learned complex programming like JavaScript and COBOL and I'm advanced in Excel." This shows that you have experience learning and working with other software packages. Finally, finish by emphasizing your willingness to learn, says Drexler. For example, "If I can learn this other advanced programming, I'm sure I can learn PowerPoint very quickly and am more than willing to do so."

How would you implement a web design composition(mock up of how the web site will look) that uses non-standard fonts?

Interview Answer: I like to implement google fonts for my projects because its easy to use. - The first thing to do is include it in link tags into my header of the html document - I will include it in my css styles sheet where I need it. - make sure it has a back up like so : font-family: 'YourFontFamily', sans-serif;

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

Interview Answer: 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?

Interview Answer: 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 pseudo-elements and discuss what they are used for.

Interview Answer: 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?

Interview Answer: 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 how a browser determines what elements match a CSS selector.

Interview Answer: 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.

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

Interview Answer: Yes I have used media queries and mobile specific layout in all of my portfolio projects. I wanted my project to be responsive in multiple screen sizes , especially in mobile.

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

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

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

Interview Answer: 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.

Are you familiar with styling SVG?

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

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

Interview Question: The choice between them depends on your design goals: translate() for fluid animations and responsive designs, absolute positioning for precise but potentially less flexible layouts.

How would you approach fixing browser-specific styling issues?

Interview answer You can use css that's specific to that certain browser. You can also do a css reset and it would make styling consistent across all browsers. You can also check for conflicting styles on caniuse.com —————————- 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. https://caniuse.com/ 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.

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

Interview answer: An example would be :hover. If we add :hover to a selector. Whenever we hover over that element it would show the css styling given to the selector

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

Interview answer: Px is static and is a good choice when you need pixel accuracy. "Em" value is correlated to the size of its parent in pixels. For example if it's parent pixels is 16 and you give the child element "em" of 2 that would equal to 32pixels. Very similar to "em". "REM" correlates to the html doc pixel value. So if html would have pixel value of 10. Then the child "rem" of 2 would equal to 20 pixels em example: .container {.font-size: 16px; } p { font-size: 1em; } h2 { font-size: 2em; } font size will be 16px because it will inherit from the parent. 1em = 16px 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 would be (1.5*16px)24px = 1.5rem

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

Interview question 1st image - Sibling Margins mesh with no BFC 2nd image - Uncommenting .new will give sibling 3 its own BFC 3rd image - Here the parent has no height which collapses into a blue line, while the siblings hang out below it 4th image - Uncommenting overflow:hidden will clear the float(creates BFC) and now the parent surrounds the siblings 5th image - Giving position: absolute to parent will also create a BFC. This will also snap the container width in

Describe z-index and how stacking context is formed.

Interview question It is a value given to an element that will decide in what order elements will be stacked on top of each other. The default value is 0. If element 1 has a higher z-index value than element 2. Element 2 will be positioned behind the parent element.

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

Interview question Resetting is removing all styles applied by browsers. Normalizing is setting minimal styles to be consistent across many different browsers. Choosing one or the other depends on what your application needs. If you want it to be all custom then do a reset but if you don't then do normalizing.

What is CSS selector specificity and how does it work?

Interview question When there are conflicting styles, is with specificity kicks in. This works by giving the highest ranking mix of selector kind, to overrule. Highest to lowest ranking: - inline - id - classes - elements