Hojas de Estilo en Cascada CSS Parte 1

Guía Básica CSS, Hojas de Estilo

La herencia es un concepto muy utilizado en la programación y en este caso no es la excepción ya que esto nos permite definir ciertas propiedades y su valores en un lugar principal de una caja y luego heredarlo a los elementos que son parte de esa caja sin tener que estar definiendo parte por parte los valores de las propiedades definidas en la caja principal.

Hay reglas que pueden cambiar esto al definir un elemento específico con valores diferentes esto quiere decir que ese elemento no heredara los otros parámetros definidos a los demás elementos. Por consiguiente si en CSS decidimos que ciertas etiquetas de un sector tengan sus propias características, basta con definirlas en el lugar específico que se necesiten, y así la última asignación será la que HTML entenderá que es la que debe aplicar pese a que hay características heredadas, pero le dará privilegio a la última declarada.

Las Hojas de Estilos en los Elementos

Básicamente al utilizar las hojas de estilos en los elementos, esto nos hace más fácil el desempeño del código, ya que permite la reutilización del mismo de manera que al mismo tiempo se ahorre más líneas tediosas de código.

Hojas de Estilo en Cascada CSS

¿QUÉ ES CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, cómo se va a imprimir,  incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿PARA QUÉ SIRVE CSS?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

¿CÓMO FUNCIONA CSS?

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

Estructura de las reglas CSS

Cada regla tiene dos partes:

• El "selector". El selector es la parte de la regla que selecciona a qué partes del documento se les debe de aplicar el estilo. En cuanto a la declaración se compone de una combinación de propiedades CSS. Normalmente, el selector es un elemento HTML. 

• La "declaración". Además, la declaración se compone de una lista de parejas "propiedad: valor" separadas por punto y coma, que se corresponden con propiedades válidas dentro de la especificación CSS.

 Motivos por los que se puede anular una declaración:

• Si utilizamos una propiedad que no existe, la declaración entera es ignorada.
• Si utilizamos un valor incorrecto para una propiedad, sólo debería ignorarse el valor, aunque este aspecto depende de la implementación del navegador (aunque la mayoría son bastante tolerantes con los errores en el código CSS).

Estructura de una regla CSS

 

Sintaxis básica de CSS

Cualquier elemento HTML es un posible selector CSS. El selector es simplemente el elemento que está conectado a un estilo particular. Por ejemplo, el selector en:

P { text-indent: 3em ;}

Se aplica a <p> etiqueta de parrafo.

Selectores de clase se usan con punto (.)

Las clases también pueden ser declaradas sin elementos asociados:

.nota { font-size: small; }

En este caso, la clase nota puede usarse con cualquier elemento.

Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequeña (small), pero este nombre perdería todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequeña.

