CSS (Cascading Style Sheets)

CSS es el lenguaje de hojas de estilo utilizado para controlar la presentación visual de documentos HTML y XML. Define colores, diseños, fuentes, animaciones y diseño responsivo, separando el contenido de la apariencia visual.

Tipo MIME

text/css

Tipo

Texto

Compresión

Sin pérdida

Ventajas

+ Separates presentation from content (HTML)
+ Powerful layout systems: Flexbox, Grid, and container queries
+ Custom properties enable theming and dynamic values
+ Media queries enable responsive design for all screen sizes

Desventajas

− Global scope can cause unintended style conflicts
− Browser compatibility differences require testing
− No native variables before custom properties (pre-2017)

Cuándo usar .CSS

CSS es esencial para toda presentación web. Usa preprocesadores (SCSS, Less) o CSS-in-JS para proyectos complejos. Los módulos CSS o Tailwind CSS ofrecen estrategias alternativas de estilizado.

Detalles técnicos

CSS usa selectores para apuntar a elementos y pares propiedad-valor en bloques de declaración. La cascada resuelve conflictos mediante especificidad (inline > ID > clase > elemento), importancia (!important) y orden del código fuente. Los navegadores modernos soportan propiedades personalizadas (variables), funciones calc(), diseños Grid y Flexbox.

Historia

Håkon Wium Lie propuso CSS en 1994 en el CERN. CSS1 se convirtió en recomendación del W3C en 1996. CSS2 (1998) añadió posicionamiento y media types. CSS3 (modularizado desde 2011+) trajo Flexbox, Grid, variables personalizadas, animaciones y muchas más características.

Convertir desde .CSS

.css → .html .css → .js .css → .json .css → .jsx .css → .less .css → .scss .css → .ts .css → .tsx

Convertir a .CSS

.html → .css .js → .css .json → .css .jsx → .css .less → .css .scss → .css .ts → .css .tsx → .css

Formatos relacionados

.c .cpp .csv .go .java .js .json .jsx .less .py .rs .scss .sql .toml .ts .tsv .tsx .xml .yaml .yml

Términos relacionados

Aspect Ratio (CSS) BEM Calc Cascade Color Function CSS max() CSS min() CSS Nesting Selector CSS Paint API CSS Scope Custom Properties Inheritance Data URI EPUB Keyframe Animation lab() Layer Nesting Popover Specificity Stacking Context

Learn More

CSS Units Explained: px, em, rem, vh, and When to Use Each

CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units …

JSON vs YAML vs TOML: Choosing a Configuration Format

Configuration files are the backbone of modern applications. JSON, YAML, and TOML each offer different trade-offs between readability, complexity, and …

Flexbox vs CSS Grid: A Practical Comparison

Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and …

How to Format and Validate JSON Data

Malformed JSON causes silent failures in APIs and configuration files. Learn how to format, validate, and debug JSON documents to …

Base64 Encoding: How It Works and When to Use It

Base64 converts binary data into ASCII text, making it safe for transmission through text-based systems. Learn when Base64 is the …

How to Create CSS Gradients: Linear, Radial, and Conic

CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control …

Casos de uso

T Minifying and Optimizing CSS for Production Deployment