Introducción

Con CSS (Cascading Style Sheets) podemos controlar el aspecto de nuestras paginas HTML, más hoy en día que con HTML5 la tendencia es usar el menor número de atributos dejando así todo lo que se refiere a la maquetación, aspecto, diseño, etc,  a CSS.

Con las hojas de estilo no solo podremos hacer que nuestros textos y fotos se vean del modo que deseemos, además controlaremos toda la estructructura de nuestra página, menús, columnas, etc.

Y más aún, con las nuevas tecnologías debemos hacer que nuestras páginas se adapten a múltiples dispositivos, y CSS será un gran protagonista en esta tarea.

En este tema veremos como podemos dar formato a nuestros códigos html para dar forma a ese diseño que tenemos representado en nuestros bocetos.

Formato del código CSS

Las reglas CSS tienen dos partes findamentales.

• Selector (para identificar el elemento sobre el que va actuar).
• Declaración para decir qué hace con ellas, en la imagen podemos ver como a la etiqueta H1 de html le aplicamos un color.

Es importante que os familiaricemos con su sintaxis:

sintaxis : .nombreEstilo {propiedad: valor;}

Donde colocar los estilos

Tenemos 3 formas de incluir estilos en nuestras páginas, aunque debemos elegir con cuidado cual de ellas debemos usar, pues sobre todo dado el trabajo que invertimos en realizar nuestros proyectos debemos tener siempre en cuenta la reutilización de los mismos, o nos veremos obligados a realizar las mismas acciones en muchos lugares diferentes de nuestro sitio.

Veamos cuales son:

1ª Usando el atributo style=”” de HTML

En este caso, aplicamos directamente las reglas de estilo en la misma etiqueta HTML, este método no es muy recomendable en la mayoría de los casos, pues no lo podremos reutilizar. Salvo que nuestro sitio sea extremadamente reducido, o estemos seguros de que no lo queremos cambiar no debemos abusar de este método.

Un uso apropiado de su uso es si queremos enviar un mensaje por mail, donde le daremos formato mas fácilmente.

2ª Usando la etiqueta <style> de HTML

Usando esta etiqueta podremos definir la colección de estilos en la parte alta de la página el <head> y podremos reutilizarlos todo lo que queramos, pero sin salir de la página, tampoco resulta el más adecuado si estamos construyendo un sitio de varias paginas pues muchos de los estilos se repiten y tendríamos que hacerlo de nuevo en cada una de ellas.

3ª Usando un documento externo

Este es el método más utilizado, pues nos permite realizar una biblioteca de estilos que podremos utilizar desde todos los documentos del sitio web.

Para ellos crearemos un archivo con la extensión .css y ahí iremos metiendo todos los estilos que necesitemos con solo indicar a cada archivo HTML que se vincule con la hoja de estilos.

Para realizar este vinculación utilizaremos la etiqueta html <link> donde por medio de atributos indicaremos lo que queremos hacer.

Selectores

Los selectores resultan imprescindibles para realizar los diseños de nuestras páginas. Como hemos visto anteriormente las reglas css constan de una parte que se llama selector y otra la declaración.

El selector puede ser una etiqueta html, pero como es lógico si aplicamos un estilo a un párrafo de una etiqueta <p> no vamos a querer que siempre tenga el mismo formato, por eso disponemos de varios tipos de selectores.

Selector de etiqueta:  Este selector actua sobre la etiqueta indicada. Por ejemplos si quisiéramos dar formato a las etiquetas <p>

En este caso, todas las etiquetas <p> que pongamos en html serán de color rojo.

Selector universal

Este es el usado en los ejemplos anteriores y es la forma de definir un estilo en html aplicándoselo a la propia etiqueta html.

En este caso, el * actúa de comodín y todos los elementos de la página toman las propiedades, en el ejemplo todas las etiquetas html pasarán a tener un margen de 0px y todos los textos serán de tipo arial.

Selector de clase

