Introducción CSS

Definición de CSS

  CSS, Hojas de Estilo en Cascada (Cascading Style Sheets), es un lenguaje de maquetación web utilizado para dotar a cualquier documento XML (HTML, XHTML, SVG, ... etc) de un aspecto y formato.

  Nació debido a que HTML (en un principio concebido para usos científicos) está limitado en cuanto a aplicar forma y estilo a un documento. Además, anteriormente, se mezclaba en el código HTML el contenido con las etiquetas para darle forma al documento, lo que hacia muy difícil su depuración.

  Alguna de las ventajas que supone esto son:

• Se puede aplicar identado a la primera línea de un párrafo, aplicar el espacio entre líneas de dicho párrafo, definir visibilidad de elementos, definir margenes, subrayados, tachados.
• Las unidades de medida pasaron de ser solo en píxeles o pulgadas, ahora se puede definir: píxeles(px), pulgadas(in), puntos(pt), centímetros(cm).
• .... etc, etc, etc.

  Casi todos, por no decir todos, los navegadores actuales soportan esta tecnología.

Incorporación dentro de HTML

  Dicho lenguaje puede ser embebido dentro del documento HMTL:

1. Código CSS dentro de un documento HTML

 o en un documento aparte con extensión ".css" y agregandolo al documento HTML de la siguiente manera:

2. Agregar documento (".css") externo al documento .html

(1) type: Tipo de archivo a adjuntar, en nuestro caso text/css.

(2) href: Dirección relativa o absoluta hacia el archivo ".css", es decir, la dirección a partir del documento ".html" que llama al documento ".css" o poniendo directamente la dirección URL del archivo.

(3) Tipo de medio donde se aplica el archivo css. 

Los tipos de medio disponibles son:
- All: Cualquier tipo de medio.
- Braille: medio relacionado con dispositivos táctiles braile.
- Embossed: Para impresoras braile.
- Handheld: para dispositivos de bolsillo o de mano que normalmente tienen una pantalla pequeña.
- Print: medio específico para cuando se imprimen documentos en la impresora. Desde la vista previa para imprimir que tienen los navegadores, generalmente en el menú de Archivo, también podemos ver el resultado de la página para impresión que utiliza los estilos CSS del tipo de media "print".
- Projection: tipo de medio que se aplica para las presentaciones que se muestran con proyector.
- Screen: medio que se utiliza para pantallas grandes, generalmente las pantallas de los ordenadores personales.
- Speech: medio para sintetizadores de voz.
- Tty: tipo de medio que se utiliza en dispositivos que tienen un tamaño fijo de carácter, como un teletipo, terminal, consola de comandos etc. En este tipo de media no se puede usar la unidad de medida de píxeles (px) porque todo lo que se puede mostrar es a nivel de carácter.
- Tv: para cuando se accede a una web desde un dispositivo de televisión.

Se pueden aplicar distintos @media dentro de un documento css, es decir, dentro de un mismo documento css pueden haber estilos asociados a medios distintos como por ejemplo que el estilo del párrafo visto desde una pantalla de un ordenador personal y desde un documento impreso sea distinto, podríamos especificar dichas diferencias de la siguiente manera:

3. Documento css: style.css

Si dichos estilos los hubiéramos hecho en un documento ".css" externo (style.css) y su localización en nuestro servidor fuera la misma que el documento que lo esta llamando (index.html) se incorporaría en este de dos posibles maneras:

4. Las dos posibles maneras de incluir el archivo anterior en el documento .html

Es decir, indicamos que los medios utilizados son print y screen.

  Dentro de las dos posibilidades (incluirlo dentro de la página ".html" o ponerlo en un documento aparte ".css") yo recomiendo la segunda manera ya que se crea un código mucho mas estructurado y legible, por lo tanto más fácil de modificar y mantener, y por eso a partir de ahora cada ejemplo o cada explicación dicho código lo pondré a parte (".css").

Sintaxis de CSS

  La sintaxis de CSS es realmente sencilla:

5. Sintaxis de CSS

Donde selector es el nombre de la clase/identificador. Se puede aplicar un mismo estilo a diferentes clases/identificadores en la misma declaracion, separando estos mediante comas.

La diferencia entre clase (class) y identificador (id), radica en que el primero (class) puede ser utilizado por uno o varios elementos HTML, mientras que el segundo solo (id) puede ser utilizado por un elemento HTML al cual identifica.

Para diferenciar un selector identificador de un selector clase, se antepone al nombre o bien "#" o bien ".". El primero indica que es un identificador y el segundo indicaría que es una clase.

