Solo estos, no todos
Tienes cinco párrafos. Quieres que dos se vean en rojo y los otros tres no.
La regla p { color: red; } los pone todos en rojo. No es lo que quieres.
Necesitas una forma de elegir solo algunos. Para eso sirven las clases y los identificadores.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Clase | Un nombre que pones a varios elementos para darles el mismo estilo. | class="notice" |
| Identificador | Un nombre único para un solo elemento de la página. | id="leader" |
| Atributo | Un dato extra dentro de la etiqueta de apertura. | class="notice" |
| Selector de clase | Elige todos los elementos con esa clase. Empieza por un punto. | .notice |
| Selector de id | Elige el elemento con ese identificador. Empieza por una almohadilla. | #leader |
| div y span | Dos etiquetas sin significado propio. Sirven para agrupar y estilizar. | <span> |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Una clase: el mismo estilo para varios
En el HTML añades el atributo class y le pones un nombre inventado por ti.
En el CSS escribes un punto y el nombre: .notice.
Todos los elementos con esa clase reciben la regla. Puedes usarla las veces que quieras.
Los nombres van en inglés, como en los proyectos reales. notice significa aviso.
Pruébalo: los avisos
<h1>Liga del instituto</h1>
<p class="notice">Hoy jugamos a las 17:00.</p>
<p>Los equipos de abajo juegan el sábado.</p>
<p class="notice">Trae la camiseta del equipo.</p>
<ul>
<li id="leader">Los Pinos</li>
<li>El Olivar</li>
<li>La Ribera</li>
</ul>
Un id: un solo elemento
El atributo id da un nombre que no se puede repetir en la página.
En el CSS lo llamas con una almohadilla: #leader.
Úsalo para algo que es único, como el líder de la liga o la cabecera.
Pruébalo: el líder
<h1>Liga del instituto</h1>
<p class="notice">Hoy jugamos a las 17:00.</p>
<p>Los equipos de abajo juegan el sábado.</p>
<p class="notice">Trae la camiseta del equipo.</p>
<ul>
<li id="leader">Los Pinos</li>
<li>El Olivar</li>
<li>La Ribera</li>
</ul>
Clase frente a id
| Clase | Id | |
|---|---|---|
| En el HTML | class="notice" | id="leader" |
| En el CSS | .notice | #leader |
| ¿Cuántos elementos? | Todos los que quieras | Solo uno |
| ¿Se repite el nombre? | Sí, es su idea | No, nunca |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido
Inténtalo
Repaso rápido
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Estilo para un trozo de frase
A veces quieres cambiar solo una palabra dentro de un párrafo.
Envuelve esa palabra en span y ponle una clase. span no cambia nada por sí solo.
Su hermano div hace lo mismo con un bloque entero de la página.