awesome-copilot/skills/web-coder/references/css-styling.md

# CSS & Styling Reference

Comprehensive reference for Cascading Style Sheets, layout systems, and modern styling techniques.

## Core Concepts

### CSS (Cascading Style Sheets)

Style sheet language used for describing the presentation of HTML documents.

**Three Ways to Apply CSS**:

1. **Inline**: `<div style="color: blue;">`
2. **Internal**: `<style>` tag in HTML
3. **External**: Separate `.css` file (recommended)

### The Cascade

The algorithm that determines which CSS rules apply when multiple rules target the same element.

**Priority Order** (highest to lowest):

1. Inline styles
2. ID selectors (`#id`)
3. Class selectors (`.class`), attribute selectors, pseudo-classes
4. Element selectors (`div`, `p`)
5. Inherited properties

**Important**: `!important` declaration overrides normal specificity (use sparingly)

### CSS Selectors

| Selector | Example | Description |
|----------|---------|-------------|
| Element | `p` | Selects all `<p>` elements |
| Class | `.button` | Selects elements with `class="button"` |
| ID | `#header` | Selects element with `id="header"` |
| Universal | `*` | Selects all elements |
| Descendant | `div p` | `<p>` inside `<div>` (any level) |
| Child | `div > p` | Direct child `<p>` of `<div>` |
| Adjacent Sibling | `h1 + p` | `<p>` immediately after `<h1>` |
| General Sibling | `h1 ~ p` | All `<p>` siblings after `<h1>` |
| Attribute | `[type="text"]` | Elements with specific attribute |
| Attribute Contains | `[href*="example"]` | Contains substring |
| Attribute Starts | `[href^="https"]` | Starts with string |
| Attribute Ends | `[href$=".pdf"]` | Ends with string |

### Pseudo-Classes

Target elements based on state or position:

```css
/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
a:focus { outline: 2px solid blue; }

/* Structural */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(3n) { color: red; }
p:not(.special) { color: gray; }

/* Form states */
input:required { border-color: red; }
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
```

### Pseudo-Elements

Style specific parts of elements:

```css
/* First line/letter */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }

/* Generated content */
.quote::before { content: '"'; }
.quote::after { content: '"'; }

/* Selection */
::selection { background: yellow; color: black; }

/* Placeholder */
input::placeholder { color: #999; }
```

## Box Model

Every element is a rectangular box with:

1. **Content**: The actual content (text, images)
2. **Padding**: Space around content, inside border
3. **Border**: Line around padding
4. **Margin**: Space outside border

```css
.box {
  /* Content size */
  width: 300px;
  height: 200px;
  
  /* Padding */
  padding: 20px; /* All sides */
  padding: 10px 20px; /* Vertical | Horizontal */
  padding: 10px 20px 15px 25px; /* Top | Right | Bottom | Left */
  
  /* Border */
  border: 2px solid #333;
  border-radius: 8px;
  
  /* Margin */
  margin: 20px auto; /* Vertical | Horizontal (auto centers) */
  
  /* Box-sizing changes how width/height work */
  box-sizing: border-box; /* Include padding/border in width/height */
}
```

## Layout Systems

### Flexbox

One-dimensional layout system (row or column):

```css
.container {
  display: flex;
  
  /* Direction */
  flex-direction: row; /* row | row-reverse | column | column-reverse */
  
  /* Wrapping */
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
  
  /* Main axis alignment */
  justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  
  /* Cross axis alignment */
  align-items: center; /* flex-start | flex-end | center | stretch | baseline */
  
  /* Multi-line cross axis */
  align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch */
  
  /* Gap between items */
  gap: 1rem;
}

.item {
  /* Grow factor */
  flex-grow: 1; /* Takes available space */
  
  /* Shrink factor */
  flex-shrink: 1; /* Can shrink if needed */
  
  /* Base size */
  flex-basis: 200px; /* Initial size before growing/shrinking */
  
  /* Shorthand */
  flex: 1 1 200px; /* grow | shrink | basis */
  
  /* Individual alignment */
  align-self: flex-end; /* Overrides container's align-items */
  
  /* Order */
  order: 2; /* Change visual order (default: 0) */
}
```

### CSS Grid

Two-dimensional layout system (rows and columns):

