What is the main difference between position: fixed; and position: sticky; in CSS?
- position: fixed; is affected by scrolling and becomes sticky.
- position: fixed; positions an element relative to the viewport, even during scrolling.
- position: sticky; becomes fixed after a certain scroll point.
- position: sticky; is not affected by scrolling and remains fixed.
position: fixed; keeps an element fixed relative to the viewport, while position: sticky; becomes fixed based on scroll position.
How would you apply a border only to the top side of an element?
- border-top:
- border: top
- border: top-side
- top-border:
To apply a border only to the top side of an element in CSS, use the border-top property followed by the desired border style, width, and color.
When using SVGs in CSS, how can you change the color of the SVG on hover?
- Background color
- Fill color
- Outline color
- Stroke color
In CSS, when working with SVGs, the :hover pseudo-class can be used to change the fill color of the SVG on hover. This is achieved by targeting the fill property and specifying the desired color. It's a common technique for enhancing user interactivity with SVG elements.
For a CSS Variable to be inherited by all descendants, it should be defined in the :________ pseudo-class.
- :descendant
- :global
- :inherit
- :root
The correct answer is ":root." When you define a CSS variable in the :root pseudo-class, it becomes a global variable accessible throughout the document, and it is inherited by all descendants. This is commonly used to set global values for colors, fonts, or other properties that need to be consistent across the entire document.
You are tasked with creating a button that has a double border with two different colors. How would you achieve this effect using CSS?
- border: 2px solid red, 1px solid blue;
- border: 2px solid red; border-bottom: 1px solid blue;
- border: 2px solid red; border-width: 1px; border-color: blue;
- border: 2px solid red; border: 1px solid blue;
To create a button with a double border and two different colors, you can use the border property with a combination of values for width and color. For example: border: 2px solid red; border: 1px solid blue; This applies a double border with the specified colors.
What is the difference between the fr unit and percentages in CSS Grid layouts?
- Defines the size of an element in relation
- Represents a fraction of the available space
- Represents a percentage of the parent
- Specifies a percentage of the viewport width
The fr unit in CSS Grid represents a fraction of the available space, while percentages specify a percentage of the container's size. Understanding this difference is crucial for responsive grid layouts.
Minifying CSS improves performance primarily by reducing _________ and removing unnecessary ________.
- Browser Compatibility
- Code Complexity
- File Size
- Load Time
Minifying CSS reduces code complexity by removing unnecessary characters and spaces, improving load time and overall performance.
In what way do SASS Variables differ from CSS Variables in terms of scope?
- SASS Variables are not supported in modern browsers
- SASS Variables are only used for color declarations
- SASS Variables have global scope, while CSS Variables are local
- SASS Variables use the $ symbol, while CSS Variables use --
SASS Variables have global scope, meaning they can be accessed from anywhere in the SASS file. On the other hand, CSS Variables are scoped to the selector or rule where they are defined.
Which modular CSS methodology uses the Block, Element, Modifier structure?
- BEM (Block, Element, Modifier)
- ITCSS (Inverted Triangle CSS)
- OOCSS (Object-Oriented CSS)
- SMACSS (Scalable and Modular Architecture for CSS)
The modular CSS methodology that uses the Block, Element, Modifier structure is BEM, which stands for Block, Element, Modifier. BEM is a naming convention that helps create maintainable and predictable CSS code by organizing styles into blocks, elements, and modifiers.
While using a CSS preprocessor, you notice that the compiled CSS has selectors that are excessively long and specific. What might be a potential cause for this in your source files?
- Overuse of nesting in SASS or LESS
- Lack of CSS optimization tools
- Errors in the preprocessor settings
- Incorrect order of imported stylesheets
Excessively long and specific selectors in compiled CSS are often caused by overusing nesting in preprocessors like SASS or LESS. While nesting can improve code organization, it can also lead to overly specific selectors that increase file size and reduce maintainability.