Saltar la navegación

Selectores simples

En la Anatomía de un estilo CSS indicamos que el selector es una parte de la regla de CSS que representa al elemento o elementos HTML del documento a los cuales queremos afectar con la regla de estilo.  Existen tres métodos para referenciar el selector, es decir, seleccionar cuáles elementos HTML serán afectados por las reglas CSS:

Métodos:

Por Clave

  • Afecta a todos los elementos del documento que tienen la clave. 

mis_estilos.css


p { font-size: 20px }

mi_pagina.html

....
<body>
     <p>Mi texto</p>
</body>
....

Por Atributo id

  • Es más específico que el método anterior. Se puede referenciar una etiqueta específica.
  • Importante!: El id es único por elemento.
  • La regla debe ser declarada con el símbolo #.
  • Ejemplo
mis_estilos.css 
....
#texto1 { font-size: 20px } para el código
....
mi_pagina.html 
....
<body>
     <p id=”texto1”>Mi texto</p>
</body>
....

Por Atributo class

  • El atributo class debe ser declarado en el elemento que queremos asignar el estilo.
  • Es un método más flexible que los anteriores ya que se puede replicar el estilo con solo asignar la misma clase a varios elementos.

Ejemplo:

mis_estilos.css 
....
.miclase { font-size: 20px }
....
mi_pagina.html 
....
<body>
     <p class=”miclase”>Mi texto</p>
     <span class=”miclase”>Otro texto</span>
</body>
....