# CSS

> Styles web pages with CSS, covering selectors, flexbox, grid, custom properties, and animations for responsive UI components.

- Skill: `neuralblitz/css` (Agent Skill)
- Install (CLI): `npx skillmds@latest add neuralblitz/css`
- Raw SKILL.md: https://api.skillmd.com/api/skills/neuralblitz/css/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, CSS & Styling
- Tags: Animations, Css, Custom Properties, Flexbox, Grid, Responsive Design, Selectors
- License: MIT
- Author: NeuralBlitz (https://skillmd.com/u/neuralblitz)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/neuralblitz/css

---

## What I do
- Style web pages with CSS
- Use flexbox and grid layouts
- Create responsive designs
- Implement animations and transitions
- Use CSS custom properties (variables)
- Handle pseudo-classes and pseudo-elements
- Optimize CSS for performance

## When to use me
When styling web pages or building UI components.

## Selectors
```css
/* Basic */
p { color: blue; }
.class { font-size: 16px; }
#id { margin: 0; }

/* Combinators */
div p { }     /* descendant */
div > p { }   /* child */
p + p { }     /* adjacent sibling */
p ~ p { }     /* general sibling */

/* Pseudo-classes */
:hover :focus :active :visited
:first-child :last-child :nth-child(2n)
:not(.active) :checked :disabled

/* Pseudo-elements */
::before ::after ::first-letter ::first-line ::selection
```

## Flexbox
```css
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex: 1 1 auto;
  order: 1;
  align-self: center;
}
```

## Grid
```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
```

## Variables
```css
:root {
  --primary: #007bff;
  --spacing: 1rem;
}

.button {
  background: var(--primary);
  padding: var(--spacing);
}
```

## Animations
```css
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slideIn 0.3s ease-in-out;
  transition: all 0.2s ease;
}
```