Selector universal
Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 15 de 76.
El selector universal es un selector potente en CSS que se aplica a todos los elementos HTML de una página. Se representa mediante un asterisco (*).
Cuando se utiliza, el selector universal aplica los estilos especificados a todos los elementos, independientemente de su tipo, clase o ID. Esto puede ser útil para establecer estilos globales o restablecer los estilos predeterminados en todo el documento.
Aquí tienes la sintaxis básica para usar el selector universal:
* {
property: value;
}Por ejemplo, supongamos que quieres establecer el color de texto y el tamaño de fuente predeterminados para todos los elementos de una página. Puedes usar el selector universal de esta manera:
* {
color: black;
font-size: 14px;
}
Desafío
FácilSe te proporciona un documento HTML con varios elementos, incluyendo encabezados (<h1>, <h2>), párrafos (<p>) y una división (<div>). Tu tarea es utilizar el selector universal para dar estilo a estos elementos. Sigue los pasos a continuación:
- Escribe una regla CSS utilizando el selector universal que establezca el color de texto de todos los elementos a "darkgray" y el tamaño de fuente a "16px".
Pruébalo tú mismo
<html>
<head>
<title>Universal Selector</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</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 FlexiblesPractica por tu cuenta: Playground de Web