Las propiedades CSS más habituales
Profesor: Javier López
Volver
Selectores CSS
CSS que afectan al texto
CSS que afectan a los divs
CSS que afectan a los enlaces

Existen propiedades CSS que afectan al texto, otras a las cajas (<div>) que contienen elementos, así como otras que afectan a los enlaces entre otros.
Antes de hacer un respaso rápido a todas ellas es de obligado cumplimiento tener bien claro el funcionamiento de los selectores CSS.

Selectores CSS:
En los siguientes ejemplos, el texto podría estar dentro de una caja (<div>) que podría llamarse "intro" (como nombre de tipo id).
<div id="intro">
  Texto a modificar
</div>
o bien podría estar ubicado dentro de un <span> que podría tener el mismo nombre.

<span id="intro"> Texto a modificar </span>
Al tener el mismo nombre, el CSS sería el mismo:

código CSS
#intro{
  Códigos CSS
  Códigos CSS
}
En este caso "#intro{" es el selector que sirve para modificar todos aquellos elementos que tengan el id="intro".

Si en vez de utilizar un id hubiésemos utilizado un class (perfecto para cuando el código CSS se va a aplicar a múltiples divs con el mismo nombre de tipo class) sustituiríamos el # por . (un punto):

<span class="intro"> Texto a modificar </span>
código CSS
.intro{
  Códigos CSS
  Códigos CSS
}
Para información más extensa sobre los selectores accede al tema:

CSS que afectan al texto:
Los textos afectados por el código CSS de los siguiente ejemplos irán ubicados dentro de un <div> o <span>, excepto en los casos en los que se indique lo contrario (como por ejemplo utilizando 'text-align').


Color del texto:
color: #1162ac;
color: chocolate;
Cambia el color del texto.
Se puede especificar con el código hexadecimal del color (utilizando el prefijo #) o con el nombre de color (olive, gold, chocolate...). (Más información en el módulo 5).

Texto color:#1162ac;
Texto color:chocolate;

Tipografía:
font-family: helvetica;
font-family: charlemagne;
Utiliza una tipografía determinada.
Si la fuente no es de sistema se debe añadir el fichero ttf/otf y realizar una vinculación con la misma.
(Tratado en el tema 9 del módulo 2).
Tamaño del texto:
font-size: 20px;
font-size: 2em;
Define el tamaño del texto.
Se puede definir con un tamaño fijo (expresado en píxeles: px), o con un tamaño escalable (em), que indica la proporción respecto al tamaño inicial de la fuente (2em equivale al doble del tamaño inicial).

Tamaño fijo: 20px
Tamaño escalable: 2em

Estilo 'negrita':
font-weight: bold;
Define con CSS el estilo 'negrita' de un texto.
Aunque el estilo 'negrita' se puede especificar con código HTML a través de la etiqueta <b>, con CSS también podemos utilizar esta propiedad de una manera mucho más eficiente.

Negrita

Sombra de un texto:
text-shadow: 2px 4px 6px #1162ac;
Define una sombra que afecta a un texto a través de 4 parámetros (separación horizontal, separación vertical, suavidad y color).
El color se puede especificar con código hexadecimal o con el nombre del color (olive, gold, silver...)

Texto con sombra

Alineación de un texto:
text-align: center;
text-align: right;
Para definir la alineación de un texto, este debe estar contenido dentro de una caja (<div>, <section>...)
Los valores pueden ser 'left', 'right', 'center' o ' justify'.

Texto centrado (center)
Texto alineado a la derecha (right)
Centrado vertical:
line-height: 70px;
Sirve para definir la altura de la línea donde se muestra un texto y por lo tanto para centrarlo verticalmente.
El texto sólo puede ocupar una única línea y debe estar contenido dentro de un <div>.


Espacio entre letras:
letter-spacing: 3px;
letter-spacing: -1px;
Define el espacio entre letras.
Un valor positivo las aleja entre ellas, mientras que un valor negativo las acerca.

Espacio de 3px
Espacio de -1px

Espacio entre palabras:
word-spacing: 10px;
word-spacing: -5px;
Define el espacio entre palabras.
Un valor positivo las aleja entre ellas, mientras que un valor negativo las acerca.

Espacio entre diferentes palabras de 10px
Espacio entre diferentes palabras de -5px

CSS que afectan a las cajas (<div>):
Color de fondo:
background-color: olive;
background-color: rgba(12,65,32,0.5);
Define el color de fondo de una caja (o <div>)
Se puede indicar un color hexadecimal, nombre de color o rgb+a (alpha), donde el 4º valor es la cantidad de transparencia (del 0 al 1).

background-color con color 'olive'
background-color con transparencia al 50%

Separación interna:
padding: 20px;
padding: 20px 0px 6px 40px;
Define el espacio existente entre el contenido y el borde de la caja.
Si se especifica un solo valor será utilizado para la separación por los 4 lados. Si se especifican 4 valores serán utilizados en orden (arriba, derecha, abajo e izquierda) y se especifican 2 serán utilizados (arriba/abajo y derecha/izquierda).


Márgenes y separación:
#caja1{
  margin-left:35px;
  margin-bottom:20px;
}