Selectores ID se usan con Almohadilla (#)

Los selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse así:

#mitexto { text-indent: 3em; }

Esto sería referenciado en HTML por el atributo ID:

<P ID= mitexto >Texto con sangría 3em</P>

Selectores de contexto

Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector de contexto en:

P EM { background: yellow; }

Es P EM. Esta regla dice que el texto con énfasis dentro del párrafo debería tener un fondo amarillo; el texto con énfasis en un encabezado no sería afectado.

Declaraciones CSS

Propiedades

Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.

Valores

El valor de declaración es la asignación que recibe la propiedad. Por ejemplo, la propiedad color podría recibir el valor red (rojo) para todos los encabezados desde <h1> hasta <h6>.

Agrupamiento

A fin de disminuir declaraciones repetitivas dentro de hojas de estilo, se permite el agrupamiento de selectores y declaraciones. Por ejemplo, todos los encabezados en un documento podrían tener idénticas declaraciones mediante un agrupamiento:

H1, H2, H3, H4, H5, H6 {

color: red;

font-family: sans-serif ;

}

Herencia

Prácticamente todos los selectores que estén anidados dentro de selectores, heredarán los valores de propiedades asignados al selector exterior, salvo que se modifiquen de otra manera. Por ejemplo, un color definido por BODY también será aplicado al texto en un párrafo.

Hay algunos casos donde el selector interior no hereda los valores del selector exterior, pero éstos deberían ser evidentes. Por ejemplo, la propiedad margin-top no es heredada; intuitivamente, un párrafo no tendría que tener el mismo margen superior del cuerpo del documento.

Comentarios

Los comentarios se indican dentro de hojas de estilo con las mismas convenciones usadas en la programación C. Una muestra de comentario CSS tendría el siguiente formato:

/* LOS COMENTARIOS NO PUEDEN ANIDARSE */

Seudo-clases y seudo-elementos 

Las seudo-clases y los seudo-elementos son "clases" y "elementos" especiales reconocidos automáticamente por los navegadores que soportan CSS. Las seudo-clases distinguen entre los diferentes tipos de elementos (por ej., los enlaces visitados y los enlaces activos representan dos tipos de anclas). Los seudo-elementos se refieren a sub partes de elementos, como la primera letra de un párrafo.

Las reglas con seudo-clases o seudo-elementos toman la forma

selector:seudo-clase { propiedad: valor; }

o

selector:seudo-elemento { propiedad: valor }

 

Las seudo-clases y seudo-elementos no deberían especificarse con el atributo CLASS de HTML. Las clases normales pueden usarse con seudo-clases y seudo-elementos de la siguiente manera:

selector.clase:seudo-clase { propiedad: valor }

o

selector.clase:seudo-elemento { propiedad: valor }

Seudo-clases Ancla (Anchor)

Las seudo-clases pueden asignarse al elemento A para mostrar enlaces, enlaces visitados y enlaces activos en forma diferente. El elemento ancla puede asignar a la seudo-clase link (enlace), el estado de visitada, o activa. Un enlace visitado puede definirse para representar un color diferente e inclusive un diferente tamaño y estilo de fuente.

Un efecto interesante podría ser tener un enlace actualmente seleccionado (o "activo") mostrado en un tamaño de fuente ligeramente más grande y de un color diferente. Entonces, cuando la página se vuelva a seleccionar, el enlace visitado podría mostrarse en un tamaño de fuente más pequeño y con un color diferente. La hoja de estilo de muestra podría lucir así:

A:link    { color: red }

A:active  { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

Seudo-elemento Primera línea

Con frecuencia, en artículos de periódicos, como los del Wall Street Journal, la primera línea de texto de un artículo se muestra en negrita y con todas las letras en mayúsculas. CSS ha incluido esta capacidad como un seudo-elemento. Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como P, H1, etc.). Un ejemplo de un seudo-elemento first-line sería:

P:first-line {

font-variant: small-caps;

font-weight: bold }

Seudo-elemento First letter

El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos. La primera letra de texto dentro de un selector asignado se representará de acuerdo al valor asignado. Un seudo-elemento first-letter puede usarse en cualquier elemento de nivel de bloque. Por ejemplo:

P:first-letter { font-size: 300%; float: left }

Crearía una letra capital tres veces mayor que el tamaño normal de fuente.

Orden de Cascada 

Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. En estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalecerá. Las siguientes características determinarán el resultado de hojas de estilo que se contraponen.

1.      ! important

 

Puede establecerse una regla como importante al especificar ! important. Un estilo designado como importante prevalecerá sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector pueden especificar reglas importantes, la regla del autor primará sobre la regla del lector en casos de importancia. Una muestra del uso de la sentencia ! important:

BODY { background: url(bar.gif) white;

background-repeat: repeat-x ! important}

Origen de las reglas (del autor frente a las del lector)

Como ya se mencionó, tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor prevalecerán sobre las reglas del lector de similar peso. Tanto las hojas de estilo del autor como las del lector prevalecerán sobre las hojas de estilo incorporadas del navegador.

Los autores deberían ser cautelosos con el empleo de reglas ! important ya que prevalecerán sobre las reglas ! important del lector. Un usuario puede, por ejemplo, necesitar de grandes tamaños de fuentes o colores especiales debido a problemas de visión, y tal usuario querrá declarar que ciertas reglas de estilo sean ! important, ya que algunos estilos son vitales para que pueda leer una página. Cualquier regla ! important prevalecerá sobre las reglas normales, por lo que se aconseja a los autores usar reglas normales casi exclusivamente para asegurar que los usuarios con necesidades especiales de estilos puedan leer la página.

Orden de especificación

Cuando dos reglas tienen el mismo peso, prevalece la última regla especificada.

Selector de Identidad – ID

Utilizando el Selector Id podemos establecer una identidad única para un único elemento de la página. La sintaxis html sería por ejemplo <div  id="menu">, donde especificamos la identidad "menu" para ese único contenedor div.

Los selectores de identidad se nombran mediante  una palabra propia precedida por el símbolo #. Es decir, utilizamos el carácter numeral (#) para indicar que se trata de un estilo de tipo Id.

Al elemento html pueden asignársele estilos a través del selector id:

#menu {estilos ...}

Por ejemplo:

#menu {

    background-color: LightGrey;

}

