Selectores para Estilizar Elementos HTML
Para aplicar estilos de forma eficaz, es necesario conocer los selectores CSS, ya que determinan los elementos HTML a los que se aplica el estilo.
Selector de etiqueta
Una forma de aplicar estilos es utilizando la propia etiqueta del elemento. Los estilos especificados usando un selector de etiqueta afectarán a todos los elementos con esa etiqueta. Esto es útil para aplicar estilos consistentes a los elementos en todo el sitio web.
Sintaxis: En el HTML, tenemos un elemento p:
Para aplicar estilos en el archivo CSS, utiliza el nombre de la etiqueta (p) como selector:
Vamos a ejecutar el siguiente ejemplo y comprobar cómo funciona.
index.html
index.css
index.js
Selector de clase
Una forma más precisa de aplicar estilo a los elementos es utilizando selectores de clase. Estos selectores se dirigen a elementos con nombres de clase específicos, permitiéndonos aplicar estilos de forma selectiva.
Sintaxis: En el HTML, añade un atributo class con un nombre de clase significativo:
En el CSS, haz referencia al nombre de la clase con un punto (.) para definir los estilos:
Vamos a ejecutar el siguiente ejemplo y observar que sólo los elementos con la clase text recibirán estos estilos, dándote un control más fino sobre tu estilo.
index.html
index.css
index.js
Composición de clases
También podemos combinar múltiples clases en un único elemento, haciendo de la composición de clases una poderosa herramienta para aplicar estilos - separa los nombres de las clases con espacios en el atributo class.
Sintaxis: En el HTML, añade múltiples nombres de clase a un elemento:
En el CSS, define estilos para cada clase por separado:
Ejecutemos el siguiente ejemplo y veamos cómo funciona. Los elementos con las clases text y font recibirán los estilos especificados.
index.html
index.css
index.js
Selector ID
Aunque es posible utilizar el selector id para estilizar, generalmente no se recomienda. Los IDs deben ser únicos en una página, limitando su reutilización.
Sintaxis: En el HTML, añade un atributo id a un elemento:
En el CSS, haz referencia al ID con un hashtag (#) para definir los estilos:
Vamos a ejecutar el siguiente ejemplo y observar cómo funciona. Este ejemplo aplica estilos al elemento único con el ID title.
index.html
index.css
index.js
¿Cómo podemos orientar y aplicar estilos a este elemento HTML?
Selecciona unas respuestas correctas
¿Todo estuvo claro?
Contenido del Curso
CSS Fundamentals
1. Introducción a CSS
3. Modelo de Caja y Espaciado de Elementos
CSS Fundamentals
Selectores para Estilizar Elementos HTML
Para aplicar estilos de forma eficaz, es necesario conocer los selectores CSS, ya que determinan los elementos HTML a los que se aplica el estilo.
Selector de etiqueta
Una forma de aplicar estilos es utilizando la propia etiqueta del elemento. Los estilos especificados usando un selector de etiqueta afectarán a todos los elementos con esa etiqueta. Esto es útil para aplicar estilos consistentes a los elementos en todo el sitio web.
Sintaxis: En el HTML, tenemos un elemento p:
Para aplicar estilos en el archivo CSS, utiliza el nombre de la etiqueta (p) como selector:
Vamos a ejecutar el siguiente ejemplo y comprobar cómo funciona.
index.html
index.css
index.js
Selector de clase
Una forma más precisa de aplicar estilo a los elementos es utilizando selectores de clase. Estos selectores se dirigen a elementos con nombres de clase específicos, permitiéndonos aplicar estilos de forma selectiva.
Sintaxis: En el HTML, añade un atributo class con un nombre de clase significativo:
En el CSS, haz referencia al nombre de la clase con un punto (.) para definir los estilos:
Vamos a ejecutar el siguiente ejemplo y observar que sólo los elementos con la clase text recibirán estos estilos, dándote un control más fino sobre tu estilo.
index.html
index.css
index.js
Composición de clases
También podemos combinar múltiples clases en un único elemento, haciendo de la composición de clases una poderosa herramienta para aplicar estilos - separa los nombres de las clases con espacios en el atributo class.
Sintaxis: En el HTML, añade múltiples nombres de clase a un elemento:
En el CSS, define estilos para cada clase por separado:
Ejecutemos el siguiente ejemplo y veamos cómo funciona. Los elementos con las clases text y font recibirán los estilos especificados.
index.html
index.css
index.js
Selector ID
Aunque es posible utilizar el selector id para estilizar, generalmente no se recomienda. Los IDs deben ser únicos en una página, limitando su reutilización.
Sintaxis: En el HTML, añade un atributo id a un elemento:
En el CSS, haz referencia al ID con un hashtag (#) para definir los estilos:
Vamos a ejecutar el siguiente ejemplo y observar cómo funciona. Este ejemplo aplica estilos al elemento único con el ID title.
index.html
index.css
index.js
¿Cómo podemos orientar y aplicar estilos a este elemento HTML?
Selecciona unas respuestas correctas
¿Todo estuvo claro?