#caja2{
  margin-left:40px;
}

#caja3{
  margin-left:35px;
  margin-bottom:20px;
}

Define el espacio existente entre cajas (<div>) o bien entre cajas y los márgenes de la página.
Si se especifica un solo valor será utilizado para la separación por 4 lados. Si se especifican 4 valores serán utilizados en orden (arriba, derecha, abajo e izquierda) y se especifican 2 serán utilizados (arriba/abajo y derecha/izquierda).

Posicionamiento:
position: relative / absolute / fixed;
left:20px;
right:20px;

top:40px;
bottom:40px;
}

Para ubicar un (<div>) en una coordenada concreta antes se tiene que definir su posicionamiento (position). Posteriormente, para indicar sus coordenadas se puede utilizar left o right para alinearlo horizontalmente desde la izquierda o derecha y/o top o bottom para alinearlo desde la parte superior o inferior.


Sombras:
box-shadow: 2px 7px 5px gray;
box-shadow: 0 0 9px red;
Para definir una sombra a un (<div>) se deben indicar 4 valores. El primero y segundo es la separación horizontal y vertical de la sombra (con un número positivo se desplaza hacia derecha/abajo y con uno negativo hacia la izquierda/arriba, mientras que con "0" se sitúa justo en la posición del texto). El tercer valor hace referencia a la suavidad del borde de la sombra, mientras que el último valor pertenece al color que tendrá la sombra.

Sombra gris desplazada hacia derecha/abajo
Sombra roja sin desplazamiento
Alinear (a la derecha):
width:230px;
float: left / right;

clear: both;

Para poder colocar diferentes <div> alineados en la misma linea podemos utilizar display:inline-block o float:left o right;.
En este último caso, deberemos también definir la anchura de cada caja.
Para evitar que el <div> que sigue en el HTML al último se coloque en el hueco vacio dejado en la línea anterior utilizamos clear:both;.

A
B
C
D
E
F

CSS que afectan a los enlaces:
Eliminar subrayado:
a{
  text-decoration: none;
}
Elimina el subrayado que aparece por defecto en cualquier enlace.

Es necesario utilizar el selector a{. Utilizado sin indicar ningún elemento afectará a todos los enlaces. Utilizando #div a{ afectará únicamente a los enlaces que se encuentran dentro de la caja con id="div".

Enlace no subrayado

Colores:
a{
  color: chocolate;
}

a:hover{
  color: red;
}

Para definir el color que debe tener el enlace cuando el cursor pase por encima es necesario utilizar el evento :hover, detrás del selector a.

Enlace que cambia de color al pasar encima con el cursor

Cursor:
a:hover{
  cursor: default;
}
Es posible definir un tipo de cursor (dentro de los existentes). Aunque los más habituales son "pointer" (el que aparece por defecto al crear un enlace) o "default" (el cursor habitual de la flecha), que en este caso aparece cuando el cursor pasa por encima del siguiente enlace de ejemplo.

Enlace en el que el cursor no cambia al pasar el cursor por encima