CSS en línea
Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 6 de 76.
CSS en línea es un método para añadir estilos CSS directamente a un elemento HTML utilizando el atributo style. Este enfoque le permite aplicar estilos únicos a elementos individuales sin necesidad de hojas de estilo externas o internas. Los estilos en línea son útiles para realizar cambios de estilo rápidos y específicos en un solo elemento.
Aquí tienes la sintaxis básica para usar CSS en línea:
<element style="property: value;"></element><element>: El elemento HTML al que quieres dar estilo.style: Un atributo que contiene las declaraciones CSS.
property: La propiedad CSS que quieres establecer (p. ej., color, font-size).value: El valor que quieres establecer para la propiedad (p. ej., blue, 16px).
Por ejemplo:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>En este ejemplo, el elemento de párrafo tiene estilos en línea que establecen el color del texto en azul y el tamaño de fuente en 16 píxeles. Estos estilos solo se aplicarán a este elemento de párrafo específico.
Desafío
FácilSe te proporciona un documento HTML con un elemento de párrafo. Utiliza CSS en línea para dar estilo al párrafo con las siguientes propiedades:
- Establece el color del texto a red.
- Establece el tamaño de fuente a 18 pixels.
¡Consulta el ejemplo de la lección para orientarte!
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</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