---
title: CSS Syntax and Selectors
localeTitle: Sintaxis CSS y selectores
---
## Sintaxis CSS y selectores
Cuando hablamos de la sintaxis de CSS, hablamos de cómo se presentan las cosas. Hay reglas acerca de lo que va a dónde, tanto para que pueda escribir CSS de manera consistente y un programa (como un navegador) puede interpretarlo y aplicarlo a la página correctamente.
Hay dos formas principales de escribir CSS.
### CSS en línea
Específicos sobre la especificidad de CSS: [trucos CSS](https://css-tricks.com/specifics-on-css-specificity/)
El CSS en línea aplica el estilo a un solo elemento y sus elementos secundarios, hasta que se encuentra otro estilo que reemplaza al primero.
Para aplicar CSS en línea, agregue el atributo "estilo" a un elemento HTML que le gustaría modificar. Entre comillas, incluya una lista delimitada por punto y coma de pares clave / valor (cada uno a su vez separados por dos puntos) que indican los estilos que se deben establecer.
Aquí hay un ejemplo de CSS en línea. Las palabras "Uno" y "Dos" tendrán un color de fondo de color amarillo y un color de texto de color rojo. La palabra "Tres" tiene un nuevo estilo que reemplaza al primero, y tendrá un color de fondo de verde y un color de texto de cian. En el ejemplo, estamos aplicando estilos a las etiquetas `
` , pero puede aplicar un estilo a cualquier elemento HTML.
```html
```
### CSS interno
Si bien escribir un estilo en línea es una forma rápida de cambiar un solo elemento, hay una manera más eficiente de aplicar el mismo estilo a muchos elementos de la página a la vez.
El CSS interno tiene sus estilos especificados en la etiqueta `
```
Los selectores que se muestran arriba son extremadamente simples, pero pueden ser bastante complejos. Por ejemplo, es posible aplicar estilos solo a elementos anidados; es decir, un elemento que es hijo de otro elemento.
Este es un ejemplo en el que especificamos un estilo que solo debe aplicarse a elementos `div` que son hijos directos de otros elementos `div` . El resultado es que "Dos" y "Tres" aparecerán como texto rojo sobre un fondo amarillo, pero "Uno" y "Cuatro" no se verán afectados (y el texto negro probablemente sobre un fondo blanco).
```html
Four
```
### CSS externo
Todo el estilo tiene su propio documento que está vinculado en la etiqueta `` . La extensión del archivo vinculado es `.css`
#### Más información:
* [Sintaxis CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax) @ MDN
* [Selectores CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) @ MDN
* [Referencia de selectores de CSS](https://www.w3schools.com/cssref/css_selectors.asp)
* [Especificidad de los selectores de CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)