En muchos casos querremos definir estilos o reglas sin tener que depender de las etiquetas html, así que necesitamos un modo de definir (marcar) los elementos de html  para aplicarles estilos indiferentemente de la etiqueta en la que se encuentre.

Uno de ellos son las clases, para ello necesitamos indicarlo en dos partes diferentes, en el código html  con el atributo class y en la hoja de estilo css indicándole que estamos hablando de un estilo (con un punto antes del nombre).

Pongamos un ejemplo:

Supongamos que tenemos una serie de estilos creados para las tablas que incluyan precios en nuestra página, así que  la parte de HTML pondremos dentro de la etiqueta table el atributo class indicandole el nombre de la clase a utilizar.

Y en el archivo .css incluiremos dicha clase:

Es importante que te fijes en como ponemos un punto antes del nombre de la clase, es la manera que tiene css de saber que nos estamos refiriendo a una clase y no a otro tipo de selector.

Selectores ID

Los selectores ID tienen una forma de actuar similar a las clases aunque cambia su sintaxis, para indicar en html el elemento al que queremos aplicar la regla, lo haremos con el atributo id, y en la hoja de estilos lo diferenciaremos con el símbolo #.

Ejemplo:

Y en el css:

La herencia

Como hemos podido ver en el tema anterior, cuando componemos nuestra página metemos etiquetas dentro de otras.

Es importante entender que el css es heredable y los elementos que se encuentren dentro de otros heredarán las popiedades del anterior:

Ejemplo:

En css:

En html;

Dado que le hemos puesto a la clase .textoRojo la regla color:red;  la herencia hace que el texto sea de color rojo.

Herencias no deseadas:

Algunas veces este tipo de comportamiento hace que heredemos propiedades no deseadas, y aunque normalmente unas se pisan con otras, existe un atributo que fuerza este cambio si el explorador no aplica la nueva regla.

Agrupación de estilos

Si lo que queremos es aplicar una regla a varios selectores podemos crear una regla con varios.

Esto aplicará el estilo a todas los selectores indicados, en este caso (p,a,table y ul). Lo que puede  facilitarnos el trabajo. Esto no significa que no podamos volver a usar alguno de esos selectores para aplicarles una nueva regla.

En algunas ocasiones queremos aplicar el estilo a un hijo específico de una etiqueta, para ello lo indicamos con el símbolo > indicando al padre y al hijo.

De este modo indicamos que solo los enlaces hijos de p serán de color naranja  mientras que el resto serán de color azul.

Unidades en CSS

Existen dos tipos de unidades, absolutas y relativas:

Unidades absolutas

•  in, pulgadas (“inches”). Una pulgada son 2.54 centímetros.
• cm, centímetros.
• mm, milímetros.
• pt, puntos. Un punto equivale a unos 0.35 milímetros.
• pc, picas. Una pica equivale a 12 puntos, es decir, a unos 4.23 milímetros

Unidades relativas:

• em, relativa respecto del tamaño de letra del elemento.
• px, (píxel) relativa respecto de la resolución de la pantalla.
• % , el tanto por cien relativo al tamaño de la ventana del navegadodr.

Principales propiedades

Existen multitud de reglas que podemos aplicar a nuestros documentos, a continuación mostramos las principales y las que más se usan.

Si quieres ver mas reglas y ejemplos de su aplicación puedes ir a este sitio web: http://librosweb.es/referencia/css/

Referentes a la Tipografía: ( X hace referencia al selector)

font-family: Para definir el tipo de fuente.

Valores: Arial; Helvetiva; sans-serif; serif; Times New Roman; Times; Verdana; Georgia; Geneva; Courier; Corier New …

Nota: Los tipos utilizados deben ser los que tienen los equipos informáticos de base, pues en principio los tipos de letra no viajan (Excepción: con CSS3 existen formas de aplicar estilos con archivos ttf propios aunque no es lo más habitual dado que aumenta el peso de la página).

Ejemplo:

font-size: Tamaño de la fuente.

Valores: unidades, porcentaje.

Ejemplo:

font-style: Estilo de la fuente.

Valores: italic; normal;

font-weight: negrita

Valores:  valores absolutos: 100, 200, 300 … 900,  bold; normal.

Ejemplo:

text-decoration: Efectos tipográficos.

Valores: blinks (parpadeante); line-through (tachado); underline (subrayado); overline (‘sobrerayado’)

text-transform: Transformación del texto.

Valores:  capitalice (convierte la primera letra de cada palabra a mayúsculas); uppercase (todas a mayúsculas); lowercase (todas a minúsculas).

Color: Color del elemento.

Valores: nombre del color,  valor del color

 

Referentes a la alineación:

letter-spacing: Espacio entre letras.

Valores:  unidades

word-spacing: Espacio entre palabras.

Valores: unidades

line-height: Espacio entre renglones.

Valores: unidades, porcentaje.

text-align: Alineación horizontal del texto.

Valores: left; right; center; justify

Text-indent: Sangrado.

Valores: unidades, porcentaje

 

Referente a contenedores

Border

En ocasiones las propiedades para más facilidad podemos incluir varias propiedades en una.

Ejemplo:

CSS permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo.

border-top-width, border-right-width, border-bottom-width: Para definir el grosor.

Ejemplo:

border-top-color, border-right-color, border-bottom-color, border-left-color: Para definir el color del borde

Ejemplo:

border-top-style, border-right-style, border-bottom-style, border-left-style: Para definir el estilo del borde.

Ejemplo:

width y height: 

Ancho y alto de la caja.

Valores:

• – unidades
• – porcentaje

Margin:

El margen de un área limpia alrededor de un elemento. El margen no tiene un color de fondo, y es completamente transparente.

El margen superior, derecho, inferior e izquierdo se puede cambiar de forma independiente utilizando las propiedades por separado.

Ejemplo

Para acortar el código, es posible especificar todas las propiedades de los márgenes en una propiedad. Esto se conoce como una propiedad resumida.

La propiedad margen puede tener de uno a cuatro valores.

• margen superior es de 25px
• margen derecho es 50px
• margen inferior es 75px
• margen izquierdo es de 100px

Támbien podemos representarlo con tres balores.

• margen superior es de 25px
• márgenes derecho e izquierdo son 50px
• margen inferior es 75px

Y con dos

• márgenes superior e inferior son 25px
• márgenes derecho e izquierdo son 50px

Por último su ponemos un solo valor será aplicado a los cuatro lados por igual.

• los cuatro márgenes son 25px

padding

Espaciado interior de un elemento. El relleno se ve afectado por el color de fondo del elemento.

El relleno superior, derecho, inferior e izquierdo se puede cambiar de forma independiente utilizando las propiedades por separado.

Ejemplo:

Al igual que en el margen podemos abreviar su estructura:

• relleno superior es 25px
• relleno derecho es 50px
• relleno de inferior es 75px
• relleno a la izquierda es 100px

background-color

Color de fondo.

Valores: nombre del color, valor del color.

background-image

Poner imagen de fondo.

Valores: url(‘URL’)

Ejemplo:

border-color

Color del borde de la caja.

Valores: nombre del color, valor del color

Display

Forma en que se va a mostrar el elemento.

Valores: inline; block; list-item; none

 

Referentes a las listas

list-style-type

Define el símbolo (listas sin orden) o tipo de numeración (listas ordenadas) que precede a cada elemento de una lista.

Valores: circle; disc; square; decimal; lower-alpha; lower-roman; upper-alpha; upper-roman; none

list-style-image

Define la utilización de una imagen como marcador o símbolo de elementos de una lista.

Valores: url(localización de la imagen), none

list-style-positicon

En elementos de lista con varias líneas determina la forma de sangrado, con respecto a la marca o símbolo de lista, de aquellas líneas que no son la primera.

Valores: inside; outside