Estructura y reglas de CSS

Sintaxis básica
Reglas

Selectores

Cualquier elemento HTML es un posible selector CSS1. El selector es

simplemente el elemento que está conectado a un estilo particular. Por
ejemplo, el selector en:

P { text-indent: 3em }

es P.

Selectores de clase

Un selector sencillo puede tener diferentes clases, permitiendo así al mismo

elemento tener diferentes estilos. Por ejemplo, un autor puede querer
mostrar el código en un color diferente dependiendo del idioma:

code.html { color: #191970 }

code.css { color: #4b0082 }

El ejemplo de arriba ha creado dos clases, css y html para usar con el
elemento CODE de HTML. El atributo CLASS se usa en HTML para
indicar la clase de un elemento, por ejemplo,

<P CLASS=advertencia>Solo se permite una clase por selector.

Por ejemplo, code.html.proprietario no es válida.</p>

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

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í:

#svp94O { text-indent: 3em }

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

<P ID=svp94O>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

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).

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
CSS1 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 }

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 }

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

Seudo-clases Ancla (Anchor)

 Las seudo-clases puede 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. CSS1 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}

2. 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 primarán sobre las hojas de
estilo incorporadas del navegador.

Los autores deberían ser cautelosos con el empleo de

reglas ! important ya que primará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.

3. Reglas de selector: Calculando especificidad

Las hojas de estilo también pueden primar sobre

hojas de estilo en conflicto basándose en su nivel de
especificidad, donde un estilo más específico siempre
prevalecerá sobre uno menos específico.
Simplemente es cuestión de contar para calcular la
especificidad de un selector.
 a. Cuente el número de atributos ID en el
selector.
b. Cuente el número de atributos CLASS en el
selector.
c. Cuente el número nombres de etiquetas
HTML en el selector.

Finalmente, escriba los tres números en orden

exacto sin espacios ni comas para obtener un
número de tres dígitos. (Nota: puede necesitar
convertir los números a una base mayor para
terminar con tres dígitos.) La lista final de
números que corresponden a selectores
determinará fácilmente la especificidad,
donde los números más altos priman sobre los
más bajos. La siguiente es una lista de
selectores ordenados por especificidad:

#id1 {xxx} /* a=1 b=0 c=0 -->

especificidad = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 -->
especificidad = 013 */
LI.red {xxx} /* a=0 b=1 c=1 -->
especificidad = 011 */
LI {xxx} /* a=0 b=0 c=1 -->
especificidad = 001 */

4. Orden de especificación

Para hacerlo sencillo, cuando dos reglas tienen el

mismo peso, prima la última regla especificada.
Escribiendo hojas de estilo
Elementos modificables con CSS

O mejor dicho, atributos de elementos que pueden modificarse con CSS. Son muchos (casi todos)
los aspectos que pueden modificarse con CSS. Dado el carácter general de esta guía, aquí veremos
solamente los más utilizados.

Generalmente se actúa sobre los siguientes:

 Texto o contenido
 Tamaño del bloque
 Color del fondo del bloque
 Bordes de bloque
 Estilo de los bordes
 Color de los bordes
 Márgenes de bloque
 Espaciado interno del bloque
 Posicionamiento del bloque
 Gráficos y bloques flotantes
 Visibilidad del bloque
 Listas
 Enlaces
 CSS + JavaScript
 Efectos especiales
 Tablas

Y puede que te preguntes qué es un bloque. Como bloque puede entenderse todo lo comprendido
dentro de elementos con cierre, como <body> </body>, <p> </p>, <form> </form>, <table>
</table>, <td> </td>, <div> </div>, etc., y al aplicar estilos con CSS no es buena idea escribir nada
fuera de estos elementos. En lugar de ser un nombre de elemento HTML, un bloque también
puede tener un nombre definido por el programador, por ejemplo "menu", y generalmente son
éstos los que contienen en su interior a los anteriores o a otros bloques definidos por el usuario. El
número de bloques en una página puede ser muy elevado (más de mil), y dependerá de la
capacidad del navegador utilizado.

Veamos cómo funciona cada cosa:

Los Márgenes de bloque son el espacio comprendido entre el bloque y el

borde de la ventana activa del navegador. Se controla con el atributo
margin.

Los Bordes de bloque, sin aplicar estilos, no son visibles, y es como un

cuadro imaginario que envuelve todo el contenido del bloque. Su atributo de
control es border.
 Espaciado interno del bloque es la distancia entre el borde del bloque y su
contenido. Es el atributo padding (en inglés significa algo así como
"acolchado")

El Estilo y color de los bordes, son evidentes: son las líneas que delimitan
el bloque, que pueden dibujarse de varias formas en cuanto a tipo de trazo,
grosor y color. Estos dos atributos también pueden actuar sobre los bordes
de otros elementos contenidos dentro de un bloque, como formularios,
tablas, gráficos, etc.

El Color del fondo se controla con las mismas instrucciones que las de la
página HTML: background. Los parámetros de color, al igual que en
HTML, se pueden escribir con su nombre (en inglés) o con la notación RGB
en hexadecimal.

El Tamaño son las dimensiones del bloque. Si no se indican dimensiones,

por defecto, el bloque ocupará todo el ancho de la ventana, y de alto lo que
su contenido precise. Se utilizan dos atributos para controlarlo: width para
el ancho y height para el alto.

Estilo del texto

Veamos los parámetros disponibles para dar estilo al texto. Como ya sabes, las unidades de
medida aplicables a todos ellos son varias, pero para mayor claridad, en todos los ejemplos
utilizaremos solamente el píxel: px. Sea por ejemplo la siguiente página:

<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css"
HREF="estilo.css">
</HEAD>
<BODY>

Texto fuera de párrafo.<BR>

Segunda línea fuera de párrafo.

<P>texto de párrafo. <BR> segunda línea de

párrafo.</P>

</BODY>
</HTML>

Y si escribimos la siguiente hoja de estilo estilo.css:

BODY {color:green }
 P {color:red;
font-size:20px;
font-family:Courier;
font-weight:bold;
font-style:italic;
line-height:30px;
letter-spacing:5px;
text-decoration:underline;
text-transform:capitalize;
text-align:left;
text-indent:30px;
}
Se obtiene:

Texto fuera de párrafo.

Segunda línea fuera de párrafo.

texto de párrafo.
segunda línea de párrafo
Fíjate en la gran diferencia de estilo que hay entre las dos primeras líneas y las dos siguientes.
Analicemos cómo funciona: Las dos primeras líneas de texto, en color verde, tienen todos sus
valores por defecto, excepto el color que lo reciben de la etiqueta BODY definida en la css. Las dos
siguientes, en rojo, reciben todas sus características de la etiqueta P, también definida en la css.
Como puedes ver, hay una gran cantidad de atributos que actúan sobre el estilo de ese texto.

color:red; Este ya lo conocemos. Define el color del texto. El color

deseado puede escribirse directamente, en inglés, o puede utilizarse el
sistema RGB en hexadecimal. Por ejemplo, este mismo color rojo en RGB
sería: #FF0000; Ciertos valores, como el rojo, pueden escribirse de forma
abreviada: #F00; Otra forma de declarar el color es mediante la función
rgb() que puede parametrizarse en decimal o en tantos por ciento. He aquí
un ejemplo con las cuatro formas del color rojo:

color: #ff0000
color: #f00
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)

Recuerda que en el índice tienes unas tablas con los nombres y códigos de
los colores.

font-size:20px; También muy conocido: define el tamaño de los

caracteres. Además del tamaño definido por el usuario, expresado en
cualquiera de las unidades de medida conocidas, puede tener alguno de los
siguientes valores absolutos: xx-large x-
large large medium small x-small xx-small.
font-family:Courier; Indica el nombre (o nombres) del tipo de letra que se
va a emplear. En el ejemplo se ha utilizado el tipo "Courier", pero pueden
escribirse varios separados por comas, lo que indica al navegador que si no
existe en la máquina el primer tipo, utilice el segundo, y si tampoco, el
tercero, etc. Por ejemplo: font-family:Courier,Verdana,Arial;
Cuando definas tipos de letra, recuerda que muchos programas y algunos
drivers de impresora instalan sus propias fuentes en el sistema sin avisarte, y
puede que en tu máquina haya tipos que no son estándar en Windows. No se
deben utilizar tipos extraños que difícilmente se encontrarán en las
máquinas de los clientes.

font-weight:bold; Aquí se especifica el peso o grosor de la fuente. Pueden

emplearse literales como lighter, normal (por defecto) o bold. También se
pueden utilizar números entre 100 y 900, escritos de 100 en 100 (no sirve
190, pero sí 200). Los pesos no tienen los mismos resultados en todas las
máquinas, ya que depende mucho de la calidad de su pantalla, de su
resolución, del navegador que emplea... En cualquier caso, no deben hacerse
combinaciones extrañas, como definir un size muy pequeño y darle peso
900, ya que lo único que conseguirás es un borrón perfectamente ilegible.

font-style:italic; Solamente tiene dos posibilidades: normal (por defecto)

o italic que es el empleado en el ejemplo que estamos analizando, y que
hace que el texto tenga cierta inclinación.

line-height:30px; Sirve para establecer la distancia entre líneas

consecutivas de un mismo párrafo. Además de en píxels o alguna de las
unidades de medida que ya conocemos, puede indicarse con un simple
número que viene a indicar, aproximadamente, cuantas anchuras de línea se
tomarán como unidad de medida para separar una línea de otra. Así, por
ejemplo, si pones 0 la segunda línea se suporpone a la primera.

letter-spacing:5px; Establece la separación entre los caracteres de la

línea.

word-spacing:5px; Establece la separación entre las palabras de la línea.

text-decoration:underline; Con este parámetro, que no influye en el

tamaño, puedes acompañar al texto de una delgada línea decorativa que
puede estar en tres posiciones distintas, como underline (el típico
subrayado debajo de la línea), through (en el centro de la línea -tachado-) o
overline (encima del texto). Para que no aparezca se utiliza none (por
defecto). El valor none se puede utilizar para eliminar el efecto de
subrayado que ponen otros elementos, como ocurre en los links.

text-transform:capitalize; Curioso efecto que provee de cuatro

posibilidades: capitalize que convierte en mayúscula la primera letra de
cada palabra del texto, como puedes ver en el ejemplo, donde el texto
 original no es así. uppercase para convertir todas las letras a mayúsculas y
lowercase para lo contrario, es decir, convertir todas las letras a minúsculas.
El valor por defecto es none, que como ya habrás supuesto, deja el texto tal
como está escrito.

text-align:left; Alinea el texto según convenga. Con left a la izquierda

(por defecto), right a la derecha, center centrado, y justify justificado, es
decir, igualando todas las líneas en longitud a izquierda o derecha.

text-indent:30px Produce que la primera línea del párrafo se escriba

adentrada (indentada) un cierto espacio hacia la derecha o hacia la izquierda,
dependiendo de la alineación activa.

Este sería un resumen sobre la declaración font:

Bordes de un bloque

Con css se pueden definir los bordes de un bloque, que por defecto son invisibles. Por tanto, lo
primero que hay que definir es el estilo del borde. Además del estilo, se puede definir su color y
grosor, y todo ello puede hacerse globalmente, sobre los cuatro lados del bloque, o cada uno por
separado. Las unidades de medida y los nombres o códigos de colores que pueden utilizarse, son
los mismos que ya se han visto anteriormente para los textos. Para definir el grosor de los bordes
tenemos:

 border-left-width:unidad borde izquierdo

 border-right-width:unidad borde derecho
 border-top-width:unidad borde superior
 border-bottom-width:unidad borde inferior
 border-width:unidad los cuatros bordes

Donde unidad es una de las ya conocidas, por ejemplo 1px. También pueden utilizarse constantes
tales como thin para fino (2px), medium para medio (4px), y thick para grueso (6px).
 Ningun estilo de bordes (excepto solid) se lleva bien con el parámetro de
grosor, que implícitamente establece su dimensionado más conveniente.
Tenemos:

 border-left-style:estilo borde izquierdo

 border-right-style:estilo borde derecho
 border-top-style:estilo borde superior
 border-bottom-style:estilo borde inferior
 border-style:estilo los cuatros bordes

Donde estilo puede ser:

 none (por defecto)

 solid
 double
 ridge
 groove
 inset
 outset
 dotted
 dashed

Por último, los parámetros de color de los bordes:

 border-left-color:color borde izquierdo

 border-right-color:color borde derecho
 border-top-color:color borde superior
 border-bottom-color:color borde inferior
 border-color:color los cuatros bordes

Donde color puede ser un nombre de color, en inglés, o su código RGB en hexadecimal, como ya
sabes.

Las combinaciones de todos estos parámetros son infinitas, y lo mejor es ir

haciendo pruebas. Recuerda que cada nevegador interpreta todo esto a su
manera, y algunos no lo interpretan en absoluto. He aquí aplicado al
ejemplo anterior sobre texto:

Si escribimos la siguiente hoja de estilo estilo.css:

BODY {color:green }

P {color:red;
font-size:20px;
font-family:Courier;
font-weight:bold;
font-style:italic;
line-height:30px;
 letter-spacing:5px;
text-decoration:underline;
text-transform:capitalize;
text-align:left;
text-indent:30px;

border-width:2px;
border-color:blue;
border-style:solid;
}
Se obtiene:

Texto fuera de párrafo. Segunda línea fuera de párrafo.

Márgenes de los bloques

Los bloques, por defecto, se escriben en la ventana activa comenzando en el ángulo superior
izquierdo de la misma, y su contenido, en el interior del bloque, comienza en el mismo sitio. Esto
es posible modificarlo:

Para los márgenes del bloque respecto a la ventana activa:

 margin-left:unidad margen izquierdo

 margin-right:unidad margen derecho
 margin-top:unidad margen superior
 margin-bottom:unidad margen inferior
 margin:unidad los cuatros márgenes

Donde unidad es una de las ya conocidas.

Para los márgenes dentro del bloque, es decir, respecto al borde del bloque:

 padding-left:unidad margen interno izquierdo

  padding-right:unidad margen interno derecho
 padding-top:unidad margen interno superior
 padding-bottom:unidad margen interno inferior
 padding:unidad los cuatros márgenes internos

En resumen:

margin padding
margin-left padding-left
Declaración margin-right padding-right
margin-top padding-top
margin-bottom padding-bottom
Valor por
0 0
defecto
Valores posibles Longitud, porcentaje, auto Longitud, porcentaje
Valor Se calcula respecto al ancho del Se calcula respecto al ancho del
porcentual padre padre
Se aplica a Todos Todos
Se hereda? No No

Existe otra propiedad que consigue efectos muy parecidos a los vistos en los
bordes: outline que sirve para crear contornos alrededor de los objetos, tales
como botones, campos activos de los formularios, etc., a fin de resaltarlos,
pero no se trata de bordes, sino de contornos, es decir, están ligeramente
más hacia adentro, y por tanto no ocupan lugar extra en la página. La mala
noticia es que no funciona en todos los navegadores.

Dimensiones de los bloques

Como ya se ha dicho más arriba, por defecto, y en función de su contenido, el bloque ocupará
todo el ancho de la ventana y el alto que precise. Al componer la página puede que esto no
interese y se quiera limitar el espacio ocupado por el bloque. Para ello disponemos de dos
declaraciones básicas para indicar el ancho y el alto exactos que se desea, así como otras para
definir el mínimo y máximo tamaño que deben alcanzar:

Declaración width min-width max-width height min-height max-height

 Valor por
auto Incierto none auto 0 none
defecto

Longitud, Longitud,
Longitud, Longitud, Longitud, Longitud,
Valores porcentaje, porcentaje,
porcentaje, porcentaje, porcentaje, porcentaje,
posibles none, none,
auto, inherit inherit auto, inherit inherit
inherit inherit

Se calcula Se calcula Se calcula Se calcula Se calcula Se calcula

Valor respecto al respecto al respecto al respecto al respecto al respecto al
porcentual ancho del ancho del ancho del alto del alto del alto del
padre padre padre padre o auto padre padre

Se aplica a Todos Todos Todos Todos Todos Todos

Se hereda? No No No No No No

Desafortunadamente, cada navegador interpreta las cosas de una forma, y es

necesario probar con cuantos se posible. Sea, por ejemplo, la siguiente hoja
de estilo estilo.css:

P {color:red;
font-size:20px;
font-family:Courier;
border:2px;
border-color:blue;
border-style:solid;

width:100px;
height:100px;
}
Y este texto:

<P>Esto es un ejemplo de bloque de reducidas dimensiones que ocupa

solamente 100 x 100 pixels</P>

Dependiendo del navegador utilizado, esta sintaxis provocará varios

resultados:

Internet Explorer Opera Netscape/Mocilla

 Como puedes ver, los tres navegadores dan preferencia al texto, y luego...
hacen lo que pueden. Es evidente que la instrucción que se les ha dado no es
muy coherente, y para intentar solucionar el fiasco, se puede recurrir a un
nuevo atributo: overflow que tiene cuatro parámetros:

 visible Indica que el contenido no será recortado a los límites del bloque, es decir, que
puede ser presentado fuera de la caja de bloque ignorando sus límites. Este valor provoca
el mismo comportamiento del navegador que si no se utiliza el atributo overflow
 hidden Lo contrario del anterior. El contenido que no quepa dentro de los límites del
bloque será recortado y no será visible ni accesible.
 scroll Mantiene las dimensiones definidas para el bloque, y provee de barras de escroll
horizontal y vertical para todo el contenido que exceda los límites del bloque.
 auto Parecido al anterior. En lugar de crear barras de scroll tanto vertical como horizontal,
incluso aunque alguna de ellas no sea necesaria, decide automáticamente cuales son
precisas.

Veamos un ejemplo utilizando scroll:

P {color:red;
font-size:20px;
font-family:Courier;
border:2px;
border-color:blue;
border-style:solid;

width:100px;
height:100px;

overflow: scroll
}

Se obtiene:
 Esto es un ejemplo de bloque de
reducidas dimensiones que ocupa
solamente 100 x 100 pixels

Si se utiliza el parámetro hidden puede ocurrir que interese recortar una parte del bloque en lugar
de utilizar toda el área resultante. No necesariamente el área a recortar debe provenir de hidden,
puede ser un bloque cualquiera, con overflow o no. Para hacer un recorte de un bloque se utiliza
la propiedad clip: Por ejemplo:

clip: rect(0,100px,100px,0);

El parámetro rect indica la forma geométrica que se va a recortar. Actualmente sólo está
disponible el rectángulo. El resto del parámetro son dos ejes de coordenadas: 0,100px,100px,0
que corresponden con los vértices superior derecho e inferior izquierdo respectivamente.

Color o gráficos de fondo del bloque

Veamos por último cómo cambiar el color de fondo de los bloques. Sea, por ejemplo: estilo.css:
P {color:red;
font-size:10px;
font-family:Courier;
border:2px;
border-color:blue;
border-style:solid;
width:200px;
height:100px;

background: yellow;
}

Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 200 x

100 pixels con fondo de color.

Como es habitual en HTML, los colores pueden definirse con su nombre en inglés o con la notación
RGB en hexadecimal. En este caso, el color amarillo del ejemplo puede obtenerse también con
background: #FFFF00;

Si en lugar de un color le quieres poner un gráfico la sintaxis será:

background-image: url(../imgenes/fondo.gif);

Esta opción tiene tres parámetros:

 repeat no-repeat repeat-y repeat-x repeat (por defecto) hace que la imagen se
repita tanto en horizontal como en vertical por todo el bloque. Dependiendo del tamaño
 del gráfico se puede conseguir un efecto mosaico o una sola imagen estática. Para que
solamente se repita en horizontal se utiliza repeat-x, y para que lo haga en vertical repeat-
y.
 attachment: fixed attachment: scroll , el valor fixed sirve para que la imagen se quede
fija al hacer scroll con el texto, con lo que parece que el texto "flota" sobre la imagen. Para
que la imagen acompañe al texto en su desplazamiento se utilizará scroll (por defecto).
 position Indica la posición del gráfico dentro del bloque. Si no se indica otra cosa, por
defecto éste será colocado en el ángulo superior izquierdo del bloque. Para variar su
posición se pueden escribir las coordenadas deseadas de la esquina superior izquierda del
gráfico en píxels o en tantos por ciento respecto al total del bloque.

Estos tres parámetros adicionales (si se utilizan) hay que escribirlos después de haber indicado la
imagen a emplear como fondo. Por ejemplo:
P {color:red;
font-size:10px;
font-family:Courier;
border:2px;
border-color:blue;
border-style:solid;
width:200px;
height:100px;

background-image: url(fondo.jpg);
background-attachment: fixed;
background-repeat: repeat;
}

Esto es un ejemplo de bloque de reducidas dimensiones que ocupa solamente 200 x

100 pixels con fondo gráfico.

Gráficos y bloques flotantes

Dentro de un bloque, además de texto, pueden ir gráficos u otros bloques. Para conseguir que
estos objetos se alineen respecto al texto que ya exista en el bloque, o para que se alineen varios
bloques entre sí, se utiliza la instrucción float que puede tener tres parámetros: left right none
(por defecto). Por ejemplo:

p {color:red;
font-size:10px;
font-family:Verdana;
border:2px;
border-color:blue;
border-style:solid;
width:200px;
height:100px;
}

img {float: right;}

Se obtiene:
 texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto

Y por supuesto, además de posicionarlos en el bloque, los gráficos se pueden redimensionar y

darles los atributos que sean necesarios para la mejor composición. Por ejemplo:

img {float: right;

width:60px;
height:60px;
padding: 2px;}

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto

Después de haber utilizado una instrucción float en un bloque, para cerrar su efecto sobre la
alineación de los objetos hay que escribir otra en el siguiente bloque: clear que también tiene un
parámetro con tres posibles valores: left right both Evidentemente, habrá que utilizar left o
right según se haya definido el float anterior, y si se han incluido los dos, se utilizará both (ambos).

Recuerda que las instrucciones de posicionamiento y dimensionado cada

navegador las interpreta a su manera, y como siempre, se deberán probar
con los navegadores más habituales hasta dar con los parámetros que mejor
funcionen en todos ellos (y esto puede llevar su tiempo...).

Posición y visibilidad de los bloques

Cuando un navegador carga una página, generalmente, interpretará el código HTML siguiendo el
mismo orden en que fue escrito. A este orden natural de aparición de los elementos se le llama
flujo. Viene a ser como ir apilando un elemento encima de otro al tiempo que se asigna un
número de índice a cada uno, de forma que el que tenga el número más alto aparecerá más cerca
del espectador. Es posible alterar el flujo de una página, es decir, que un elemento aparezca
delante de otro que fue escrito después. Para ello simplemente hay que cambiarle el número que
tiene en la pila con la propiedad z-index = n, donde n es un número entero positivo o negativo.

Cuando se altera el orden de la pila, los elementos hijos del elemento

reasignado heredarán el mismo nuevo número de índice de su padre en la
pila. Por ejemplo:

Sea una página que contiene dos elementos A y B. A con z-index = 4 y B

con z-index = 3, A será procesado por encima de B. Supongamos que A
tiene un descendiente C con z-index = 1. El elemento C también será
 procesado por encima de B aunque B tenga z-index = 3. Todos los
elementos descendientes de A se situarán por encima de B y por encima de
todos los descendientes de B.

La propiedad z-index solamente funciona si los elementos han sido

previamente colocados utilizando una instrucción de tipo de
posicionamiento: position: valor;

Declaración position

Valor por defecto static

static
relative
Valores posibles absolute
fixed
inherit

Valor porcentual No aplicable

Se aplica a Todos

Se hereda?: No

Si se utiliza static, como su nombre indica, no se puede modificar la

posición natural de los elementos. Si se quiere mover un elemento de su
posición natural hay que utilizar los valores relative o absolute.

En este ejemplo de posicionamiento relativo, al segundo elemento se le

aplica un desplazamiento de 5 px por arriba y por la izquierda, lo que da por
resultado que invada parte del espacio del elemento 3 y se salga del
contenedor por la derecha, es decir, que los posicionamientos relativos de un
elemento solamente afectan a ese elemento, mientras que el resto continua
manteniendo sus posiciones normales en el flujo.

BLOQUE 1

BLOQUE 2

BLOQUE 3

Este es el código necesario:

<div style="position: relative; border: 2px solid red; width:

200px;">
<div style="background: #0000ff; color: white;"> BLOQUE
1</div>
 <div style="position: relative; top: 5px; left: 5px;
background: #00a0a0; color: white;">BLOQUE 2</div>
<div style="background: #ffc0c0; color: white;">BLOQUE
3</div>
</div>
Y puede que te preguntes de dónde han salido las instrucciones top y left. Pues son dos de las
cuatro direcciones en que se pueden mover los bloques, y junto con bottom y rigth nos permitirán
indicar la dirección de los movimientos tanto absolutos como relativos. Fíjate en que estas cuatro
instrucciones no indican en qué dirección se moverá el elemento, sino el espacio que se dejará
libre antes de procesar el elemento.

Veamos ahora qué ocurre si el desplazamiento indicado es absolute:

BLOQUE 1

BLOQUE 2

BLOQUE 3

Como puedes ver, en este caso el espacio abandonado por el elemento 2 no

queda libre, y ha sido optimizado por el bloque contenedor,
superponiéndose el bloque 2 sobre el 1 y el 3. El bloque 2, además, ha
perdido la longitud que heredaba del bloque contenedor, y que si se quiere
mantener, será necesario forzar la herencia con width: inherit;

Este es el código:

<div style="position: relative; border: 2px solid red; width:

200px;">
<div style="background: #0000ff; color: white;"> BLOQUE
1</div>
<div style="position: absolute; top: 10px; left: 85px;
width: inherit;
background: #00a0a0; color: white;">BLOQUE 2 </div>
<div style="background: #ffc0c0; color: white;">BLOQUE
3</div>
</div>

Veamos ahora otra propiedad muy interesante de los bloques que permite
que sean visibles o no: se trata de display: valor; donde valor puede ser,
entre otros:

Declaración display

Valor por defecto inline

Valores posibles inline

none
 inherit
block

Valor porcentual No aplicable

Se aplica a Todos

Se hereda?: No

Al aplicar el valor none se consigue la desaparición del bloque, incluido su

espacio en la página. Los elementos descendientes tampoco serán visibles ni
ocuparán espacio, es decir, no se trata de bloques invisibles, sino
inexistentes a todos los efectos. Esa es la diferencia con las propiedades
sobre visibilidad, que se describen a continuación, que provocan que un
elemento pueda ser invisible pero siga ocupando un espacio en la página.

La siguiente propiedad, visibility: valor como su nombre indica, permite

controlar la visibilidad de un bloque, pero siempre conservando en la página
su espacio físico inicial. En realidad se hace transparente, lo que permite
utilizarlo para ocultar o destapar otros bloques.

Declaración visibility

Valor por defecto visible

visible
hidden
Valores posibles
inherit
collapse

Valor porcentual No aplicable

Se aplica a Bloques

Se hereda?: No

CSS + JavaScript

La combinación de CSS y JavaScript es una poderosa herramienta para que las páginas resulten
mucho más dinámicas.
 En este ejemplo se consigue que un bloque sea sustituido por otro al pulsar
el botón de un formulario. Pude hacerse con un link, o con cualquier otro
elemento. Solamente hay que capturar el evento correspondiente.

BLOQUE 1

BLOQUE 2

BLOQUE 3

En este otro ejemplo se elimina un bloque de la página al pulsar sobre un

párrafo, aunque podría ser cualquier otro elemento. Aunque lo parezca, no
es igual que el anterior, ya que aquí el espacio del bloque desaparecido es
recuperado.

Pulsar aquí para ocultar o mostrar el párrafo siguiente.

Este bloque aparece y desaparece de la página.

Este es un ejemplo de la capacidad de CSS + JavaScript para ocultar

bloques.

Veamos el código JavaScript necesario:

function Alternar(Seccion){
if
(Seccion.style.display=="none"){Seccion.style.display=""}
else{Seccion.style.display="none"}
}
Aquí está el código HTML:
<p style="cursor:s-resize" onClick="Alternar(seccion1)">
Pulsar aquí para ocultar o mostrar el párrafo siguiente.
</p>

<div id="seccion1" style="background: #ffc0c0; color: white;

display: block">
Este bloque aparece y desaparece de la página.
</div>
Y aquí la hoja de estilo.
ParentDiv01 .ChildDivOrig {display: block;}
.ParentDiv01 .ChildDivNew {display: none;}
.ParentDiv02 .ChildDivOrig {display: none;}
.ParentDiv02 .ChildDivNew {display: block;}

Estilo de las listas

Es posible definir el tipo de las listas con CSS. Por ejemplo:

 ul {list-style-type:square;}
ol {list-style-type:upper-roman;}
El parámetro list-style-type puede tener, entre otros, los siguientes valores:

 disc (por defecto)

 none
 circle
 square
 decimal
 upper-roman
 lower-roman
 upper-alpha
 lower-alpha

Como puedes ver, aunque denominados de otra forma, coinciden con los definidos en la sección
de las listas vistas en HTML.

Estilos en los links

Hay un elemento HTML que genera un estilo propio por defecto: <A>. Como ya sabes, los enlaces
aparecen por defecto de otro color y subrayados, y cambian de color según hayan sido visitados o
no. Estos efectos de estilo no definidos por el usuario se llaman pseudoclases. Hay dos posibles
modificaciones de estilo para este elemento; el color del enlace en sus distintos estados y si
aparece subrayado o no. Teóricamente no debiera influir el orden en que se escriban los distintos
estados en la CSS, pero es mejor escribir las declaraciones en el siguiente orden (por supuesto, los
colores son libres):

a {text-decoration: none;}

a:link {color: #FF0000;}

a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}
Donde link indica que el enlace no ha sido visitado, visited que el enlace ha sido visitado, active
que el enlace está siendo pulsado, y hover que el ratón está pasando sobre él (sin pulsar).

Estilos en los formularios

Todo lo visto sobre los estilos, también es aplicable a los elementos de un formulario, bien desde
las hojas CSS o en el código HTML del propio formulario. Por ejemplo el formulario:

Se escribe así:
 <FORM METHOD="GET" ACTION="">

<INPUT TYPE="text" STYLE="background:yellow;color:red"

NAME="campo1"
VALUE="Borde simple">

<INPUT TYPE="text"
STYLE="border:double;background:yellow;color:blue"
NAME="campo2"
VALUE="Borde doble">

<INPUT TYPE="text"
STYLE="border:0;background:yellow;color:blue" readonly
NAME="campo3"
VALUE="Solo lectura sin borde">

<INPUT TYPE="button"
STYLE="background:transparent;color:red"
VALUE="Botón transparente">

</FORM>
Este formulario tiene las instrucciones de estilo embebidas en el código html. Su equivalente
utilizando hoja css sería:
<FORM METHOD="GET" ACTION="">

<INPUT CLASS="controles1" TYPE="text" NAME="campo1"

VALUE="Borde simple" >

<INPUT CLASS="controles2" TYPE="text"

NAME="campo2"VALUE="Borde doble">

<INPUT CLASS="controles3" TYPE="text" readonly NAME="campo3"

VALUE="Solo lectura sin borde">

<INPUT CLASS="botones" TYPE="button" VALUE="Botón

transparente">

</FORM>
Y esta sería la hoja de estilo correspondiente:
/* Hoja de estilo del formulario */
.controles1 {background:yellow;color:red;}
.controles2 {border:double;background:yellow;color:blue}
.controles3 {border:0;background:yellow;color:blue}
.botones {background:transparent;color:red}
En los formularios se puede cambiar el estilo de los bordes de los controles, pero no el grosor
como se hace en los bloques de texto. Un formulario se puede considerar un bloque, por lo que
también es posible cambiar el color del fondo, definir bordes, etc. Por supuesto, todo esto
también es aplicable a las tablas, imágenes y al resto de elementos html.

Efectos especiales con el texto

Algunas veces habrás visto páginas con textos que parecen gráficos. Algunos tipos, en efecto,
solamente se pueden conseguir con editores gráficos, pero algunas veces son simples efectos de
estilo. Veamos un ejemplo:
all.texto {
margin-top:-24px;
color:yellow;
font-size:20px;
font-family:Verdana;
}
all.sombra {
margin-top:2px;
margin-left:2px;
color:black;
font-size:20px;
font-family:Verdana;
}

<DIV ALIGN="CENTER" CLASS="sombra">Prueba de texto

sombreado</DIV>
<DIV ALIGN="CENTER" CLASS="texto">Prueba de texto
sombreado</DIV>
Se obtiene:

Prueba de texto sombreado

Prueba de texto sombreado
Y si en lugar de escribir una hoja css prefieres hacerlo con estilo embebido
en el HTML, este es el código:

< DIV ALIGN="CENTER" STYLE="margin-top:2px; margin-left:2px;

color:black;
font-size:20px; font-family:Verdana;">Prueba de texto
sombreado</DIV>

< DIV ALIGN="CENTER" STYLE="margin-top:-24px; color:yellow;

font-size:20px;
font-family:Verdana;">Prueba de texto sombreado</DIV>

Tablas

Las tablas generadas con HTML tienen un serio problema de estética. En efecto, si los bordes son
visibles, su estilo es bastante tosco y pueden arruinar cualquier diseño. Existen instrucciones en
CSS para conseguir que las tablas tengan bastante mejor aspecto. Se puede modificar cualquiera
de sus componentes: bordes de la tabla, bordes de las celdas, fondo, título, alineación, etc.
 empty- border- border- table- white-
Declaración caption
cells collapse spacing layout space

Valor por
top show separate 00 auto normal
defecto

show cualquier normal

Valores top separate auto
hide unidad pre
posibles bottom collapse fixed
inherit de medida nowrap

Valor No No No No
No aplicable No aplicable
porcentual aplicable aplicable aplicable aplicable

Se aplica a table td th Todos Todos table Todos

Se hereda?: No Si Si Si No No

Además de estas declaraciones específicas están disponibles todas las que

afectan a los bordes, tanto de la tabla como de las celdas. Las
combinaciones posibles de todas ellas son tantas, que lo mejor es verlas
sobre la marcha con el magnífico asistente disñado por SONACON. El
código obtenido, como siempre, es conveniente probarlo en los navegadores
más comunes, ya que suele haber notables diferencias de interpretación
entre ellos.
 Propiedades de texto

Propiedad Valor Resultado

Sangria de primera línea en píxels (px), puntos tipográficos

(pt), centímetros (cm), milímetros (mm), pulgadas (in), etc.,
Sangria de 20 píxels
p.e.
text-indent: 20px;
text-indent

Sangria de primera línea en porcentaje relativo al ancho de

página (%), o relativo al tamaño de la fuente (em), p.e. Sangria de 2em
text-indent: 2em;

left (Izquierda, valor por defecto) Texto alineado a la

text-align: left; izquierda

right (Derecha) Texto alineado a la

text-align: right; derecha

center (Centrado) Texto alineado

text-align: center; al centro
text-align
justify (Justificado) Texto justificado a
text-align: justify; izquierda y derecha

10.236
Cadena de texto, sólo para alinear en las celdas de una
tabla, p.e. 2.3
text-align: ".";
120.66

none (Sin efecto)

Sin efecto
text−decoration: none;

underline (Subrayado)
Subrayado
text−decoration: underline;

overline (Super-rayado)
text−decoration Super-rayado
text−decoration: overline;

line-through (Tachado)
Tachado
text−decoration: line-through;

blink (Parpadeo)
Parpadeo
text−decoration: blink;

Especifica uno o varios efectos de sombra separados por

text-shadow comas. Cada efecto lo compone: un color (opcional), Sombreado
distancia a la izquierda, distancia hacia abajo y desenfoque
 (opcional). p.e.
text-shadow: 3px 3px 5px red, 1px 1px

normal (Espaciado entre caracteres normal)

Espaciado
letter-spacing: normal;

Espaciado entre caracteres en píxels (px), puntos

letter-spacing
tipográficos (pt), centímetros (cm), milímetros (mm),
pulgadas (in), etc., o relativo al tamaño de la fuente (em), Espaciado
p.e.
letter-spacing: .3em;

word-spacing

normal (Espaciado entre palabras normal)

Entre palabras
word-spacing: normal;

word-spacing Espaciado entre palabras en píxels (px), puntos tipográficos

(pt), centímetros (cm), milímetros (mm), pulgadas (in), etc.,
Entre palabras
o relativo al tamaño de la fuente (em), p.e.
word-spacing: 1em;

none (Sin efecto)

Texto de ejemplo
text-transform: none;

capitalize (Primer carácter de cada palabra en

mayúscula) Texto de ejemplo
text-transform: capitalize;
text-transform

uppercase (Todo en mayúsculas)

TEXTO DE EJEMPLO
text-transform: uppercase;

lowercase (Todo en minúsculas)

Texto de ejemplo
text-transform: lowercase;

normal (El comportamiento normal de los espacios en

html) Texto de ejemplo
white-space: normal;

white-space pre (Los espacios aparecen tal como los escribimos)

Texto de ejemplo
white-space: pre;

nowrap (No separa líneas aunque haya espacios)

Texto de ejemplo
white-space: nowrap;
Unidad 17. Estilos CSS Avanzados (VII)

17.7. Controles de fuente

Ya hemos visto cómo manejarnos con los selectores, ahora veremos cómo
deberemos crear las definiciones de los estilos.

Empezaremos viendo los controles de modificación de fuentes:

font-family: indica la familia de fuente en la que se mostrará el texto, puede

tomar los valores serif, sans-serif, cursive, fantasy y monospace:

serif, sans-serif, fantasy, cursive,

monospace...
Aunque esta propiedad también soporta que nombres un listado de diferentes
fuentes. El navegador las buscará de izquierda a derecha en el equipo del usuario,
y mostrará la primera que encuentre. Al final, es recomendable indicar una de las
fuentes del ejemplo de arriba, que son las fuentes genéricas (familias).

p { font-family: Arial, Helvetica, sans-serif; }

Si el nombre de la fuente contiene espacios, lo pondremos entre comillas dobles (p.

ej. "Times New Roman")

font-style: indica el estilo de la fuente (básicamente, nos permite ponerla en

cursiva), puede tomar los valores italic y oblique.

italic, oblique, oblique

Algunas fuentes están hechas especialmente para tener una variante en italic
(cursiva), para aquellas que no lo tengan implementado utiliza el atributo oblique
que hace que el navegador incline automáticamente la fuente para mostrarla en
cursiva. La mayoría de navegadores no distinguen entre estos valores, y aplican
siempre oblique, por lo que éste es la valor más recomendado. Para mostrar el
texto normal, le damos el valor normal.

font-variant: establece la variante de la fuente. Puede tomar el valor small-caps

(versales). Esto muestra las minúsculas como mayúsculas de menor tamaño. El
valor normal hará que se muestre el estado por defecto de la fuente.

SMALL-CAPS, Normal
Observa que Dreamweaver no muestra correctamente este estilo.

font-weight: indica el peso de la fuente, es decir, nos sirve para ponerla en

negrita. Los valores más utilizados son: bolder, bold y lighter. También puedes
utilizar valores del 100 al 900, siendo el primero la fuente más ligera y el último el
más pesado.

bolder, bold, lighter

Aunque en teoría podemos indicar distintos grosores, en la práctica la mayoría de
navegadores solo aplican normal y bold.

font-size: establece el tamaño de la fuente. Puedes utilizar lo valores

predefinidos smaller, larger, xx-small, x-small, small, medium, large, x-large y
xx-large. Los dos primeros valores establecen el tamaño de la fuente en
comparación a la definida en el elemento padre donde se encuentra, así se mostrará
más pequeña (smaller) o más grande (larger).

xx-small, x-small, small, medium, large, x-large, xx-

large
También es posible establecer el tamaño del texto utilizando porcentajes (%) o em.
Que también mostrará el texto en relación a su elemento padre (100% = 1em).

Éste es el tipo más recomendado. Ya que con sólo cambiar el tamaño de la fuente
base, todos los elementos se ajustarán a ésta manteniendo la proporción.

Existen otras unidades relativas puntos (pt), píxeles (px)... El sistema de puntos
(pt) varía un poco según los sistemas operativos, mientras que el valor en píxeles
(px) depende de la resolución de pantalla.

Incluso podemos emplear valores concretos, como centímetros (cm).

a { font-size: 12em; }
p { font-size: 14px; }
.nota { font-size: 0.90%; }

Es posible definir todos estos estilos que hemos visto en una sola definición. Para
ello utilizaremos sólo la propiedad font:.
Así, una retahíla de reglas como ésta:

p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: large;
font-family: monospace;
}

Puede escribirse como:

p { font: italic small-caps bold large monospace; }

Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y
family.

Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:

p { font: bold sans-serif; }

Unidad 17. Estilos CSS Avanzados (VIII)

17.8. Espaciado y alineación

Continuando con los controles de texto tenemos la propiedad word-spacing que

establece la separación entre las palabras de un texto.

Este texto tiene una separación de 18 píxeles entre sus palabras.

Este, sin embargo, tiene una separación de -5 píxeles.

También podemos utilizar la propiedad letter-spacing para establecer la

separación entre los caracteres del texto:

Este texto tiene una separación de 5 píxeles

entre sus palabras.

Este,sinembargo,tieneunaseparaciónde-2píxeles.

vertical-align establece la alineación vertical del texto. Puede tomar los valores
baseline, sub, super, top, text-top, middle, bottom, text-bottom.

baseline, sub, super, top, text-top, middle, bottom, text-bottom

Observa como los valores sub, super, text-bottom y text-top toman como
referencia el tamaño del texto, mientras que top, middle y bottom toman como
referencia el alto del párrafo completo.

Estas propiedades se suelen aplicar a las imágenes para alinearlas con respecto al
texto:

baseline sub super top

text-top middle bottom

text-bottom

Esta propiedad no nos sirve para centrar verticalmente el contenido de un elemento.

line-height indica el alto de línea del texto, igual que el resto de propiedades
puedes establecer esta altura en píxeles, ems, puntos u otras unidades.
Este texto tiene un alto de línea de 30 píxeles. Puedes ver que la separación entres estas líneas es

mayor que la definida por defecto.

Este texto tiene un alto de línea de 10 píxeles. Puedes ver que la separación entres estas líneas es
menor que la definida por defecto.

Si estableces simplemente valores numéricos podrás indicar el alto respecto a su

tamaño normal. Por ejemplo:

p { line-height: 2; }

Esta línea muestra el texto con un interlineado doble. Si hubiésemos escrito 1.5 el
interlineado sería un 50% más alto de lo normal.

Esta propiedad siempre la tenemos que asignar al elemento de bloque que contiene
el texto.

Truco: Si tienes un elemento de alto específico, puedes centrar el texto

verticalmente dándole al elemento un line-height igual que el alto. Esto sólo tiene
sentido si tenemos una única línea de texto.

text-align establece la alineación horizontal del texto. Sus valores ya te deben

ser familiares: left, right, center y justify.

Este texto está alineado a la izquierda con left.

Este texto está alineado a la derecha con right.

Este texto está alineado al centro con center.

Este texto está justificado (justify), ambos márgenes del texto tocarán los bordes. Si es necesario
estirar las líneas se hará.

Esta propiedad la aplicaremos al elemento de bloque que contendrá el texto.

text-indent indica el tamaño de sangrado (o sangría) del texto, es decir la

separación de la primera línea con el borde lado izquierdo. Tomará valores en
puntos, píxeles o ems, como prefieras.

Párrafo identado 24px. Primera línea

Segunda línea.

Párrafo identado 48px. Primera línea

Segunda línea.

Párrafo identado 72px. Primera línea

Segunda línea.
Esta propiedad la aplicaremos al elemento de bloque que contendrá el texto.

white-space, esta propiedad es muy útil para evitar que el ancho del navegador
modifique el ancho de las líneas del texto.

Puede tomar el valor nowrap para que el texto se muestre en una sola línea sin
insertar saltos no deseados:

Este texto no tiene saltos de línea, así que se mostrará en toda su anchura
aunque la ventana sea más estrecha.

También puedes establecer esta propiedad al valor pre. En este caso todos los
espacios insertados en el texto se mostrarán y no se convertirán en uno sólo como
ocurre normalmente. Además, si en el código hay saltos de línea, también se
mostrarán:

En este texto podemos introducir tantos espacios como queramos. Da

igual si son más de uno, se mostrarán igualmente.

Este último valor no funciona correctamente en Internet Explorer así que es

recomendable utilizar la entidad HTML (&nsbp;) para mostrar más de un espacio.
Guía del principiante a HTML
CSS aspecto del texto
CSS incluye un montón de comandos de gran alcance para el estilo de texto - de cambiar la
fuente y el color para añadir subraya, puede agregar casi cualquier efecto que se pueda
imaginar a un elemento HTML que incluye el texto. Vamos a correr por todos los comandos
que podemos utilizar y echar un vistazo a qué tipo de efectos que pueden producir.

He dividido arbitrariamente estilo CSS de texto en tres áreas - el aspecto del texto abarca
aspectos tales como cambiar el color de la fuente y la decoración, propiedades de la fuente
se explica cómo cambiar el tipo de letra, tamaño y peso, entre otros, y la colocación del texto
y el espacio abarca cosas como línea y espaciado. Por lo menos sería rozando valor a través
de estas secciones y protección de los ejemplos, sólo para tener una idea de lo que hace cada
comando.

Color del texto

Permite establecer la fuente color , mediante la especificación de un nombre de color, el
valor RGB o el código hexadecimal:

p { color: blue }

p { color: rgb(0,0,255) }

p { color: #0000FF }

text-decoration

El CSS text-decoration propiedad puede ser utilizada para aplicar distintos efectos al
texto. Es el más comúnmente utilizado para subrayado o un tachado de texto ( underline ,
line-through ), pero también se puede utilizar para agregar una línea por encima del texto (
overline ) o para hacer el flash de texto ( blink ). También puede especificar un text-
decoration valor de none , lo cual es particularmente útil para eliminar subraya de enlaces
HTML, como veremos un poco más tarde.

El uso es como sigue:

 p { text-decoration: underline }

text-transform

El CSS text-transform propiedad se puede utilizar para cambiar el caso de nuestro texto.
Los valores pueden ser capitalize , uppercase , lowercase o none .

p { text-transform: uppercase }

Tenga en cuenta que capitalize y uppercase no son la misma cosa - capitalize hace
sólo la primera letra de cada palabra en mayúscula, mientras que uppercase que hace todas
las letras mayúsculas.
 Propiedades de cajas
Para entender las propiedades de cajas es necesario entender el siguiente esquema:

Propiedades de márgenes

Propiedad Valor Resultado

margin-top Margen exterior en píxels (px), puntos tipográficos (pt),

margin-right centímetros (cm), milímetros (mm), pulgadas (in), etc., o
Texto de ejemplo
margin-bottom relativo al tamaño de la fuente (em), p.e.
margin-left margin-left: 10px;

Engloba las anteriores:

 1 valor: todos los márgens iguales

 2 valores: Superior-inferior e izquierda-derecha
margin Texto de ejemplo
respectivamente
 4 valores: Superior, derecho, inferior e
izquierdo, respectivamente

p.e. margin: 10 px;

Propiedades de relleno

Propiedad Valor Resultado

padding-top Margen interior en píxels (px), puntos tipográficos (pt), Texto de ejemplo
padding-right centímetros (cm), milímetros (mm), pulgadas (in), etc., o
padding−bottom relativo al tamaño de la fuente (em), p.e.
padding-left padding-left: 10px;

Engloba las anteriores:

 1 valor: todos los márgenes iguales

 2 valores: Superior-inferior e izquierda-derecha
padding Texto de ejemplo
respectivamente
 4 valores: Superior, derecho, inferior e
izquierdo, respectivamente

p.e. padding: 10 px;

Propiedades del borde

Propiedad Valor Resultado

Borde en píxels (px), puntos tipográficos (pt),

centímetros (cm), milímetros (mm), pulgadas (in), etc., o
Texto de ejemplo
relativo al tamaño de la fuente (em), p.e.
border-top-width: 3px;
border-top-width
thin (borde fino)
border-right-width Texto de ejemplo
border-top-width: thin;
border−bottom−width
border-left-width
medium (borde mediano)
Texto de ejemplo
border-top-width: medium;

thick (borde grueso)

Texto de ejemplo
border-top-width: thick;

Engloba las anteriores:

 1 valor: todos los bordes iguales

 2 valores: Superior-inferior e izquierda-derecha
border-width Texto de ejemplo
respectivamente
 4 valores: Superior, derecho, inferior e
izquierdo, respectivamente

p.e. border-width: 3px;

border-top-color
border-right-color Color del borde (ver colores y fondos), p.e.
Texto de ejemplo
border-bottom-color border-top-color: blue;
border-left-color

Engloba las anteriores:

border-color Texto de ejemplo

 1 valor: todos los bordes iguales
 2 valores: Superior-inferior e izquierda-derecha
respectivamente
  4 valores: Superior, derecho, inferior e
izquierdo, respectivamente

p.e. border-color: blue;

none (sin borde, valor por defecto)
Texto de ejemplo
border-top-style: thin;

hidden (igual que none)

Texto de ejemplo
border-top-style: hidden;

dotted (serie de puntos)

Texto de ejemplo
border-top-style: dotted;

dashed (serie de pequeños trazos)

Texto de ejemplo
border-top-style: dashed;

solid (borde sólido)

Texto de ejemplo
border-top-style border-top-style: solid;
border-right-style
border-bottom-style double (dos líneas)
Texto de ejemplo
border-left-style border-top-style: double;

groove (como si estuviese tallado en el lienzo)

Texto de ejemplo
border-style: groove;

ridge (como si estuviera sobresaliendo del lienzo)

Texto de ejemplo
border-style: ridge;

inset (como si la caja estuviese empotrada en el

lienzo) Texto de ejemplo
border-style: inset;

outset (como si la caja sobresaliera del lienzo)

Texto de ejemplo
border-style: outset;

Engloba las anteriores:

 1 valor: todos los bordes iguales

 2 valores: Superior-inferior e izquierda-derecha
border-style Texto de ejemplo
respectivamente
 4 valores: Superior, derecho, inferior e
izquierdo, respectivamente

p.e. border-style: double dotted;

border-top
Engloba las propiedades anteriores para cada borde
border-bottom
indicando ancho, estilo y color, p.e. Texto de ejemplo
border-right
border-top: 8px double blue;
border-left
 Engloba todas las propiedades para los bordes indicando
border ancho, estilo y color, p.e. Texto de ejemplo
border: 8px inset red;

Propiedades del tamaño de la caja

Propiedad Valor Resultado

Ancho de la caja en píxels (px), puntos tipográficos (pt),

centímetros (cm), milímetros (mm), pulgadas (in), etc., Caja de 50 píxels de
p.e. ancho
width width: 50px;

Ancho de la caja en porcentaje, p.e. Caja de 50% de

width: 50%; ancho

min-width Establece las anchuras mínima y máxima posibles.

max-width Funciona igual que la propiedad anterior.

Altura de la caja en píxels (px), puntos tipográficos (pt),

centímetros (cm), milímetros (mm), pulgadas (in), etc.,
Caja
p.e.
height height: 30px;

Altura de la caja en porcentaje, p.e.

Caja
height: 50%;

min-height Establece las alturas mínima y máxima posibles.

max-height Funciona igual que la propiedad anterior.

Propiedades de línea

Propiedad Valor Resultado

Texto de ejemplo
normal, espaciado interlineal normal
con espaciado
line-height: normal;
interlineal normal

Espaciado entre líneas en píxels (px), puntos tipográficos

Texto de ejemplo
(pt), centímetros (cm), milímetros (mm), pulgadas (in),
con espaciado
etc., o relativo al tamaño de la fuente (em), p.e.
line-height interlineal 12px
line-height: 12px;

Texto de ejemplo
Un número, de modo que el espaciado es este número
con espaciado
multiplicado por el tamaño de la fuente, p.e.
line-height: 2;
interlineal 2
 Texto de ejemplo
Un porcentaje, de modo que el espaciado es este
porcentaje del tamaño de la fuente, p.e. con espaciado
line-height: 150%; interlineal 150%

baseline, alineación vertical en la línea base

vertical-align: baseline; texto

middle, alineación vertical centrada

vertical-align: middle; texto

sub, subíndice
vertical-align: sub; texto

super, super-índice
vertical-align: super; texto

top, superior
vertical-align: top; texto

vertical-align bottom, inferior

vertical-align: bottom; texto

text-top, superior
vertical-align: text-top; texto

text-bottom, inferior
vertical-align: text-bottom; texto

Un porcentaje a partir de la línea base

vertical-align: 100%; texto

Una medida en píxels (px), puntos tipográficos (pt),

centímetros (cm), milímetros (mm), pulgadas (in), etc., o
relativo al tamaño de la fuente (em), p.e. texto
vertical-align: -6px;