Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Curso de CSS PDF
Curso de CSS PDF
SolucionJava.com
<CSS>
Ing. Cedric Simon Tel: 2268 0974 Cel: 8888 2387 Email: c e d r i c @ s o l u c i o n j a v a . c o m Web: www.solucionjava.com
Curso de
Cascade Style Sheet
Pagina 2 / 26
ndice de contenido
1. Introduccin al curso..............................................................................................................................3
1.1. Objetivo de este curso...................................................................................................................3
1.2. Manual del alumno.........................................................................................................................3
1.3. Ejercicios prcticos........................................................................................................................3
1.4. Requisitos para atender a este curso.............................................................................................3
1.5. Soporte despus del curso.............................................................................................................3
2. Introduccin...........................................................................................................................................4
3. El tag LINK............................................................................................................................................6
4. Hojas de estilos alternativas..................................................................................................................7
5. La directiva @import..............................................................................................................................8
6. Reglas bsicas......................................................................................................................................9
7. Agrupacin de selectores y declaraciones...........................................................................................10
8. Atributos CLASS y ID...........................................................................................................................12
8.1. CLASS.........................................................................................................................................12
8.2. ID.................................................................................................................................................12
9. Pseudo-Clases y Pseudo-Elementos...................................................................................................13
10. Estructura..........................................................................................................................................14
11. Especificidad......................................................................................................................................15
12. Estilos en cascada.............................................................................................................................16
13. Colores y unidades............................................................................................................................17
13.1. Colores.......................................................................................................................................17
13.2. Unidades....................................................................................................................................17
Medidas absolutas de longitud:......................................................................................................17
Medidas relativas de longitud:........................................................................................................17
14. Indentacin........................................................................................................................................18
15. Margenes...........................................................................................................................................19
15.1. Introduccin...............................................................................................................................19
15.2. Margin........................................................................................................................................19
15.3. Padding......................................................................................................................................20
16. Alineacin..........................................................................................................................................21
17. Espacios en blanco............................................................................................................................22
18. Anchura de lneas..............................................................................................................................23
19. Espacio entre palabras......................................................................................................................24
20. Transformaciones del texto................................................................................................................25
21. Decoracin del texto..........................................................................................................................26
Versin 1.0
Pagina 3 / 26
1. Introduccin al curso
1.1. Objetivo de este curso
En este curso vamos a aprender el uso de hojas de estilo, que nos permitir crear pginas web mas
atractivas.
Versin 1.0
Pagina 4 / 26
2. Introduccin
CSS son las siglas de "Cascade Style Sheet". Se trata de una especificacin sobre los estilos fsicos
aplicables a un documento HTML, y trata de dar la separacin definitiva de la lgica (estructura) y el
fsico (presentacin) del documento.
En este curso veremos algunos conceptos bsicos de cmo aplicar este lenguaje para definir estilos.
En los orgenes de la Web y en sus primeras versiones, HTML era un lenguaje fcil de aprender y muy
reducido en cuanto a sus tags y estructura. Estamos hablando de los aos 1990 al 1993. Todo cambi
cuando empezaron a surgir los primeros navegadores que eran capaces de representar recursos
grficos como aadido a la informacin textual.
As, el nmero de sitios web comenz a crecer y con l, el nmero de tags que la especificacin HTML
contemplaba. El objetivo era construir sitios web cada vez ms atractivos visualmente hablando, con lo
que HTML deba incluir nuevos tags destinados a conseguir diversos efectos visuales.
Con todos estos cambios que la web haba sufrido, nos encontramos con que un lenguaje que en sus
inicios haba sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualizacin"
(HTML 4 es la ms viva representacin de esta realida). Encontramos tags com <B>, <U> o <I> que
definen estilos de visualizacin sin aportar nada a la estructura del documento representados.
Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag
FONT. Con el uso de este tag podemos hacer que una zona que corresponde a la cabecera o ttulo de
una pgina, y que debera expresarse con un H1, pase ahora a estar definida mediante el tag FONT.
Con este cambio se pierder totalmente la estructura del documento.
La realidad ahora es que el mayor nmero de los sites realizados con HTML 4 consiguen que el
volumen de informacin de visualizacin sea muy superior al de la informacin verdaderamente
relevante. Esto parece, cuanto menos precoupante.
Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su
estructura:
1. La indexacin por los buscadores es mucho ms complicada (Google asigna un
peso mucho mayor a una pgina que utliza H1 para definir sus secciones, que a los campos
META del documento).
2.Se reduce la acesibilidad. Actualmente existen aplicaciones que permiten la lectura de pginas
web como ayuda a los discapacitados (persona ciegas o con otras discapacidades). Si una
persona discapacitada intenta acceder a una pgina sin una mnima estructuracin, el resultado
puede ser lamentable.
3.La estructura de la pgina y la informacin contenida en la misma es mucho ms sencilla de
mantener. Actualmente, ciertos aspectos del cdigo HTML pueden hacer que una misma pgina
tenga visualizaciones distintas en distintos navegadores. Estos herrores de diseo son
dificilmente depurables cuando la pgina contiene una estructura de tags complicada y sin
ninguna estructuracin.
Por otra parte, un cambio en un tipo de fuente supone el rediseo de todas las pginas de un site al
tener que sustituir todos los valores para el tag FONT. Todos estos problemas han sido seguidos muy de
cerca por el W3C, el cual comenz a trabajar en 1995 en CSS.
Versin 1.0
Pagina 5 / 26
Versin 1.0
Pagina 6 / 26
3. El tag LINK
Veamos un ejemplo de tag link
<link rel="stylesheet" type="text/css" href="estilos.css" title="default">
Para conseguir la adecuada carga de la hoja de estilos, debemos posicionar este elemento en el HEAD
de la pgina.
Atributos del tag LINK.REL: define el tipo del documento o "con qu tiene relacin". En general, su valor ser "stylesheet".
TYPE: ser siempre "text/css".
HREF: es el valor de la URL que nos permite el acceso al fichero de estilos.
TITLE: actualmente casi no se utiliza, pero ser muy importante en el futuro. Su
El navegador cargar ambas hojas de estilo, combinando las reglas que definen y aplicando el resultado
al documento.
Versin 1.0
Pagina 7 / 26
Versin 1.0
Pagina 8 / 26
5. La directiva @import
La nica diferencia con el tag LINK es su sintaxis y el lugar donde puede utlizarse. La directiva @import
slo puede utilizarse dentro de una regin STYLE en el HEAD de la pgina. Adems, estas directivas
deben definirse antes de cualquier regla CSS que contenga esta regin STYLE.
<style type="text/css">
@import url(externo.css);
h1 {color: gray;}
</style>
Con la directiva @import no podemos definir hojas de estilos alternativas, y en algunos navegadores no
se cachea estos contenidos.
Comentarios en CSS.- Podemos definir comentarios dentro de un fichero CSS haciendo uso de una
sintaxis muy similar a la C/C++, es decir, se considerar un comentario cualquier seccin del documento
que comience con /* y termine con */.
Versin 1.0
Pagina 9 / 26
6. Reglas bsicas
Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentr del documento
HTML, as podemos podemos conseguir el mismo efecto que utilizando el marcado tradicional:
<h2><font color="red">Texto de prueba</font></h2>
A esta expresin se la denomina "regla", y esta en concreto, permite poner en rojo los elementos de tipo
h2.
Estructura de las reglas.- Cada regla tiene dos partes:
1.El "selector": el selector es la parte de la regla que selecciona a qu partes del documento se les debe
de aplicar el estilo. En cuanto a la declaracin se compone de una combinacin de propiedades CSS.
Normalmente, el selector es un elemento HTML, aunque puede tomar otros valores. Si estamos
formatenado un documento XML, puede tomar el valor de cualquiera de los elementos o nodos del
documento XML:
QUOTE {color: gray;}
BIB {color: red;}
BOOKTITLE {color: purple;}
2.La "declaracin": adems, la declaracin se compone de una lista de parejas "propiedad : valor"
separadas por punto y coma, que se corresponden con propiedades vlidas dentro de la especificacin
CSS. Motivos por los que se puede anular una declaracin:
-Si utilizamos un propiedad que no existe, la declaracin entera es ignorada.
-Si utilizamos un valor incorrecto para una propiedad, slo debera ignorarse el valor, aunque este
aspecto depende de la implementacin del navegador (aunque la mayora son bastante tolerantes con
los errores en el cdigo CSS).
Si la definicin del valor de una propiedad permite el uso de ms de una palabra, estas estarn
separadas por espacios en blanco. Adems existen unos poco ejemplos en los que se pueden utilizar
otros tipo de elementos dentro de la declaracin. Es el caso de la propiedad FONT:
H2 {font: large/150% sans-serif;}
Esta declaracin permite definir adems del tamao de la fuente, el grosor de la lnea en la que est el
texto.
Versin 1.0
Pagina 10 / 26
7. Agrupacin de selectores y
declaraciones
Normalmente, se da el caso en que dos elementos del documento HTML comparten la definicin de la
misma propiedad CSS. Estos elementos podemos declararlos de una forma extendida:
H1
H2
H3
H4
H5
H6
{color:
{color:
{color:
{color:
{color:
{color:
purple;}
purple;}
purple;}
purple;}
purple;}
purple;}
O utilizar la agrupacin para conseguir una declaracin ms compacta (el resultado es el mismo en
ambos casos):
H1, H2, H3, H4, H5, H6 {color: purple;}
Agrupacin de declaraciones.- Podemos agrupar declaraciones cuando tenemos diferentes reglas que
definen propiedades de un mismo elemento. Por ejemplo:
H1 {font: 18pt Helvetica;}
H1 {color: purple;}
H1 {background: aqua;}
Los espacios en blanco sern ignorados, as que el navegador se fiar de la correcta estructura
sintctica de las reglas. Es por eso, que para una ms sencilla visualizacin, podemos escribir las reglas
CSS de esta forma:
H1 {
font: 18pt Helvetica;
color: purple;
background: aqua;
Versin 1.0
Pagina 11 / 26
Es una buena prctica terminar las declaraciones siempre con punto y coma (aunque no es obligatorio).
Motivos:
-Te permite habituarte a terminar las declaraciones correctamente, que es uno
de los errores ms comunes.
-Si decides aadir una nueva declaracin a la regla, no tiens porque preocuparte
de cmo termina la anterior.
-Algumos navegadores antiguos pueden confundirse cuando las reglas no se
terminan adecuadamente.
Combinaciones de agrupacin de selectores y declaraciones.BODY {background: white; color: gray;}
H1, H2, H3, H4, H5, H6 {font-family: Helvetica, sans-serif;
color: white; background: black;}
H1, H2, H3 {border: 2px solid gray; font-weight: bold;}
H4, H5, H6 {border: 1px solid gray;}
P, TABLE {color: gray; font-family: Times, serif;}
PRE {margin: 1em; color: maroon;}
Versin 1.0
Pagina 12 / 26
8. Atributos CLASS y ID
8.1. CLASS
El atributo CLASS nos permite asignar estilos al documento sin preocuparnos de los elementos
concretos a los que se aplicarn. Como desventaja, est el hecho de que debemos modificar el cdigo
HTML del documento, incluyendo atributos CLASS en los lugares donde queramos aplicar estilos.
<p class="cita">En en lugar de la mancha ...</p>
Slo nos queda definir este nuevo estilo como una regla ms de nuestro documento CSS:
.cita {font-weight: bold; color: red;}
El punto inicial es necesario para mantener la definicin de este estilo desvinculada de cualquier
elemento del documento. Si queremos restringir el uso de este estilo a un tipo de elemento, podemos
definirlo como:
p.cita {font-weight: bold; color: red;}
8.2. ID
El atributo ID en cierta forma, es igual que CLASS. Diferencias:
La definicin de los estilos de tipo ID, estn precedidas por el carcter #, en lugar del punto.
#first-para {font-weight: bold;}<P ID="first-para">This is the first paragraph, and
will be boldfaced.</P>
El mismo atributo ID slo puede usarse en un elemento. Debe ser nico. En la realidad, los
navegadores no hacen comprobaciones de este tipo y podemos utilizar el mismo valor de ID para dar
estilo a mltiples elementos.
Los estilos de tipo ID tambin pueden definirse al margen de cualquier elemento, pero estas
definiciones no tienen ningn sentido al ser sus valores nicos y no aplicables a otros elementos.
Versin 1.0
Pagina 13 / 26
9. Pseudo-Clases y Pseudo-Elementos
Permite la asignacin de estilos a estructuras, estados de los elementos o estados del propio
documento, las cuales no deben estan definidas en la estructura del propio documento.
Pseudo-Clases.- En el caso de los enlaces, algunos de ellos hacen referencia a pginas que ya han
sido o no visitadas. No hay ninguna forma posible de poder formatear de forma diferente estos tipos de
enlaces en HTML, para ello utilizamos unas estrucuturas virtuales que no se corresponden con ningn
objeto del documento HTML, conocidas como pseudo-clases.
En CSS1, hay slo tres pseudo-clases:
:link: hace referencia a cualquier enlace no visitado de la pgina.
:visited: hace referencia a cualquier enlace ya visitado de la pgina.
:active: hace referencia al enlace en el que estamos haciendo click en este momento o estamos
activando. En CSS1 slo se puede definir esta propidedad sobre los enlaces, mientras que en CSS2
esta propiedad se aplica a cualquier elemento.
Pseudo-Elementos.- En CSS1, hay dos pseudo-elementos que son :first-letter y :first-line.
Se utilizan para dar estilo a la primera letra de un elemento de bloque (un prrafo por ejemplo) y a su
primera lnea respectivamente.
Ejemplo:
P:first-letter {color: red;}
P:first-line {color: gray;}
2.first-line
-propiedades de las fuentes
-fondos y colores
-word-spacing
-letter-spacing
-text-decoration
-vertical-align
-text-transform
-line-height
-clear
Versin 1.0
Pagina 14 / 26
10. Estructura
La estructura del documento es determinante para la forma en que CSS aplica los estilos al documento,
sobre todo en torno a las relaciones entre padres e hijos.
El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de
contexto entre los elementos. Por ejemplo, si queremos definir que los EM que estn dentro de un H1
sern grises, podemos aadir un atributo CLASS a cada EM que est dentro de un H1, o definir una
regla como la siguiente:
H1 EM {color: gray;}
Herencia.- Es la propiedad por al cual un estilo no slo se aplica a un elemento en concreto, sino que es
heredado por sus descendientes y aplicado por estos:
H1 {color: gray;}
<H1>Meerkat <EM>Central</EM></H1>
Debemos tener en cuenta que no todas las propiedades se heredan. Existen una serie de razones
(normalmente de sentido comn) por las cuales algunas propiedades no se pueden heredar, por
ejemplo la definicin de bordes.
Versin 1.0
Pagina 15 / 26
11. Especificidad
Hay ocasiones en las que podemos encontrarnos en la situacin de que un mismo elemento
tenmltiples definiciones para ser formateado de formas distintas:
.grape {color: purple;}
H1 {color: red;}
<H1 CLASS="grape">Meerkat <EM>Central</EM></H1>
En estos casos CSS define que se debe aplicar el estilo que sea ms especfico, ejemplo de gradacin
que aplicar un navegador a la hora de aplicar los estilos:
H1 {color: red;} /* specificity = 1 */
P EM {color: purple;} /* specificity = 2 */
.grape {color: purple;} /* specificity = 10 */
P.bright {color: yellow;} /* specificity = 11 */
P.bright EM.dark {color: brown;} /* specificity = 22 */
#id216 {color: blue;} /* specificity = 100 */
Por definicin, los estilos heredados tendrn un valor de especificidad 0 y los aplicados a travs de la
propiedad STYLE, un valor superior a 100.
Importancia.- Podemos marcar que ciertos estilos son ms importantes que otros, pudiendo as
modificar las reglas de especificidad aplicadas por el navegador. Un estilo importante se define
aadiendo la coletilla !important al final del mismo:
P.dark {color: #333 !important; background: white;}
Esto estilos recibirn siempre el valor de especificidad ms alto considerado por el navegador.
Versin 1.0
Pagina 16 / 26
Versin 1.0
Pagina 17 / 26
13.2. Unidades
Medidas absolutas de longitud:
-Pulgadas (in).
-Centmetros (cm).
-Milmetros (mm).
-Puntos (pt). Medida tipogrfica utilizada en la definicin de las fuentes. En una pulgada hay 72 puntos
(font-size: 18pt equivale a font-size: 0.25in).
-Picas (pc). Mediada tambin tipogrfica que hace corresponder una pica a 12 puntos.
que el texto tendr un tamao de 14 puntos, el valor de 1em ser equivalente a 14 puntos.
ex: similar a em, pero hace corresponder el tamao actual de la fuente, al que tendra una X minscula.
Versin 1.0
Pagina 18 / 26
14. Indentacin
Indentacin de la primera lnea de un prrafo. Es una propiedad que se aplica a elementos de tipo
bloque, y acepta tanto un valor de longitud, como un porcentaje:
P {text-indent: 0.25in;}
Podemos conseguir una sangra francesa, utilizando valores negativos para la indentacin:
P {text-indent: -30px;}
Ejemplo :
<html>
<head>
<title>Propiedades del texto</title>
<style>
p.indentacion { text-indent: 0.25in; }
p.indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; }
p.indentacion:first-letter, p.indentacion_francesa:first-letter {
font-size: 24pt;
background-color: magenta;
color: white;
padding: 5px;
border: 1px solid navy;
}
</style>
</head>
<body>
<p class="indentacion">
Texto de ejemplo sobre los valores de la indentación.
Texto de ejemplo sobre los valores de la indentación.
</p>
<p class="indentacion_francesa">
Texto de ejemplo sobre los valores de la indentación.
Texto de ejemplo sobre los valores de la indentación.
</p>
</body>
</html>
Versin 1.0
Pagina 19 / 26
15. Margenes
15.1. Introduccin
Hay dos propiedades que establecen la separacin de los elementos: margin y padding.
Si bien parecen lo mismo porque a veces no notamos ninguna diferencia entre usar una u otra, no lo
son.
Podramos decir que margin es la separacin de un elemento de otro y padding es el relleno, la
separacin entre un elemento y aquel que lo contiene Confuso? Ciertamente, lo es.
15.2. Margin
margin es una forma reducida de establecer la separacin de los cuatro bordes al mismo tiempo.
sintaxis en HTML
elemento {margin: valores;}
por ejemplo:
div {margin: 2px 0 10px 5px;}
Donde el orden de los valores es: arriba, izquierda, derecha, abajo y, cada una de ellos puede ser
especificad por separado.
La propiedad margin-bottom establece el margen inferior; margin-right el margen derecho; marginbottom el margen inferior y margin-left el margen izquierdo.
sintaxis en HTML
elemento
elemento
elemento
elemento
{margin-top: valor;}
{margin-roght: valor;}
{margin-bottom: valor;}
{margin-left: valor;}
por ejemplo:
div {margin-left: 5px;}
Versin 1.0
Pagina 20 / 26
Nota:
* Si slo de especifica un valor, este se aplica a los cuatro lados.
* Si se especifican dos valores, el primero se aplica a los mrgenes superior e inferior y el segundo a
los mrgenes derecho e izquierdo.
* Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los mrgenes
derecho e izquierdo y el tercero al margen inferior.
* Si establecemos cuatro valores, definirn los mrgenes superior, derecho, inferior e izquierdo
respectivamente.
Los valores los separamos mediante espacios; por ejemplo:
div {margin: 10px 20px;}
En los llamados elementos inline, los mrgenes superior e inferior no tienen efectos prcticos.
15.3. Padding
La propiedad padding es una forma reducida de establecer el "relleno" de los cuatro lados al mismo
tiempo y tiene la misma sintaxis que margin.
sintaxis en HTML
elemento
elemento
elemento
elemento
elemento
{padding: valores;}
{padding-top: valor;}
{padding-right: valor;}
{padding-bottom: valor;}
{padding-left: valor;}
por ejemplo: div {padding-left: 5px;}
El padding o relleno, es la cantidad de espacio a insertar entre el objeto y su margen o, si hay un borde
(propiedad border) la distancia entre el objeto y el borde.
Sigue todas las reglas que los mrgenes excepto que slo se pueden usar valores positivos. Por
ejemplo:
div {padding: 50px 10px 20px 30px}
Cada elemento de una pgina web es un rectngulo que tiene un contenido (textos, imgenes, etc.) y
una serie de reas opcionales a su alrededor (border, margin y padding) por lo tanto, el tamao final
depende de todas y cada una de esas propiedades aunque tambin depende de si han asignadas otras
propiedades como width y height, si contiene texto u otros elementos, si es una tabla, si ... etc.
En trmimos generales, el ancho es la suma de los mrgenes, los bordes y los rellenos izquierdos y
derechos ms el ancho del contenido y la altura es la suma de los mrgenes, lso bordes y los rellenos
superiores e inferiores ms la altura del contenido.
Versin 1.0
Pagina 21 / 26
16. Alineacin
Nos permite alinear los textos dentro de elementos de bloque de las siguientes formas:
-Izquierda (left).
-Centrado (center).
-Derecha (right).
-Justificado (justify), es decir, centrado a derecha e izquierda.
Podemos utilizar el valor de "text-align: center" para reemplazar al tag CENTER que ahora es
DEPRECATED:
Ejemplo:
<html>
<head>
<title>Propiedades del texto</title>
<style>
h1 { text-align: left; }
h2 { text-align: right; }
h3 { text-align: center; }
</style>
</head>
<body>
<h1>Alineacin izquierda</h1>
<h2>Alineacin derecha</h2>
<h3>Alineacin centrada</h3>
</body>
</html>
Versin 1.0
Pagina 22 / 26
normal. Valor por defecto para la definicin de espacios en blanco, la cual no aplica ninguna
consideracin especial sobre el texto.
Como las explicaciones includas en el estndar CSS 2.1 pueden llegar a ser confusas, la siguiente
tabla resume el comportamiento de cada valor:
Valor
Ejemplo:
<html>
<head>
<title>Propiedades del texto</title>
<style>
p { width: 300px; }
p.libre { white-space: pre; }
p.sinsaltos { white-space: nowrap; }
p.normal { white-space: normal; }
</style>
</head>
<body>
<p class="libre">
Texto con distintas representacion de
espacios
en blanco para ver su
comportamiento.
</p>
<p class="sinsaltos">
Texto con distintas representacion de
espacios
en blanco para ver su
comportamiento.
</p>
<p class="normal">
Texto con distintas
representacion
de espacios
en blanco para ver su comportamiento.
</p>
</body>
</html>
Versin 1.0
Pagina 23 / 26
Versin 1.0
Pagina 24 / 26
parrafo.
parrafo.
parrafo.
parrafo.
parrafo.
Espacio entre letras.- Idntico al espaciado entre palabras, pero aplicado a los caracteres que forman
cada palabra. Su propiedad asociada es "letter-spacing".
Versin 1.0
Pagina 25 / 26
Versin 1.0
Pagina 26 / 26
del texto.
line-through: tacha el texto asociado dibujando una lnea sobre el mismo.
blink: hace que el texto asociado parpadee.
none: no aplica ningn elemento decorativo al texto.
Ejemplo:
<html>
<head>
<title>Propiedades del texto</title>
<style>
p { font-size: 200%; font-weight: bold;}
</style>
</head>
<body>
<p style="text-decoration: underline;">
Prueba de decoracin del texto
</p>
<p style="text-decoration: overline;">
Prueba de decoración del texto
</p>
<p style="text-decoration: line-through;">
Prueba de decoración del texto
</p>
<p style="text-decoration: blink;">
Prueba de decoración del texto (este est parpadeando :)
</p>
</body>
</html>
Versin 1.0