8.3. Introducción a CSS: selectores, propiedades y valores: Tipos de selectores CSS: Elemento, Clase e ID

8.3. Introducción a CSS: selectores, propiedades y valores

Estudiar CSS (hojas de estilo en cascada) es esencial para cualquier desarrollador front-end. Es el lenguaje que da estilo y disposición a las páginas web, haciéndolas visualmente atractivas y funcionales. En este capítulo, nos centraremos en un aspecto fundamental de CSS: selectores, propiedades y valores. Además, exploraremos los tres tipos principales de selectores CSS: Elemento, Clase e ID.

Selectores CSS

Los selectores son la forma en que CSS identifica los elementos HTML a los que desea aplicar estilo. Hay varios tipos de selectores, pero nos centraremos en los tres principales: Elemento, Clase e ID.

Selectores de elementos

Los selectores de elementos son los más básicos. Seleccionan elementos HTML según el nombre de su etiqueta. Por ejemplo, si queremos aplicar estilo a todos los párrafos (<p>) de una página, podemos utilizar el selector de elementos 'p'.

PAG {
  color azul;
  tamaño de fuente: 14px;
}

En este ejemplo, todos los párrafos de la página se representarán en azul y con un tamaño de fuente de 14 píxeles.

Selectores de clases

Los selectores de clases son más específicos que los selectores de elementos. Seleccionan elementos HTML según una clase que se les asigna. Las clases se asignan a elementos HTML mediante el atributo 'clase'. Por ejemplo, podemos asignar la clase 'resaltado' a un párrafo específico (<p>) así:

<p class="highlighted">Este es un párrafo resaltado.</p>

Y luego, podemos usar el selector de clase '.highlight' para darle estilo solo a ese párrafo:

.énfasis {
  color rojo;
  tamaño de fuente: 18px;
}

En este ejemplo, solo el párrafo con la clase 'resaltado' se representará en rojo y con un tamaño de fuente de 18px.

Selectores de ID

Los selectores de ID son los más específicos de todos. Seleccionan un único elemento HTML en función de una ID que se le asigna. Los ID se asignan a elementos HTML mediante el atributo 'id'. Por ejemplo, podemos asignar el ID 'título' a un encabezado específico (<h1>) como este:

<h1 id="title">Este es el título.</h1>

Y luego, podemos usar el selector de ID '#title' para darle estilo solo a ese encabezado:

#título {
  color verde;
  tamaño de fuente: 24px;
}

En este ejemplo, solo el encabezado con el ID "título" se representará en verde y con un tamaño de fuente de 24 píxeles.

Propiedades y valores CSS

Una vez que seleccionamos los elementos HTML a los que queremos darles estilo, usamos propiedades y valores de CSS para definir el estilo. Las propiedades son aspectos del estilo que queremos cambiar, como color, tamaño de fuente, margen, relleno, etc. Los valores son las configuraciones específicas que queremos aplicar a estas propiedades.

Por ejemplo, en la siguiente regla CSS:

PAG {
  color azul;
  tamaño de fuente: 14px;
}

'color' y 'font-size' son propiedades, mientras que 'blue' y '14px' son sus valores respectivos.

Hay muchas propiedades y valores CSS diferentes para aprender, y la combinación correcta puede crear una variedad infinita de estilos para sus páginas web.

En resumen, los selectores, propiedades y valores de CSS son herramientas poderosas en su arsenal de desarrollo front-end. Comprender cómo funcionan y cuándo usarlos es clave para crear páginas web funcionales y visualmente atractivas.

Siguiente página del libro electrónico gratuito:

47Introducción a CSS: selectores, propiedades y valores: combinación de selectores de CSS

3 minutos