Atom
Increíble editor web, uno de mis favoritos.
Gratis, multiplataforma, de código abierto, ligero y personalizable. No se le puede pedir más.
Este va a ser un capítulo más extenso de lo normal, con un tema fundamental para entender el funcionamiento básico de CSS.
Los selectores en CSS sirven para seleccionar o indicar que elemento quieres modificar. Es una llamada a ese elemento.
Hay diferentes tipos de selectores, veamos cuales son.
Este primer tipo de selector se escribe con el nombre de la etiqueta html que quieres modificar. Afecta a todas las etiquetas del mismo tipo de todo el documento. En el ejemplo que puedes ver, el selector p afecta a todos los párrafos del documento html al que asociemos este estilo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Párrafo 1.</p>
<p>Párrafo 2.</p>
<p>Párrafo 3.</p>
</body>
</html>
p {
font-family: Arial;
font-size: 15px;
}
El resultado es que todos los párrafos obtienen automáticamente todos los estilos especificados en CSS para el selector p
.
Los selectores de clase se escriben con un punto delante del nombre. El nombre será lo más descriptivo posible y se le aplicará a los elementos html que queramos con el atributo class
.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="p_azul">Párrafo 1.</p>
<p>Párrafo 2.</p>
<p class="p_azul">Párrafo 3.</p>
</body>
</html>
.p_azul {
font-style: italic;
font-size: 20px;
color: blue;
}
El resultado es que solo los párrafos a los que vinculo con el atributo class
y llamando al selector de clase p_azul
son afectados por los estilos.
El nombre p_azul
es libre, puedes llamarlo azul, parrafo_azul, letra_azul o cualquier cosa que te haga identificar fácilmente el estilo que es.
Como puedes ver, el párrafo 2, no tiene ningún estilo de clase asignado, por lo que no le afecta y se queda en estilo por defecto de html.
Importante, los nombres de selector de clase no deben comenzar con un número, por ejemplo, 1_azul, 1azul, etc. En cambio, azul_1, a1zul, azul1 si que son correctos, aunque no muy descriptivos. Intenta evitar esto en la medida de lo posible.
Los atributos de estos estilos, son compatibles con cualquier etiqueta de tipo texto, no solo funcionan con <p>
, lo puedes aplicar también por ejemplo a cabeceras <h1>
,<h2>
, etc.
Piensa que si entran en conflicto algunos estilos, prevalecen los selectores de clase sobre los selectores de etiquetas. En el vídeo lo explico detalladamente.
También puedes utilizar esta sintaxis, poner el selector de etiqueta, por ejemplo una p
seguido de un punto y el nombre de selector de clase. En este caso, solo se aplicará el estilo a todos los párrafos que tengan el selector de clase y que sean párrafos, aunque se lo apliques a cualquier otra etiqueta, si no es un párrafo y lleva el atributo con dicha clase, no le va a afectar.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="p_azul">Cabecera h1.</h1>
<p class="p_azul">Párrafo 1.</p>
<p>Párrafo 2.</p>
<p class="p_azul">Párrafo 3.</p>
</body>
</html>
p.p_azul {
font-style: italic;
font-size: 20px;
color: blue;
}
El resultado es que aunque el <h1>
es compatible con los estilos p_azul
y se le ha asignado el estilo con el atributo class
, no se ve afectado porqué he indicado explícitamente, que el siguiente estilo solo afecte a párrafos con la clase indicada p_azul
.
En un atributo class de cualquier etiqueta html puedes añadir todos los estilos que quieras separándolos con un espacio.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Cabecera h1.</h1>
<p class="p_azul centrar_texto">Párrafo 1.</p>
<p>Párrafo 2.</p>
<p class="p_azul">Párrafo 3.</p>
</body>
</html>
.p_azul {
font-style: italic;
font-size: 20px;
color: blue;
}
.centrar_texto {
text-align: center;
}
El resultado es que el primer párrafo obtiene dos estilos, el de p_azul
y el de centrar_texto
y el tercero solo uno.
Puede darse el caso en el que indiquemos varios estilos a un mismo elemento mediante el atributo class
y que estos estén en conflicto, que sean propiedades iguales con valores distintos, por ejemplo, a un párrafo al cual le añadimos un color de letra azul y en otro estilo le indicamos que la letra es roja.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Cabecera h1.</h1>
<p class="p_azul p_rojo">Párrafo 1.</p>
<p>Párrafo 2.</p>
<p class="p_azul">Párrafo 3.</p>
</body>
</html>
.p_azul {
font-style: italic;
font-size: 20px;
color: blue;
}
.p_rojo {
color: red;
}
El resultado es que el párrafo 1 se queda de color rojo. Esto ocurre porque hemos asignado a este párrafo dos veces el atributo color con dos valores diferentes. En este momento, el navegador tiene que escoger entre uno u otro, de modo, que escoge el último valor especificado leyendo los estilos de arriba a abajo. Primero se encuentra con el valor azul y finalmente con el rojo, que es el que determina que debe quedar. Ten en cuenta que el orden de los selectores que especifiques en los atributos class de las páginas html da igual, el orden que importa es el que está en la hoja css.
Podemos utilizar los id (identificadores) para asignar estilos css. En html, en cualquier etiqueta añade el nombre del estilo css con el atributo id
. En css, deberás empezar el nombre del estilo con una almohadilla como se ve en el siguiente ejemplo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 id="titulo">Cabecera h1.</h1>
<p>Párrafo 1.</p>
<p>Párrafo 2.</p>
<p>Párrafo 3.</p>
</body>
</html>
#titulo {
text-align: center;
font-size: 50px;
color: #68ac95;
font-family: arial;
}
El resultado es que el queda una cabecera con el texto centrado, con fuente de 50px, con un color especificado en hexadecimal (expliqué esto en el curso de html avanzado en Youtube, haz click aquí para verlo) y en fuente arial.
La diferencia es clara, class repetidas puede haber las que quieras, id tiene que ser único por documento html. Es decir, este estilo llamado #titulo solo lo puedes usar una vez por página html, ya que el identificador es único, no se repite. Es por esto que en CSS es más normal ver estilos asignados con class que con id.
Si intentas repetir un id, el estilo va a surgir efecto en la mayoría de navegadores, pero no va a validar tu página, con lo que ya sabes, es una mala práctica que no debes utilizar.
Veamos otro tipo de selector en CSS, el selector universal, el cual es capaz de seleccionar todos los elementos de una página html.
Por lógica, solo puedes utilizar un selector universal por hoja de estilo. Este se especifica con nombre de asterisco, nada más. Entre las llaves, pon todas las propiedades que quieras que afecten a cualquier elemento html de una página enlazada.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Don Quijote de la Mancha</h1>
<h2>Fragmento para probar tus habilidades con CSS</h2>
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
que a mí me suceden, pues a ti no...</p>
</body>
</html>
* {
text-align: center;
}
El resultado es que quedan todos los elementos compatibles con text-align, centrados, tanto h1, h2 y p o cualquier otro elemento que lo soporte.
Estos estilos se pueden sobrescribir indicando estilos específicos para cada etiqueta. En el siguiente ejemplo, todos los elementos se centran excepto los párrafos, a los cuales les he indicado explícitamente un valor contradictorio a la norma del selector universal.
* {
text-align: center;
}
p {
text-align: left;
color: gold;
}
El resultado es que quedan todos los elementos compatibles con text-align
, centrados, tanto <h1>
, <h2>
y <p>
o cualquier otro elemento que lo soporte, solo que en este caso, sobrescribo el text-align
de los párrafos, indicando que estos deben ir a la izquierda, el color es solo para que a parte de sobrescribir, todos los elementos pueden llevar propiedades extra no indicadas en el selector universal.
Puedes utilizar los selectores de agrupación para escribir estilos comunes a varios elementos, de este modo, te evitas estar repitiendo propiedades y valores exactamente iguales para cada elemento.
Supongamos que tienes las siguientes etiquetas <h1>
, <h2>
y <p>
del ejemplo de abajo. Quieres que todo el texto aparezca en color azul y centrado a la derecha. Podrías hacerlo con los selectores universales del ejemplo anterior o utilizar los selectores de agrupación.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selectores de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Don Quijote de la Mancha</h1>
<h2>Fragmento para probar tus habilidades con CSS</h2>
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza,
le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo
y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean
durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.
Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te
cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta
tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más
que otro. Todas estas borrascas que nos suceden son señales de que presto ha de
serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que
el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho
el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias
que a mí me suceden, pues a ti no...</p>
</body>
</html>
h1, h2, p {
text-align: center;
color: deepskyblue;
}
El resultado es que quedan todos los elementos indicados se ven afectados por todas las propiedades que les asignes. De la forma con selectores por elemento html tendrías que haber especificado las mismas propiedades tres veces. Si tienes cincuenta elementos iguales, tendrás que repetir muchas.
Capítulo bastante extenso, pero muy necesario para poder entender todo lo que viene a continuación en el curso.
<h1>
, <h2>
y al menos un <p>
.h2
es libre, pon las propiedades que quieras.h1
. Este se llamará titulo_verde
y tendrá el texto en color green (verde). Estará alineado a la derecha.h1
del ejercicio anterior, lo tienes que tener como titulo_verde
. Este estilo se llamará titulo_dimensiones
y tendrá que tener la propiedad para poner el título en 50px
de tamaño de fuente. Al final, entre los dos estilos te debería quedar el título en color verde, alineado a la derecha y con un tamaño de 50px
. Es decir, desde la etiqueta h1 tienes que llamar a los dos estilos a la vez.#parrafo_rosa
y tendrá un color de fuente pink (rosa). Debes aplicárselo a un párrafo.75px
.h1
y para h2
. Las propiedades son libres.La solución la encontrarás aquí: Haz click aquí.
Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.
Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.
No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.