Estilos dentro de etiquetas:
<etiqueta STYLE="propiedad: valor; propiedad2: valor2;">
</etiqueta>
Para aplicar un estilo a todas las etiquetas iguales, en la cabecera del documento:
<STYLE TYPE="text/css">
<!--
Etiqueta1, Etiqueta2 {propiead1: valor1}
Etiqueta3 {propiedad2: valor2; propiedad3: valor3}
.Clase1 {propiedad4: valor4; propiedad5: valor5}
//-->
</STYLE>
Para coger el estilo de un archivo externo, en la cabecera:
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
El documento estilo.css contendrá:
/* Manual de CSS de WebEstilo.com */
/* Definición de estilos en un archivo aparte */
/* Estilo para el documento */
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}
/* Estilo para la cabecera de nivel 2 */
H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}
/* Estilos para otras etiquetas */
B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier; font-size:9pt;color:maroon}
Otra forma de insertar un fichero es hacerlo dentro de la definición de estilo de la página:
<STYLE TYPE="text/css">
@import url ("estilo.css");
.Class1 {propiedad: valor}
</STYLE>
Hay que llamar al fichero antes de definir ningún otro estilo.
La mayoría de los estilos pueden heredarse: Si se define un estilo para <BODY>, lo heredarán todas las etiquetas que estén contenidas en el <BODY>, siempre que ese estilo sea heredable.
Se puede definir un estilo para una parte de la etiqueta, por ejemplo:
TD B {color:green} /* Cuando pongamos <B></B> dentro de una
celda, escribirá en negrita verde */
UL B {color:purple} /* Cuando pongamos <B></B> dentro de una lista,
escribirá en negrita morado */
Una clase es un estilo que no está asociado a una etiqueta en concreto. Para definir una clase:
.Clase1 {propiedad4: valor4; propiedad5: valor5}
Para usar una clase:
<etiqueta CLASS="Clase1"></etiqueta>
Cualquier etiqueta puede tener un ID para referirnos a ella:
<etiqueta ID="identificativo"></etiqueta>
Podemos definir su estilo de esta forma:
#identificativo {propiedad4: valor4; propiedad5: valor5}
Se le aplicará el estilo automáticamente, al asignarle el ID.
Pseudoclases: de momento sólo están definida para la etiqueta <A>, y son:
Se les define el estilo:
A:link, A:visited {propiedad: valor}
También se pueden usar en una clase:
.Clase1:hover {propiedad: valor}
Se puede escribir un valor numérico de esta forma:
[-]NNtipo
El signo menos se pone si se necesita, NN es la cantidad y tipo es el tipo de magnitud, que puede ser relativa o absoluta.
Las magnitudes relativas son:
Las magnitudes absolutas son:
Para escribir un color hay tres formas:
Desde el punto de vista de las hojas de estilo, hay tres tipos de elementos HTML:
Todo elemento de bloque está "rodeado" por una caja, con propiedades de márgenes, borde, padding y fondo. La caja tiene un ancho y una alineación con respecto al documento.
Bloque:
| Nombre | margin-left margin-right margin-top margin-bottom margin |
padding-left padding-right padding-top padding-bottom padding |
border-left-width border-right-width border-top-width border-bottom-width border-width |
border-style | border-color | width | float | clear |
| Valores posibles | longitud porcentaje auto |
longitud porcentaje |
longitud | none solid double inset outset groove ridge dotted dashed |
none color |
longitud porcentaje auto |
left right none |
none left right both |
| Valor por defecto | 0 | 0 | 0 | none | none | auto | none | none |
| Aplica a | todos | todos | todos | todos | todos | elementos a nivel de bloque | todos | todos |
| Heredado | No | No | No | No | No | No | No | No |
| Valor porcentual | Relativo al ancho del padre | Relativo al ancho del padre | - | - | - | Relativo al ancho del padre | - | - |
padding-xxx: espacio insertado, entre el borde del elemento y el contenido. Parecido al cellpadding de las tablas. El espacio insertado tiene el mismo fondo que el elemento.
border-style: dotted (punteado, puede que no funcione), groove, ridge, inset y outset son efectos 3D.
float: alinea el elemento, haciendo que el texto se agrupe alrededor del mismo, igual que el align en imágenes.
clear: limpia la alineación que existía.
Fuentes:
| Nombre | font-size | font-family | font-weight | font-style |
| Valores posibles | absoluto relativo porcentaje longitud |
familia | bolder lighter 100-900 |
normal bold italic oblique |
| Valores por defecto | medium | user preferences | normal | normal |
| Aplica a | todos | todos | todos | todos |
| Heredado | Si | Si | Si | Si |
| Valor porcentual | Relativo al padre | - | - | - |
En font-size puede tomar valores absolutos: xx-large, x-large, large, medium, small, x-small, xx-small.
En font-family: Verdana, Arial; el navegador buscará la primera, si no la tiene, irá a la segunda, si no encuentra ninguna, pondrá la que tenga por defecto.
En font-weight, podemos poner un valor de 100 a 900. 100 será el más ligero y 900 el más pesado. Normal sería el 400 y Bold sería el 700.
Texto:
| Nombre | line-height | text-decoration | text-transform | text-align | text-indent |
| Valores posibles | número longitud porcentaje normal |
none underline overline line-through blink |
capitalize uppercase lowercase |
left right center justify none |
longitud porcentaje |
| Valor por defecto | normal | none | none | left | 0 |
| Aplica a | elementos a nivel de bloque | todos | todos | elementos a nivel de bloque | elementos a nivel de bloque |
| Heredado | Si | No | Si | Si | Si |
| Valor porcentual | Relativo al tamaño de la fuente | - | - | - | Relativo al ancho del elemento padre |
line-height: alto de una línea, y por tanto, el espaciado entre líneas.
text-transform: transforma el texto a que se aplica.
text-indent: sangrado o márgenes.
Color y fondo:
| Nombre | color | background-color | background-image |
| Valores posibles | color | color | URL entre paréntesis |
| Valor por defecto | black | ninguno | ninguno |
| Aplica a | todos | todos | todos |
| Heredado | Si | No | No |
| Valor porcentual | - | - | - |
Listas:
| Nombre | display | list-style-type | white-space |
| Valores posibles | block inline list-item none |
disc circle square decimal upper-roman lower-roman upper-alpha lower-alpha |
normal pre none |
| Valor por defecto | según HTML | disc | según HTML |
| Aplica a | todos | elementos cuya propiedad display es list-item | elementos a nivel de bloque |
| Heredado | No | Si | Si |
| Valor porcentual | - | - | - |
En display se indica si un elemento es de nivel de bloque (block), incrustado (inline) o de nivel de lista (list-item). Si se ajusta el valor a none, el elemento no será mostrado, lo que se extiende a sus "hijos" y la caja que lo rodea. Los elementos de bloque no responden si se les ajusta como inline.