Como ejemplo de todo lo anterior propongo crear una clase y un identificador con el nombre de "objeto":

6. Class e Id "objeto"

Al aplicar esta clase y este identificador respectivamente a un elemento HTML estamos proporcionandole a dicho elemento los atributos CSS anteriormente declarados.

7. Aplico la clase y el identificador objeto anteriormente declarado

Como dije anteriormente la diferencia entre estas dos declaraciones (que a primera vista crean el mismo div con las mismas propiedades) es que el primero queda identificado con el nombre "objeto" y ningún elemento más podrá identificarse con dicho nombre, mientras que en el segundo caso le aplicamos una clase "objeto" que podremos aplicar a tantos elementos queramos dentro del mismo documento.

La seudo clase sirve para identificar propiedades que tendrá el objeto al cual haga referencia el identificador/clase en determinados eventos (evento que no ha sido visitado, un evento visitado, ponerse encima de un elemento... etc.) o bajo determinadas circunstancias (ser el primer elemento,.. etc.). Por ejemplo si ponemos

8. Clase "objeto" con la seudo-class focus.

9. Aplico la clase anterior con la seudo-class añadida

En este ejemplo anterior, estamos indicando que el div al que le hemos aplicado la clase "objeto" adquirirá los atributos cuando tenga el foco de la página o en otras palabras cuando este seleccionado.

Las seudo clases (pseudo-class) disponibles son:

• :first-child: Hace referencia al primer elemento de un conjunto por ejemplo en una lista <li>, sería el primer elemento de esa lista.
• :link, :visited : Son seudo clases de enlace. Aplica los atributos cuando el enlace aún no ha sido visitado (:link) o cuando ya ha sido visitado (:visited).
• :hover, :active, :focus: Son seudo clases dinámicas. :hover es cuando el ratón esta encima del elemento, :active es cuando el elemento esta activado, es decir, se hace click sobre el elemento y :focus el elemento tiene el foco de la pagina, es decir, esta seleccionado.
• :lang: Es una seudo clase de idioma. Permite especificar el aspecto de los elementos de un determinado idioma.
•  :target: Es una seudo clase de enlace. Se aplica cuando es un enlace objetivo, es decir, el enlace ha sido visitado en la acción inmediatamente anterior.
• :root: Es una seudo clase estructural. Se aplica cuando es el elemento principal de un documento.
• :empty: Es una seudo clase estructural. Se aplica cuando no tiene nodos hijos.
• :only-child: Es una seudo clase estructural. Se aplica cuando no tiene nodos hermanos.
• :only-of-type: Es una seudo clase estructural. Se aplica cuando tiene un selector unico entre sus hermanos.
• :nth-of-type(n): Es una seudo clase estructural. Se aplica cuando es el nth elemento con ese selector.
• :last-child:Es una seudo clase estructural. Se aplica cuando es el último nodo hijo de un elemento.
• :first-of-type: Es una seudo clase estructural. Se aplica cuando es el primer elemento de su tipo de selector en el elemento primario.
• :last-of-type: Es una seudo clase estructural. Se aplica cuando es el ultimo elemento de su tipo de selector en el elemento primario.
• :not: Es una seudo clase estructural. Se aplica cuando no esta usando un selector específico.

Los seudo elementos (pseudo-element) disponibles son:

• :first-letter: Aplica estilo a la primera letra de un elemento. Por ejemplo, si ponemos:

10. Estilo a la primera palabra de todos los párrafos de un documento .html

           Le aplicaremos el estilo a todas las primeras letras de todos los parrafos.

• :first-line: Aplica estilo a la primera linea de un elemento. Por ejemplo si ponemos

11. Estilo a todas las primeras palabras de todos los párrafos de un documento .html

           Le aplicaremos el estilo a todas las primeras letras de todos los parrafos.

• :before: Aplica estilo a elemento anterior a un elemento, o crea un elemento antes de un elemento. Por ejemplo:

12. Aplico color de fuente rojo al elemento html anterior a todos los párrafos de un documento .html

13. Coloco el texto hola antes de todos los párrafos de un documento .html y le aplico el color rojo

• :after: Exactamente igual que :before pero en este caso con en elemento posterior a un elemento hmtl. Por ejemplo:

14. Le aplico el color de fuente rojo al elemento posterior a todos los párrafos de un documento .html

15. Coloco el texto hola después de todos los párrafos de un documento .html y le aplico el color rojo