En conclusión, el selector Id solo se puede aplicar a un elemento a la vez en cada página, es decir, no pueden haber dos elemento con el mismo Id. Mediante el selector Id se asignan reglas en el CSS, a cada uno de los elementos.

La etiqueta <span>

La etiqueta <span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo.

A menudo, la etiqueta <span> se emplea para asignar clases a porciones de texto.

Las hojas de estilo por defecto de los navegadores no aplican ningún estilo a la etiqueta <span>.

Ejemplos de la  etiqueta <span > en un archivo css asignando clases a porciones de texto:

Archivo CSS.

span.listo {   font-style: italic;   font-weight: bold;  }

span.cambio {   color: red;  font-weight: bold; }

span.nombre {   color: blue;   font-weight: bold;  font-style: italic; }

Aplicándolo en página HTML.

1. td>Asigna un nombre de clase al elemento <span class="listo">contenedor.</span> </td></tr>
2. <tr>  <td>Es usado junto con hojas de estilos y le dice al <span  class="cambio">navegador</span>la clase a las que el elemento está asociado.</td>
3. <td><span class="cambio">LISTADO</span></td>
4. <ul> <li>Erwin Vides</li>

<li><span class="nombre">Iris </span>Soto</li>

<li>Jerson Castellanos</li>

<li><span class="nombre">Ezequiel </span>Chicas</li>

<li>Edwin Trejo</li>

<li><span class="nombre">Carlos </span>Umaña</li></u

Selectores de clase (class)

Esta clase de selectores se declaran por una palabra propia que los defina, siempre para declararla se tendra que poner el punto antes de la palabra, por ejemplo:

.selectorclase

Con esto podremos darle formato o cambiar propiedades de una clase dentro de un div y que dicho formato solamente afecta a dicha clase por ejemplo.

<p class=”sandra”>Sandra beatriz</p>

<p>Esto es un ejemplo de los selectores de clase</p>

Y en el archivo CSS colocamos

.sandra{ font-size: 1.5em;  font-family: Tahoma;  color:red; }

Como se pude observar los cambios solo se vieron en la parte del selector de clase donde el nombre cambio de letra y de color, así es como se pueden aplicar formatos y cambios a un área dentro de un div sin tener que cambiar todo el div directamente.

Elementos podemos seleccionar con CSS

• Todos los elementos de un tipo determinado: por ejemplo todos los encabezados de primer nivel (h1).
• Todos los elementos de un tipo determinado que pertenezcan a la misma clase (luego veremos cómo asignar clases a los elementos)
• Todos los elementos de determinado tipo que estén dentro de otros elementos que nosotros especifiquemos. (por ejemplo, todos los enlaces que formen parte de una lista).
• Todos los elementos de cierto tipo que estén dentro de otro y que además pertenezcan a una clase. Por ejemplo, todos los enlaces que estén dentro de una lista y que además pertenezcan a las clase ”pepe”.
• Todos los elementos de cierto tipo, pero sólo cuando aparezcan después de un determinado elemento. Por ejemplo todos los párrafos que aparezcan después de un elemento h2.
• Cualquier elemento que pertenezca a determinada clase.
• Un elemento específico al que tenga asignado un determinado ID

Ejemplos de Selectores de Elementos

Selector universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):

* {
margin: 0;
padding: 0;
}

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados, como se verá más adelante.

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p {

...
}

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:

h1 {
color: red;
}

h2 {
color: blue;
}

p {
color: black;
}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:

h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h2 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Selector descendiente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:

p span { color: red; }
Si el código HTML de la página es el siguiente:
<p>
...
<span>Texto1</span>
...
<a href="">...<span>Texto2</span></a>
...
</p>

El selector p span selecciona tanto Texto1 como Texto2. El motivo es que en el selector descendiente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.

Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.

Los selectores descendientes permiten aumentar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendiente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los <span> contenidos dentro de un <h1>:

p span  { color: red;  }
h1 span { color: blue; }

Con las reglas CSS anteriores:

• Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo.
• Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.
• El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.

La sintaxis formal del selector descendiente se muestra a continuación:

selector1 selector2 selector3 ... selectorN

Los selectores descendientes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

En el siguiente ejemplo, el selector descendiente se compone de cuatro selectores:

p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.

No debe confundirse el selector descendiente con la combinación de selectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Se puede restringir el alcance del selector descendiente combinándolo con el selector universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:
p a { color: red; }

<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }

<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.