Aplicando estilos al documento

Cuando hablamos de aplicar los estilos a un documento necesitamos de buenos mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos del documento que van a ser afectados. Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas CSS que veremos a continuación

Referenciando con palabra clave

Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la misma clase en el documento. Por ejemplo, la siguiente regla cambiará los estilos de todos los elementos <p>. Utilizando la palabra clave p al frente de la regla le estamos diciendo al navegador que esta regla debe ser aplicada a cada elemento <p> encontrado en el documento HTML.

Código css

p {
 font-size: 20px;
}

Referenciando con el atributo id

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento. Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el símbolo # al frente del valor que usamos para identificar el elemento

Código css

#texto1 {
 font-size: 20px;
}

Referenciando con el atributo class

La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar

Ejemplo:
ejemplo
Uso de css class dentro del documento html.
Código css

.texto1 {
 font-size: 20px;
}

Referencia con el atributo class sólo para determinado tipo de elemento

La razón por la que debemos utilizar un punto delante del nombre de la regla es que es posible construir referencias más complejas. Por ejemplo, se puede utilizar el mismo valor para el atributo class en diferentes elementos pero asignar diferentes estilos para cada tipo. El siguiente ejemplo ilustra una regla que sólo aplica a los elementos de tipo p que utilicen el attributo class texto1

Código css

p.texto1 {
 font-size: 20px;
}

Referenciando con cualquier atributo

Uno de las formas de referenciar elementos HTML es el Selector de Atributo. Ahora podemos referenciar un elemento no solo por los atributos id y class sino también a través de cualquier otro atributo

Aplicar estilo si poseen el atributo name

p[name] {
 font-size: 20px;
}

Aplicar estilo si poseen name con el valor miNombre

p[name="miNombre"] {
 font-size: 20px;
}

Referenciado en atributos con expresiones regulares

Si se conocen las Expresiones Regulares desde otros lenguajes como Javascript o PHP, se podrá reconocer los selectores. En CSS3 estos selectores producen similares resultados

  • La regla con el selector ^= [attribute^=value] a[href^="mi"] será asignada a todo elemento <a> que contiene un atributo name con un valor comenzado en "mi" (por ejemplo, "mitexto", "micasa"), y aplicarle algún estilo: a[href*="mi"] { background: #ffff00; }
  • La regla con el selector $= [attribute$=value] a[href$="mi"] será asignada a todo elemento <a> que contiene un atributo name con un valor finalizado en "mi" (por ejemplo, "emi", "semi").
  • La regla con el selector *= [attribute*=value] a[href*="mi"] será asignada a todo elemento <a> que contiene un atributo name con un valor que incluye el texto "mi" (en este caso, el texto podría también encontrarse en el medio, como en "textomicasa").

Aplicando más de una clase a un elemento

Si a un elemento le quiero aplicar los estilos de más de una clase al mismo tiempo se puede hacer perfectamente concatenando las clases seaparadas entre sí por un espacio. Esto aplicará los estilos combinados de todas las clases que se apliquen sobre el elemento.

Suponiendo que tenemos las siguientes clases:

  • .fuentes-normales {
     font-size: 20px;
    }
  • .texto-rojo {
     color: red;
    }
  • .negrita {
     font-weight: bold;
    }
Si queremos aplicarlas a un elemento div todas a la vez sería de la siguiente forma:
<div class="fuentes-normales texto-rojo negrita" ></div>

Ir a la siguiente sección >>