```css
.container {
  display: grid;
  
  /* Define columns */
  grid-template-columns: 200px 1fr 1fr; /* Fixed | Flexible | Flexible */
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
  
  /* Define rows */
  grid-template-rows: 100px auto 50px; /* Fixed | Auto | Fixed */
  
  /* Named areas */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  
  /* Gap between cells */
  gap: 1rem; /* Row and column gap */
  row-gap: 1rem;
  column-gap: 2rem;
  
  /* Alignment */
  justify-items: start; /* Align items horizontally within cells */
  align-items: start; /* Align items vertically within cells */
  justify-content: center; /* Align grid within container horizontally */
  align-content: center; /* Align grid within container vertically */
}

.item {
  /* Span columns */
  grid-column: 1 / 3; /* Start / End */
  grid-column: span 2; /* Span 2 columns */
  
  /* Span rows */
  grid-row: 1 / 3;
  grid-row: span 2;
  
  /* Named area */
  grid-area: header;
  
  /* Individual alignment */
  justify-self: center; /* Horizontal alignment */
  align-self: center; /* Vertical alignment */
}
```

### Grid vs Flexbox

| Use Case | Best Choice |
|----------|-------------|
| One-dimensional layout (row or column) | Flexbox |
| Two-dimensional layout (rows and columns) | Grid |
| Align items along one axis | Flexbox |
| Create complex page layouts | Grid |
| Distribute space between items | Flexbox |
| Precise control over rows and columns | Grid |
| Content-first responsive design | Flexbox |
| Layout-first responsive design | Grid |

## Positioning

### Position Types

```css
/* Static (default) - normal flow */
.static { position: static; }

/* Relative - offset from normal position */
.relative {
  position: relative;
  top: 10px; /* Move down 10px */
  left: 20px; /* Move right 20px */
}

/* Absolute - removed from flow, positioned relative to nearest positioned ancestor */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Fixed - removed from flow, positioned relative to viewport */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Sticky - switches between relative and fixed based on scroll */
.sticky {
  position: sticky;
  top: 0; /* Sticks to top when scrolling */
}
```

### Inset Properties

Shorthand for positioning:

```css
.element {
  position: absolute;
  inset: 0; /* All sides: top, right, bottom, left = 0 */
  inset: 10px 20px; /* Vertical | Horizontal */
  inset: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}
```

### Stacking Context

Control layering with `z-index`:

```css
.behind { z-index: 1; }
.ahead { z-index: 10; }
.top { z-index: 100; }
```

**Note**: `z-index` only works on positioned elements (not `static`)

## Responsive Design

### Media Queries

Apply styles based on device characteristics:

```css
/* Mobile-first approach */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
  }
}

/* Landscape orientation */
@media (orientation: landscape) {
  .header { height: 60px; }
}

/* High-DPI screens */
@media (min-resolution: 192dpi) {
  .logo { background-image: url('logo@2x.png'); }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body {
    background: #222;
    color: #fff;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

### Responsive Units

| Unit | Description | Example |
|------|-------------|---------|
| `px` | Pixels (absolute) | `16px` |
| `em` | Relative to parent font-size | `1.5em` |
| `rem` | Relative to root font-size | `1.5rem` |
| `%` | Relative to parent | `50%` |
| `vw` | Viewport width (1vw = 1% of viewport width) | `50vw` |
| `vh` | Viewport height | `100vh` |
| `vmin` | Smaller of vw or vh | `10vmin` |
| `vmax` | Larger of vw or vh | `10vmax` |
| `ch` | Width of "0" character | `40ch` |
| `fr` | Fraction of available space (Grid only) | `1fr` |

### Responsive Images

```css
img {
  max-width: 100%;
  height: auto;
}

/* Art direction with picture element */
```

```html
<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>
```

## Typography

```css
.text {
  /* Font family */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  
  /* Font size */
  font-size: 16px; /* Base size */
  font-size: 1rem; /* Relative to root */
  font-size: clamp(14px, 2vw, 20px); /* Responsive with min/max */
  
  /* Font weight */
  font-weight: normal; /* 400 */
  font-weight: bold; /* 700 */
  font-weight: 300; /* Light */
  
  /* Font style */
  font-style: italic;
  
  /* Line height */
  line-height: 1.5; /* 1.5 times font-size */
  line-height: 24px;
  
  /* Letter spacing */
  letter-spacing: 0.05em;
  
  /* Text alignment */
  text-align: left; /* left | right | center | justify */
  
  /* Text decoration */
  text-decoration: underline;
  text-decoration: none; /* Remove underline from links */
  
  /* Text transform */
  text-transform: uppercase; /* uppercase | lowercase | capitalize */
  
  /* Word spacing */
  word-spacing: 0.1em;
  
  /* White space handling */
  white-space: nowrap; /* Don't wrap */
  white-space: pre-wrap; /* Preserve whitespace, wrap lines */
  
  /* Text overflow */
  overflow: hidden;
  text-overflow: ellipsis; /* Show ... when text overflows */
  
  /* Word break */
  word-wrap: break-word; /* Break long words */
  overflow-wrap: break-word; /* Modern version */
}
```

## Colors

```css
.colors {
  /* Named colors */
  color: red;
  
  /* Hex */
  color: #ff0000; /* Red */
  color: #f00; /* Shorthand */
  color: #ff0000ff; /* With alpha */
  
  /* RGB */
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.5); /* With alpha */
  color: rgb(255 0 0 / 0.5); /* Modern syntax */
  
  /* HSL (Hue, Saturation, Lightness) */
  color: hsl(0, 100%, 50%); /* Red */
  color: hsla(0, 100%, 50%, 0.5); /* With alpha */
  color: hsl(0 100% 50% / 0.5); /* Modern syntax */
  
  /* Color keywords */
  color: currentColor; /* Inherit color */
  color: transparent;
}
```

### CSS Color Space

Modern color spaces for wider gamut:

```css
.modern-colors {
  /* Display P3 (Apple devices) */
  color: color(display-p3 1 0 0);
  
  /* Lab color space */
  color: lab(50% 125 0);
  
  /* LCH color space */
  color: lch(50% 125 0deg);
}
```

## Animations and Transitions

### Transitions

Smooth changes between states:

```css
.button {
  background: blue;
  color: white;
  transition: all 0.3s ease;
  /* transition: property duration timing-function delay */
}

