What is the difference between a block level element and an inline element. Can you provide examples of each type of element?
<div>, <h1>-<h6>, <p>, <ul>, <ol>, and <li>.<span>, <a>, <img>, <strong>, <em>, and <br>.What do you know about CSS image sprites?
Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?
A pseudo class is a keyword added to a selector that specifies a special state of the selected element(s). One example of a pseudo class is :hover, which is used to select and style an element when the user hovers over it with their mouse.
A common use case for the :hover pseudo class is to provide visual feedback to the user when they interact with a webpage. For example, you might use :hover to change the background color of a button when the user hovers over it, or to underline a hyperlink when the user hovers over it. This can help make your website feel more interactive and engaging for users.
How is clearfix css property useful?
clearfix CSS property is useful for clearing floated elements within a container. When you float an element, it is taken out of the normal flow of the document, which can cause issues with the layout of other elements on the page. The clearfix property is used to fix this issue by adding an invisible pseudo-element to the container that clears the floats.How does CSS selector specificity work?
Specificity in CSS work on a basis of matrix values which are later compared column by column. In order to look for the highest specificity, look from left to right and compare the highest value in each column.
Describe what you like and dislike about the CSS preprocessors you have used.
CSS preprocessors are tools that extend the functionality of CSS by adding features such as variables, mixins, and functions. Some popular CSS preprocessors include Sass, Less, and Stylus.
One advantage of using a CSS preprocessor is that it can help you write more efficient and maintainable CSS code. For example, you can use variables to store commonly used values such as colors or font sizes, which can make it easier to update your styles later on. You can also use mixins to reuse blocks of CSS code across your project, which can help reduce duplication and make your code more modular.
However, one potential disadvantage of using a CSS preprocessor is that it can add complexity to your workflow. You may need to learn a new syntax and tooling in order to use a preprocessor effectively, which can take time and effort. Additionally, using a preprocessor can add an extra step to your build process, which can slow down your development workflow.
Overall, whether or not to use a CSS preprocessor depends on your specific needs and preferences. Some developers find that using a preprocessor helps them write better CSS code more efficiently, while others prefer to stick with plain CSS.
Can you explain the difference between px, em and rem as they relate to font sizing?
px (pixels) is an absolute unit of measurement that is based on the physical size of the screen. When you specify font size in pixels, it will always be the same size regardless of the size of the parent element or the user’s device.
em is a relative unit of measurement that is based on the font size of the parent element. When you specify font size in ems, it will be relative to the font size of the parent element. For example, if the parent element has a font size of 16px and you set the font size of a child element to 1em, it will be 16px. If you set the font size of the child element to 2em, it will be 32px.
rem (root em) is a relative unit of measurement that is based on the font size of the root element (usually the <html> element). When you specify font size in rems, it will be relative to the font size of the root element. For example, if the root element has a font size of 16px and you set the font size of an element to 1rem, it will be 16px. If you set the font size of the element to 2rem, it will be 32px.
The main difference between em and rem is that em is relative to the font size of the parent element, while rem is relative to the font size of the root element. This means that rem can be more predictable and easier to manage, especially when dealing with nested elements.
In general, it’s a good practice to use relative units like em and rem for font sizing, as it can help make your website more responsive and accessible across different devices and screen sizes.
What’s the difference between a relative, fixed, absolute and statically positioned element?
A static positioned element is positioned according to the normal flow of the document. This is the default position value for all elements. You cannot use the top, bottom, left, or right properties with a static positioned element.
A relative positioned element is positioned relative to its normal position. You can use the top, bottom, left, or right properties to move the element away from its normal position. Other elements on the page will not be affected by a relative positioned element.
An absolute positioned element is positioned relative to the nearest positioned ancestor (an ancestor element that is not static positioned). If there is no positioned ancestor, it is positioned relative to the initial containing block (usually the <html> element). You can use the top, bottom, left, or right properties to position the element. An absolute positioned element is removed from the normal flow of the document, so other elements on the page may be affected by it.
A fixed positioned element is positioned relative to the viewport (the browser window). You can use the top, bottom, left, or right properties to position the element. A fixed positioned element is removed from the normal flow of the document, so other elements on the page may be affected by it. A fixed positioned element will stay in the same position even if the page is scrolled.
In general, you should use relative positioning when you want to move an element away from its normal position, but you don’t want to affect other elements on the page. You should use absolute positioning when you want to position an element relative to a specific ancestor element. You should use fixed positioning when you want an element to stay in the same position even if the page is scrolled.
How many ways can you make the text disappear?
display: none or visibility: hidden. This is the most basic answer. Follow up question is what is the difference between the two? What happens to the “space” occupied by the element? Do they proactively tell me the difference between an inline vs. block element? Can you convert an inline element to block and vice versa?z-index.transform: rotateX(90deg) or rotateY. This is extra extra points. I don’t expect anyone to know this.What is margins collapsing?
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
Describe Floats and how they work
Describe z-index and how stacking context is formed
What are the various clearing techniques and which is appropriate for what context?
Can you give an example of an @media property other than screen?
Explain how a browser determines what elements match a CSS selector
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models
What is the CSS display property and can you give a few examples of its use?
What’s the difference between inline and inline-block?
What’s the difference between the nth-of-type() and nth-child() selectors?
Have you ever worked with retina graphics? If so, when and what techniques did you use?
Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?