Sintaxis de CSS
Parte de la sección Estilos con 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: Consta de una propiedad y un valor, separados por dos puntos
:(por ejemplo, color:green;). Cada declaración debe terminar con un punto y coma (;).
- Propiedad: El atributo de estilo que quieres cambiar (por ejemplo, color, font-size).
- Valor: El valor que quieres establecer para la propiedad (por ejemplo, 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.
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 Estilos con CSS
4Fundamentos del texto
Color del textoFamilia tipográficaTamaño de fuentePeso de la fuenteAlineación del textoDecoración del textoDesafío de repaso n.º 1Desafío de repaso n.º 27Modelo de caja, parte 1
¿Qué es el modelo de caja?RellenoMárgenesBordesAncho y altoDesafío de repaso
8Modelo de caja, parte 2
Dimensionamiento de cajasRadio del bordeDesbordamientoSombra de cajaDesafío de repaso3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es un Flex Box?Dirección de FlexJustificar el contenidoAlinear elementosEl centro perfectoDesafío de Flex Box12Fundamentos del diseño responsive
¿Qué es el diseño responsive?Etiqueta meta viewportDiseños fluidosUnidades del viewportFundamentos de las media queriesImágenes flexiblesPractica por tu cuenta: Playground de Web