.button:hover {
  background: darkblue;
  transform: scale(1.05);
}

/* Individual properties */
.element {
  transition-property: opacity, transform;
  transition-duration: 0.3s, 0.5s;
  transition-timing-function: ease, ease-in-out;
  transition-delay: 0s, 0.1s;
}
```

### Keyframe Animations

```css
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: fadeIn 0.5s ease forwards;
  /* animation: name duration timing-function delay iteration-count direction fill-mode */
}

/* Multiple keyframes */
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.slider {
  animation: slide 2s infinite alternate;
}
```

## Transforms

```css
.transform {
  /* Translate (move) */
  transform: translate(50px, 100px); /* X, Y */
  transform: translateX(50px);
  transform: translateY(100px);
  
  /* Rotate */
  transform: rotate(45deg);
  
  /* Scale */
  transform: scale(1.5); /* 150% size */
  transform: scale(2, 0.5); /* X, Y different */
  
  /* Skew */
  transform: skew(10deg, 5deg);
  
  /* Multiple transforms */
  transform: translate(50px, 0) rotate(45deg) scale(1.2);
  
  /* 3D transforms */
  transform: rotateX(45deg) rotateY(30deg);
  transform: perspective(500px) translateZ(100px);
}
```

## CSS Variables (Custom Properties)

```css
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --spacing: 1rem;
  --border-radius: 4px;
}

.element {
  color: var(--primary-color);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  
  /* With fallback */
  color: var(--accent-color, red);
}

/* Dynamic changes */
.dark-theme {
  --primary-color: #0056b3;
  --background: #222;
  --text: #fff;
}
```

## CSS Preprocessors

### Common Features

- Variables
- Nesting
- Mixins (reusable styles)
- Functions
- Imports

**Popular Preprocessors**: Sass/SCSS, Less, Stylus

## Best Practices

### Do's

- ✅ Use external stylesheets
- ✅ Use class selectors over ID selectors
- ✅ Keep specificity low
- ✅ Use responsive units (rem, em, %)
- ✅ Mobile-first approach
- ✅ Use CSS variables for theming
- ✅ Organize CSS logically
- ✅ Use shorthand properties
- ✅ Minify CSS for production

### Don'ts

- ❌ Use `!important` excessively
- ❌ Use inline styles
- ❌ Use fixed pixel widths
- ❌ Over-nest selectors
- ❌ Use vendor prefixes manually (use autoprefixer)
- ❌ Forget to test cross-browser
- ❌ Use IDs for styling
- ❌ Ignore CSS specificity

## Glossary Terms

**Key Terms Covered**:

- Alignment container
- Alignment subject
- Aspect ratio
- Baseline
- Block (CSS)
- Bounding box
- Cross Axis
- CSS
- CSS Object Model (CSSOM)
- CSS pixel
- CSS preprocessor
- Descriptor (CSS)
- Fallback alignment
- Flex
- Flex container
- Flex item
- Flexbox
- Flow relative values
- Grid
- Grid areas
- Grid Axis
- Grid Cell
- Grid Column
- Grid container
- Grid lines
- Grid Row
- Grid Tracks
- Gutters
- Ink overflow
- Inset properties
- Layout mode
- Logical properties
- Main axis
- Media query
- Physical properties
- Pixel
- Property (CSS)
- Pseudo-class
- Pseudo-element
- Selector (CSS)
- Stacking context
- Style origin
- Stylesheet
- Vendor prefix

## Additional Resources

- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [CSS Tricks Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Can I Use](https://caniuse.com/) - Browser compatibility tables