Run a mock round

In SCSS, you can use the @if directive to add conditional logic to your styles. Example:

//declaring variable
$background-color: #333;

body {

@if $background-color == #333 {
background-color: $background-color;

} @else {

background-color: #fff;
    }
}

To optimize responsive images for faster loading in CSS, you can use smaller file formats like JPEG and PNG, reduce the image size and resolution, and use lazy loading to only load images when they are needed.

flex-grow is a property in Flexbox that specifies how much a flex item should grow relative to the other items in the container, while flex-shrink specifies how much a flex item should shrink relative to the other items when there is not enough space available in the container.

Specificity ranks selectors as (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Higher wins; equal specificity falls back to source order (later wins). !important overrides normal declarations regardless of specificity and should be reserved for utilities or third-party overrides.

#nav .item a:hover  -> (0, 1, 2, 2)
.item.active        -> (0, 0, 2, 0)

Strategies to avoid wars: keep specificity low and flat, use single-class selectors, adopt a naming convention (BEM), or use cascade layers (@layer) and :where() (zero specificity) to control the cascade deliberately.

| Tag Name | Definition |
| ----------- | -------------------------------------------------------------- |
| <table> | Defines a table |
| <caption> | Defines a title or caption for a table |
| <thead> | Defines the header of a table |
| <tbody> | Defines the body of a table |
| <tfoot> | Defines the footer of a table |
| <tr> | Defines a row in a table |
| <th> | Defines a header cell in a table |
| <td> | Defines a standard cell in a table |
| <colgroup> | Defines a group of columns in a table |
| <col> | Specifies column properties for each column within <colgroup> |
| <caption> | Defines a title or caption for a table |

CSS3 modularized the styling specification, introducing transformative layout engines and dynamic visual capabilities:

### Breakthrough Features in CSS3:

1. Modern Layout Engines: Flexbox (1-dimensional) and CSS Grid (2-dimensional) replaced fragile float hacks and table layouts.
2. Visual Effects: border-radius (rounded corners), box-shadow (depth/elevation), linear-gradient() / radial-gradient().
3. Motion & Transitions: Native transition and @keyframes animations executed on GPU composite layers.
4. Responsive Media Queries: @media (max-width: 768px) enabling mobile-first fluid web layouts.
5. Color Formats: rgba(), hsla(), and modern wide-gamut colors (oklch(), color(display-p3)).
6. Custom Properties (CSS Variables): --primary-color: #2563eb; enabling dynamic real-time theme switching.

CSS stands for Cascading Style Sheets. CSS is used to define styles for web pages, including the design, layout and variations in display for different devices and screen sizes.

There are three standard methods to apply CSS styling to an HTML document:

### 1. External Stylesheet (Recommended Standard):
Link an external .css file in the <head> using <link>:

<link rel="stylesheet" href="/css/styles.css">

*Benefits:* Clean separation of concerns, browser caching across multiple pages, minimal HTML file sizes.

### 2. Internal / Embedded Styles:
Define rules inside a <style> block within the document <head>:

<style>
  body { font-family: system-ui, sans-serif; }
</style>

*Use case:* Single-page email templates or critical path CSS injected for sub-second above-the-fold render speeds.

### 3. Inline Styles:
Apply styles directly to an element via the style attribute:

<p style="color: #2563eb; font-weight: 600;">Highlighted Note</p>

*Drawbacks:* Highest specificity, impossible to cache, clutters markup, prohibits media queries and pseudo-classes (:hover).

A CSS preprocessor generates CSS code from source code written in a higher-level scripting language, whereas a post-processor takes existing CSS code and applies transformations or optimizations to it. In other words, a preprocessor is used during development, while a post-processor is used after development to optimize performance.