CSS en línea
Parte de la sección Styling with 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 deseas establecer (por ejemplo, color, font-size).value: El valor que deseas establecer para la propiedad (por ejemplo, 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!
Hoja de referencia
Usa el atributo style para aplicar CSS directamente a los elementos HTML:
<element style="property: value;"></element>Ejemplo con múltiples propiedades:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>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 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