Run a mock round

Specificity in CSS is a way of determining which CSS rule applies to an element. It is based on the number of selectors and their types in a CSS rule. Specificity is calculated using a formula: inline styles have the highest specificity, followed by IDs, classes, and then elements.

The <picture> element in HTML5 is used to provide multiple versions of an image at different resolutions or sizes, and allows the browser to choose the best version to display based on the user's device and viewport size.

A CSS preprocessor is a tooling program that extends standard CSS syntax with programmatic capabilities (such as variables, functions, mixins, and nested rules), compiling the code into standard, browser-compatible CSS before runtime:

### Popular Preprocessors:

• Sass / SCSS: The industry standard preprocessor.
• Less: JavaScript-based preprocessor.
• Stylus: Expressive, Python-inspired syntax.

### Key Preprocessor Features:

• Nesting: Structuring selectors to mirror HTML hierarchy.
• Mixins: Reusable blocks of styles passed with arguments.
• Partials & Modules: Splitting styles into files (_variables.scss, _buttons.scss) and importing via @use.
• *Modern Context:* Many native CSS features (CSS variables, native CSS nesting @scope, color functions) have adopted ideas originally introduced by preprocessors.

The line-height property defines the height of an inline line box, determining the vertical distance between baselines of consecutive lines of text:

### Value Formats:

1. Unitless Number (Best Practice):

   body { line-height: 1.5; }
   

A unitless number acts as a proportional multiplier of the element's current font-size. Child elements inherit the multiplier rather than a fixed computed pixel size, preventing text overlapping if children declare larger font sizes.

1. Lengths (px, rem): line-height: 24px; (Rigid, breaks on dynamic font scaling).
2. Percentages (150%): Can cause inheritance calculation issues in nested headers.

The box model in CSS is a way of representing elements as boxes with content, padding, borders, and margins. The content area is the actual content of the element, the padding is the space between the content and the border, the border is a line around the element, and the margin is the space between the border and the surrounding elements.

To make images responsive in CSS, you can use the max-width: 100% property, which will make the image scale down proportionally to fit the width of its container while maintaining its aspect ratio.

The :checked pseudo-class is used to target form elements that have been selected by the user, such as checkboxes or radio buttons. This can be used to change the appearance or behavior of the selected element.

HTML entities are codes used to represent special characters in HTML that cannot be easily typed or displayed. Example: &amp represents (&)

The properties of CSS 3D Transforms are:

1. transform-style: determines whether an element's children are transformed in 3D space
2. perspective: determines the distance between the viewer and the element, affecting the appearance of 3D transforms
3. perspective-origin: specifies the origin point of the perspective
4. transform: applies a 3D transformation to an element, such as rotateX(), rotateY(), rotateZ(), translateX(), translateY(),translateZ(), scale(), and skew()
5. transform-origin: specifies the origin point of the transformation
6. backface-visibility: determines whether or not the back face of an element should be visible when the element is rotated.