Sintaxis de CSS
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 2 de 76.
En CSS, la sintaxis se refiere al conjunto de reglas que definen cómo se debe escribir el código CSS. Comprender la sintaxis de CSS es esencial para crear hojas de estilo bien estructuradas y funcionales. Una regla de CSS básica consiste en un selector y un bloque de declaración.
Aquí tienes un desglose sencillo:
- Selector: Especifica el elemento HTML al que quieres dar estilo (por ejemplo, p, div, img).
- Bloque de declaración: Contiene una o más declaraciones encerradas entre llaves
{}.
- Declaración: Consiste en una propiedad y un valor, separados por dos puntos
:(p. ej. color:green;). Cada declaración debe terminar con un punto y coma (;).
- Propiedad: El atributo de estilo que deseas cambiar (p. ej., color, font-size).
- Valor: El valor que deseas establecer para la propiedad (p. ej., blue, 16px).
Por ejemplo:
p {
color: blue;
font-size: 16px;
}En este ejemplo, p es el selector, que apunta a todos los elementos de párrafo. El bloque de declaración contiene dos declaraciones: una que establece el color del texto en azul y la otra que establece el tamaño de la fuente en 16 píxeles.
Desafío
FácilSe te proporciona un código HTML con un elemento de párrafo y una regla CSS para ese párrafo. Modifica la regla CSS para cambiar el color del texto a red.
Hoja de referencia
La sintaxis de CSS consiste en un selector y un bloque de declaración:
- Selector: Especifica el elemento HTML al que se le aplicará el estilo (por ejemplo, p, div, img)
- Bloque de declaración: Contiene declaraciones encerradas entre llaves
{} - Declaración: Propiedad y valor separados por dos puntos
:, finalizados con un punto y coma; - Propiedad: El atributo de estilo a cambiar (por ejemplo, color, font-size)
- Valor: El valor para la propiedad (por ejemplo, blue, 16px)
p {
color: blue;
font-size: 16px;
}Pruébalo tú mismo
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso
3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles