Curso CSS - Índice de contenidos y lecciones

Curso de css - ndice de contenidos
Leccin 01: Introduccin
Leccin 02: La sintaxis de las hojas de estilo
Leccin 03: Implementacin del estilo en cascada
Leccin 04: Primeros pasos con css
Leccin 05: Dando presentacin al texto
Leccin 06: Diseando listas
Leccin 07: Definicin del color del texto
Leccin 08: Aplicando hojas de estilo a las tablas
Leccin 09: Identificadores y clases
Leccin 10: La organizacin del cdigo css
CSS - Leccin 1: Introduccin

El consorcio que regula los estandars para la web recomienda separar el contenido de una
pgina de su diseo. El contenido se genera con html (tienes un curso de html aqu), y el
diseo toma forma mediante cdigo css. Estas siglas significan hojas de estilo en cascada,
y su misin es la de proporcionar un diseo uniforme para todo nuestro sitio web.
Esto proporciona una ventaja muy importante: a la hora de realizar cambios en el diseo de
nuestra web, no necesitamos cambiar el cdigo de cada una de las pginas que tengamos;
sin que bastar con cambiar solo el cdigo css para que haga efecto en todos los
documentos de nuestro sitio web.
Lo primero que se ver en este curso ser la sintaxis de este lenguaje; despus veremos las
diferentes formas de implementar esta tecnologa en nuestra web y, por ltimo, nos
centraremos en asimilar los diferentes elementos para controlar nuestro diseo.
CSS - Leccin 2: La sintaxis de las hojas de estilo

Para escribir correctamente hojas de estilo en cascada necesitamos saber sus reglas
ortogrficas. La consecuencia inmediata es la de poder identificar las partes que componen
este lenguaje.
La sintaxis es muy sencilla ya que siempre se sigue el mismo patrn. Vamos a introducirnos
en materia diciendo que los elementos son: un selector y una declaracin.La declaracin, a
su vez, est compuesta por una propiedad y un valor.
p {
color:blue;
font-size:14pt;
}
En el cdigo de ejemplo, el selector es la letra p; haciendo referencia a la etiqueta p (prrafo)
del documento html asiciado. La declaracin es todo lo que va dentro de las llaves. Como
parte de la declaracin tenemos dos propiedades (en fucsia) y dos valores en verde.
Hay un aspecto importante que no se puede olvidar:
Las declaraciones se separan entre s mediante un punto y coma
Las propiedades se separan de los valores mediante dos puntos
El preformateado que le hemos dado al cdigo css es arbitrario y sirve para organizar
visualmente el cdigo. De ello, te recomendamos que respetes este preformateado para que
luego no tengas dificultades a la hora de revisar tu cdigo, la figura 1 ilustra muy bien esto.
Figura 1: El preformateado nos ayuda a identificar

los elementos del cdigo
No cabe duda de las ventajas de preformatear nuestras hojas de estilo; esto nos ayuda a
identificar las propiedades y valores rpidamente, as cmo las distintas declaraciones.
CSS - Leccin 3: Implementacin del estilo en cascada

Hay tres formas de implementar el cdigo css en nuestros documentos html. Las primera es
estableciendo un atributo en la propia etiqueta html que deseemos darle un estilo. La
segunda es en la cabecera de nuestra pgina web, a travs de la etiqueta <style>. La
tercera forma es la ms flexible, se trata de un documento independiente en donde definir
el diseo.
En relacin a la primera forma, utilizaremos el atributo style en la propia etiqueta html a la
cual deseemos proporcionarle diseo. En el siguiente cdigo utilizamos esta forma de
implementacin css para darle a un prrafo color azul y un tipo de fuente arial.

<p style="color:blue; font-family:arial;">
Las hojas de estilo en cascada nos ayudan
enormemente a generar y mantener un diseo
grfico para nuestro sitio web.</p>
Como ves, el valor que debe de tomar el atributo style son las declaraciones de la sintaxis
css necesarias para dar el diseo deseado.
Con la segunda forma de utilizar cdigo css, que hemos mencionado antes, podemos darle
diseo a todo un documento html de forma integral. Para ello, escribiremos el cdigo css
en la cabecera de nuestra pgina web; dentro de la etiqueta <style>
<html>

<head>

<style type="text/css">
<!-h2 {
color:red;
}
p {
color:blue;
text-align:center;
}
-->
</style>
</head>

<body>

<h2>Hojas de estilo en cascada</h2>

<p>Con la etiqueta style podemos
disear nuestras pginas webs.</p>

<p>Esta tcnica de diseo web es
muy flexible y potente para el
webmaster.</p>
</body>
</html>
En el cdigo anterior tenemos un documento html con un ttulo y dos prrafos en el cuerpo de
la pgina. En su cabecera hemos definido un diseo para el documento, que hemos escrito en
cdigo css dentro de la etiqueta cerrada <style>. El atributo type="text/css" es opcional
ponerlo para que el navegador sepa de que tipo de cdigo se trata.
Observa tambin que hemos metido el contenido de la etiqueta <style> dentro de los
smbolos de comentario html. La razn de esto es porque hay navegadores antiguos que
no soportan esta etiqueta; entonces, al encontrarse con este cdigo lo tomar como
comentarios html y as no lo mostrar en nuestra pgina web.
Es recomendable que escribas el cdigo anterior en tu blog de notas. Empieza escribiendo
primero la estructura html; despus sigue por el cuerpo de la pgina y, finalmente, por el ttulo
de la pgina y la etiqueta <style>.
Para la tercera forma de implementar css, vamos a utilizar una nueva etiqueta html: la etiqueta
<link>. Se trata de una etiqueta abierta, que sirve para establecer una conexin o enlace
entre la hoja de estilo en cascada y el documento html.
<html>
<head>
<title>Mi pgina web con diseo</title>

<link href="midiseo.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h2>Hojas de estilo independientes</h2>
<p>Podemos escribir hojas de estilo

independientes que se pueden aplicar
a cualquier documento html.</p>
<p>Con solo enlazar la pgina con la
etiqueta link aplicaremos todo el
diseo escrito en el archivo css.</p>
</body>
</html>
Cuando usamos una hoja de estilos independiente: un documento css; es importante
asignarle a la etiqueta link el atributo rel. Este atributo es imprescindible y sirve para
especificar si se trata de un diseo persistente, es decir, que nunca se va alternar con otro
diseo (valor stylesheet); o bien si vamos a ir alternando con otros diseos (valor alternate
stylesheet). Este aspecto es algo obsoleto, ya que los navegadores actuales carecen de
capacidad para hacer que el usuario elija el estilo alterno que quiera, an as hay que
especificar.
El enlace que establece la conexin entre los dos archivos; el html y el css, se realiza a travs
del atributo html href="midiseo.css" que se encuentra en la etiqueta <link>. El valor que
toma el atributo href es el destino de la hoja de estilo. En la figura 2 podemos apreciarlo ms
grficamente.
Figura 2. El atributo href es imprescindible con

los documentos css externos
No cabe duda que la forma ms ventajosa es la ltima que hemos visto; en un solo
documento definimos todo el diseo de nuestra web, de manera que para cambiar el
aspecto de todo un web tan solo tenemos que acudir al documento css. Queda pro ver
otra forma de implementacin css, pero no lo veremos por ahora porque es para trabajar de
forma ms avanzada.
css - Leccin 4: Primeros pasos con css
Es hora de empezar a conocer el lenguaje css; o tambin llamado lenguaje de hojas de estilo
en cascada. Para ello vamos a hacerlo de forma prctica. Se propondr cdigos de trabajo
para practicar, y asimilar as todos los conceptos. A partir de los cdigos de trabajo, irs
cambiando valores, aadiendo declaraciones, etc...
Para comenzar, abre esta pgina html con la que vamos a trabajar en una ventana/pestaa
nueva, copia el cdigo, pgalo en tu blog de notas y gurdalo en tu disco duro con el formato
html. Vamos a introducirnos en el diseo modificando las propiedades de los prrafos Si abres
el archivo que has guardado con tu navegador vers que la pgina consta de un ttulo y dos
prrafos.
En primer lugar, nos centraremos en los prrafos; por ello, escribiremos el selector css para
prrafos y sus llaves. En el siguiente cdigo puedes ver como se escribe.
p {
}
</style>
La primera declaracin que escribamos ser para cambiar el color del texto de los prrafos.
Esta declaracin se escribe dentro de las llaves. Su escritura es: color:blue;
p {
color:blue; /* color del texto */
}
</style>
La figura 3 muestra como el texto de la pgina ha cambiado a color azul, tal y como hemos
puesto como valor en la propiedad color para el selector p
Figura 3: Cambio a color azul de los prrafos

Con tan solo cambiar el valor de la propiedad del color al selector de prrafos, podemos
cambiar el color de los prrafos de nuestra pgina web. Experimenta con otros valores como
green, orange, yellow o purple.
CSS - Leccin 5: Dando presentacin al texto

En la leccin anterior hemos visto como darle color al texto. Por supuesto, el diseo no se limita
solo alto, en vez de eso, podemos controlar hasta el ms mnimo detalle en cuanto a la
presentacin del texto se refiere.
En concreto, vamos a aprender como cambiar el tipo de letra, la alineacin, la separacin de
lneas, el tamao del texto y muchos otros aspectos en cuanto a la presentacin del texto se
refiere.
Ovserva la siguiente tabla, en ella se detallan las diferentes propiedades para configurar la
presentacin del texto:
propiedades para darle presentaci?n al texto

color
Con esta propiedad le damos color al texto
font-family
Para aplicar un tipo de letra
font-size
Nos permite modificar el tama?o de la fuente
font-weight
Habilitamos con esta propiedad el texto en negrita
text-align
Nos permite alinear el texto y justificarlo
line-height
Para controlar la separaci?n de los renglones
Por ejemplo, el siguiente cdigo nos permite disear una pgina en la que tenemos un ttulo y
un prrafo. En concreto, presenta el texto en color rojo para el ttulo, y naranja para el
prrafo. Adems, el prrafo tiene el texto justificado y un interlineado grueso. Tambin, le
daremos al ttulo un tipo de letra arial y le cambiaremos el tamao.
h1 {
color:red;
font-family:arial;
font-size:20px;
}
/* color rojo del texto */

/* tipo de letra arial */
/* tamao de letra 24 pixels */
p {
color:orange;
text-align:justify;
line-height:18px;
font-size:12px;
}
/*
/*
/*
/*
color rojo del texto */

texto justificado */
interlineado grueso */
tamao de letra 24 pixels */
Hay propiedades cuyo valor es un tamao, como el tamao del texto (font-size) o el tamao
del interlineado (line-height). Para estas magnitudes utilizaremos una cantidad en pixeles.
El atributo text-align tiene cuatro valores: left para alinear a la izquierda, right para
alinear a la derecha, center para centrar el texto y justify para ajustarlo al ancho de la
ventama.
El cdigo presentara as el texto en una pgina:
Figura 4. Dise?o de una pgina cambiando la

presentacin del texto
CSS - Leccin 6: Diseando listas

Con las hojas de estilo podemos disear nuestras listas de forma muy flexible. Por ejemplo, no
estaremos limitados a listas verticales; sino que podemos transformarlas en listas horizontales.
Esto es til para hacer barras de navegacin que respeten los estndares web. As, se
pueden meter una serie de enlaces de navegacin en una lista y transformar sta en una lista
horizontal.
Antes de nada, y como es costumbre, veamos las propiedades para disear listas:
Propiedades css para listas

list-style-type
Para especificar el tipo de marcador para cada elemento
list-style-image
Para implementar una imagen como marcador
list-style-position
Para situar el marcador dentro del texto o en el margen
display
Disponer los elementos horizontalmente
Por defecto, en las listas ordenadas cada elemento viene identificado por un nmero por
defecto. Con la propiedad list-style-type podemos cambiar esto y hacer que la
ordenacin sea alfabtica o mediante numeracin romana. Los valores que puede adoptar
esta propiedad son: decimal (por defecto), lower-alpha, upper-alpha, lower-roman y
upper-roman.
Figura 5. Direfentes valores para la propiedad

list-style-type en listas ordenadas.
En cuanto a los valores que pueden tener los elementos de una lista desordinada para la
propiedad list-style-type son: disc (por defecto), circle y square. Existe otro valor
que poseen las dos clases de listas, se trata de none, y sirve para que no aparezca smbolo
alguno en cada elemento.
Tambin tenemos la posibilileco usar ninguno de los marcadores vistos, sino el que nosotros
queramos por medio de una imagen. As, es posible establecer como marcador una
imagen. Para ello tenemos que utilizar la propiedad list-style-image. Solo sirve para
listas desordenadas como es lgico.
ul {
list-style-image:url("imagenes/rombo.gif");
}
El cdigo anterior nos habilitara una imagen como marcador en todas las listas desordenadas
de nuestras pginas. El valor que toma la propiedad indica que se use la imagen rombo.gif
situada en la carpeta imagenes. Para poner un valor, siempre hay que poner "url" y, entre
parntesis, el destino del archivo a enlazar.
Figura 6. Se pueden poner imgenes

como marcadores.
Si observas, los marcadores siempre se quedan a la izquierda, ocupando el margen izquierdo
del texto. Podemos cambiar esto con la propiedad list-style-position, cuyos valores
posibles son outside (por defecto) y inside. As podremos hacer que los marcadores se
coloquen a la altura del texto.
Figura 7. Efecto en una lista para los dos valores de la

propiedad list-style-position.
Por ltimo decir que podemos mostrar listas en las que los elementos se dispongan de
forma horizontal. para ello nos valdremos de la propiedad display, dndole un valor de
inline. Existen muchas ms propiedades para dar diseo a las listas, pero an no las
veremos para no complicar el aprendizaje.
CSS - Leccin 7: Definicin del color del texto

En esta leccin vamos a profundizar en el tema de aplicar color a distintos elementos; por
ejemplo, explicaremos tcnicas para dominar la aplicacin de color a nuestros textos.
Estos elementos tienen un denominador comn: albergan dentro de ellos texto, el color del
texto de los diversos elementos se puede manipular por medio de las hojas de estilo en
cascada.
Existen muchas formas de implementar color al texto; cada una tiene sus ventajas y sus
incovenientes. La razn por la que se puede aplicar color al texto de diversas formas, es
porque hay circunstancias a la hora de disear que requieren una forma de
implementacin u otra.
Por ejemplo, hay desarrollos de diseos que no son muy complejos, entonces bastara para
implementar color dndole valores a la propiedad color mediante el nombre del color en
cuestin. Trabajando en diseos complejos no podramos aplicar esta clase de valores.
La forma ms simple de aplicar color al texto de un elemento; como puede ser un prrafo o
una lista, es estableciendo como valor el nombre (en ingls) del color que deseemos
aplicar a la propiedad color. Por ejemplo, en la declaracin color:blue; estableceramos el
color azul para el texto.
La segunda forma de controlar el color del texto es aplicando valores hexadecimales al
color. Esta nueva forma de implementar valores es ms precisa que la primera, y est
destinada a conseguir mayor precisin en el color que deseamos establecer. Como ejemplo,
para introducirnos, tenemos la siguiente declaracin que establece el color verde para el texto:
color:#00FF00;.
Su funcionamiento es el siguiente: se trata de tres pares de nmeros; que miden la catidad
de color primario que se aplicar. El primer par de nmeros corresponde al color rojo, el
pr de nmeros del medio corresponde al color verde, y el ltimo par de nmeros al
color azul. Mezclando estos tres, en mayor o menor grado, podemos crear cualquier color.
Figura 8. Los colores que representa cada pareja

de nmeros hexadecimales.
La tercera forma de aplicar color se basa en la anterior: mezclando distintas cantidades de
colores primarios. La diferencia est en la sintaxis, ya que en este caso no se usa notacin
hexadecimal; lo que se usa son coordenadas paramtricas. Aqu un ejemplo de esta forma
para color azul: color:rgb(0,0,255);.
La sintaxsis del valor de la propiedad empieza por unas siglas, las iniciales de cada color que
se representa: red, green y blue. Entre parntesis ponemos los parmetros de cada color
separados por comas; el rango va de 0 a 255.
Existe una variante que consiste en poner los parmetros en tanto por ciento, en vez de
utilizar el rango de 0 a 255. Por ejemplo, podemos escribir la siguiente declaracin para poner
un color rojo:rgb(100%,0%,0%);.
Relacin de valores para el color

color
nombre hexadecimal paramtrica
paramtrica
rojo
red
#FF0000
rgb(255,0,0)
rgb(100%,0%,0%)
lima
lime
#00FF00
rgb(0,255,0)
rgb(0%,100%,0%)
azul
blue
#0000FF
rgb(0,0,255)
rgb(0%,0%,100%)
negro
black
#000000
rgb(0,0,0)
rgb(0%,0%,0%)
blanco
white
#FFFFFF
rgb(255,255,255) rgb(100%,100%,100%)
amarillo
yellow
#FFFF00
rgb(255,255,0)
rgb(100%,100%,0%)
celeste
aqua
#00FFFF
rgb(0,255,255)
rgb(0%,100%,100%)
rosa
pink
#FFC0CB
rgb(255,192,203) rgb(100%,75%,80%)
morado
purple
#800080
rgb(128,0,128)
rgb(50%,0%,50%)
Estos son solo algunos ejemplos, puedes acceder a una completa paleta de colores a travs de
este enlace.
CSS - Leccin 8: Aplicando hojas de estilo a las tablas

Con las hojas de estilo podemos proporcionarle un aire nuevo a nuestras tablas, que son
los objetos que albergan a los datos tabulados. En esta misma web se utiliza cdigo CSS para
disear las tablas de este curso.
Como ves, por las tablas de este curso, podemos disear stas de forma muy flexible;
personalizndolas hasta lmites insospechados. Por ejemplo, dndole un color a cada fila.
A continuacin se te presentan las propiedades que podemos usar para disear nuestras
tablas:
Propiedades para disear tablas

border-collapse
Fuerza a que los bordes contiguos de las celdas se solapen
border-spacing
Para establecer la distancia entre los bordes de las celdas
border-style
Para habilitar un borde, con un estilo determinado
background-color
Para aplicar un color de fondo a la tabla
padding
Pone un margen entre el borde de las celdas y su contenido
Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco

separadas las unas de las otras. Con la propiedad border-collapse podemos conseguir
controlar este aspecto.
Esta propiedad tiene dos valores: collapse y separate. El primer valor es el que establece
el que se adosen las celdas contiguas. El segundo valor es el que se establece por
defecto, y deja una separacin entre las celdas.
En la imagen 9 puedes ver este concepto ms grficamente:
Figura 9. Podemos hacer colapsar los bordes para que las celdas
se adosen unas con otras.
Si lo que deseamos es que las celdas de una tabla guarden una separacin entre ellas,
podemos controlar la distancia de la separacin de las celdas. Para ello nos valdremos de
la propiedad border-spacing. Los valores que tomar esta propiedad sern cantidades en
pxeles.
Aunque existen otras magnitudes para medir la cantidad de distancia, como por ejemplo
porcentajes, por ahora nos vamos a centrar en la unidad de pixel. En una prxima leccin nos
centraremos en las distintas unidades que podemos manejar con las hojas de estilo en
cascada.
Tambin tenemos la posibilidad de ponerle un color de fondo a las celdas. Mediante la
propiedad background-color estableceremos los valores en las modalidades que
analizamos en la leccin 7 de este mismo curso.
Cuando creamos una tabla, sta no aparece como tal, sino que lo que vemos son solo los
datos tabulados contenidos en la tabla. Esto es porque los bordes no aparecen. Con la
propiedad border-style podemos hacer que se muestren los bordes, pudiendo elegir
entre varios tipos. A continuacin los tipos y sus caractersticas:
solid - la lnea del borde se muestra con un solo trazo y lisa.
double - la lnea del borde aparece con doble trazo.

groove - la lnea aparece con bajo relieve.
ridge - la lnea del borde se muestra con alto relieve.
Figura 10. Podemos elegir entre distintos tipos de bordes

para las tablas o las celdas.
Vamos a implementar un cdigo para que asimiles mejor el funcionamiento de todas estas
propiedades que hemos visto para las tablas y sus celdas (tambin pondrmos la imagen de la
tabla que genera el cdigo):
table {
border-style:double;
background-color:aliceblue;
border-spacing:12px;
}
th {
border-style:solid;
background-color:aquamarine;
}
td {
border-style:groove;
background-color:orange;
padding:4px;
}
Tenemos una tabla con celdas normales y de encabezados. Hemos escrito en el cdigo
diferentes valores para el estilo del borde; en concreto, tenemos doble trazo para el borde
de la tabla, uno slido para los encabezados y otro de bajo relieve para las celdas normales.
Obversa tambin que le hemos dado un color de fondo diferente para cada elemento: los
encabezados con un azul verdoso, las celdas con naranja y la tabla con gris.
Por otro lado se ha puesto un espacio entre el borde de la tabla y las celdas mediante la
declaracin border-spacing:12px; ubicada en el selector table. Esta declaracin la
heredarn las celdas tambin. Por ltimo hemos utilizado la declaracin padding:4px; en el
selector td para dejar un margen entre el borde de las celdas y su contenido.
En la figura 11 se muestra el resultado del diseo que implementara el cdigo anterior:
Figura 11. Un diseo de tabla realizado con cdigo css.
CSS - Leccin 9: Identificadores y clases

Hemos visto como aplicar un diseo determinado a cada elemento de la pgina web generada
con cdigo html. Aunque esto est bien para el diseo de nuestros sitios web, no es suficiente.
Imagina que creas un artculo constitudo por prrafos; el primer prrafo tiene que ir en negrita
porque es un resumen de todo el desarrollo del artculo. Con lo que sabemos hasta ahora, no
podramos ser capaces de implementar un diseo as.
Como slo podemos hasta ahora apuntar a la etiqueta <p> por medio del selector p, no
podemos aplicar diseo ms que ha todo el artculo en su conjunto.
Pero existe una solucin a este problema. En realidad, se puede ampliar la sintaxis de los
selectores para diferenciar un determinado prrafo (u otra etiqueta html), o difenrenciar un
grupo de prrafos de otro (u otras etiquetas).
Los identificadores
Con los identificadores podemos aplicar un diseo exclusivo para una determinada
etiqueta dentro de las que haya en nuestro cdigo html. Por ejemplo, si queremos poner en
negrita el primer prrafo, bastara con identificar con un nombre a la etiqueta <p> del primer
prrafo y aadir un identificador al selector del cdigo css.
Para identificar un determinado elemento en el cdigo html, necesitamos darle un nombre
por medio del atributo id. Posteriormente, necesitamos acceder a este elemento desde el
cdigo css para aplicarle el diseo. Esto se hace a travs del selector: tenemos que escribir
el nombre de la etiqueta seguido del smbolo # y del nombre que pusimos en el atributo
id.
Veamos un cdigo de ejemplo:
Cdigo html:
<p id="EnNegrita">
Prrafo 1</p>
<p>Prrafo 2</p>
<p>Prrafo 3</p>
Cdigo css:
p#EnNegrita {
font-weight:bold;
}
Observa como hemos includo el atributo id en el cdigo html; y como hemos pasado su valor
al cdigo css, incluyndolo en el selector. Al ser un identificador tenemos que anteponerle
la almohadilla para indicarlo a la hoja de estilos. El cdigo anterior nos habilitara lo
siguiente en el navegador:
Figura 12. Con los identificadores podemos aplicar

un diseo diferente entre prrafos.
Como ves, ahora podemos darle un diseo exclusivo a un determinado elemento de
nuestra pgina web; como el primer prrafo, o el ltimo. Pero no hay necesidad de limitarnos
a los prrafos; ya que podemos aplicar los identificadores a cualquier elemento, como una
tabla o una lista.
Las clases
Aunque los selectores nos ofrecen ms flexibilidad a la hora de disear, probablemente te
habrs dado cuenta que, por s solos, no son suficientes: qu pasa si necesito agrupar
distintos grupos de prrafos con estilos diferentes? Para ello tenemos las clases.
Las clases son similares a los identificadores, aunque en vez de identificar a un solo elemento
html, nos identifica a un grupo de elementos. Esto nos permite dar estilo a varios elementos
de la nisma etiqueta dentro de una pgina.
Figura 13. Con las clases podemos aplicar diseo

a elementos por grupos.
En la figura 13 podemos ver una conversacin entre Julia y Juan. Para distinguirlos, se han
puesto las frases de Juan en azul; y las de Julia en fucsia. Imagina hacer esto con
identificadores, y ms aun en conversaciones mucho ms largas. Caeramos en un proceso
tedioso: darle un nombre direfente a cada prrafo de la conversacin.
Con las clases es mucho ms fcil, tan solo agrupamos los prrafos por los de Juan y por los
de Julia. As tan solo tenemos dos clases de prrafos: los de Julia y los de Juan. Lo que
dice Juan lo etiquetamos como "juan" y lo que dice Julia lo etiquetamos como "julia". Veamos el
cdigo que implementa lo que muestra la figura 13:
Cdigo html:
<p class="juan">
Hola, Julia.</p>
<p class="julia">
Qu tal?, Juan.</p>
<p class="juan">
Bien, estoy bien.</p>
<p class="julia">
Fantstico, me alegro!</p>
Cdigo css:
p.juan {
color:blue;
}
p.julia {
color:fuchsia;
}
Para implementar clases, existen algunas diferencias respecto a la implementacin de
identificadores. En primer lugar se utiliza, en el cdigo html, el atributo class para
identificar un elemento. En el selector del cdigo css, para pasar el valor del atributo
class, ponemos un punto en vez de una almohadilla.
CSS - Leccin 10: La organizacin del cdigo css

Es muy comn, cuando se empieza a desarrollar las primeras hojas de estilo en casada, que
empecemos a perdernos entre el cdigo, no pudiendo encontrar una determinada regla para
su edicin.
Cuando tenemos muy avanzada una web, el cdigo css se hace muy extenso; y si no lo
hemos organizado previamente, podemos tener problemas a la hora de encontrar una
determinada declaracin para cambiar sus valores.
Para solventar este tipo de problemas, podemos seguir una serie de pautas para organizar
nuestro trabajo; y para encontrar eficazmente los distintos selectores y declaraciones en un
momento determinado. Todo esto nos ahorrar tiempo en el desarrollo de nuestra web, y
muchos quebraderos de cabeza.
La primera tcnica consiste en utilizar comentarios para nuestro cdigo. Las lneas de
comentarios podemos usarlas como referencia para saber porqu hemos escrito
determinado cdigo dentro del contexto de nuestra web. Por ejemplo, podemos agregar un
comentario al principio de todo el bloque de clases para tablas para identificarlas rpidamente.
Una cosa que hay que tener en cuenta es que es muy importante organizar el cdigo. Las
reglas deben estr agrupadas segn su selector; esto es que si tenemos varias reglas, por
ejemplo, con selector table (normales o clases), debemos agruparlas unas debajo de otras. La
imagen 14 muestra lo que se est? pretendiendo explicar:
Figura 14. Agrupando las reglas segn su selector mantendremos

nuestras horas de estilo ordenadas.
En la figura 14 vemos como se puede ordenar las reglas de las hojas de estilo: agrupandolas
segn el selector. En este caso tenemos tres reglas: la primera con un selector sencillo; y la
segunda y tercera cuyo selector son clases. Hay que agrupar las clases juntndolas por
familias (table, p, ul...).
Otra cosa aparte es cuando tenemos el desarrollo de la pgina web muy avanzado. En este
caso suele ocurrir que se genera mucho cdigo css; quedando una hoja de estilos
largsima. El problema surge cuando tenemos que localizar un determinado selector para
editar los valores de sus propiedades.
Una solucin muy til es usar la funcin de bsqueda de tu editor de texto (notepad en
caso de windows). Si, por ejemplo, queremos localizar el selector table.miembros, solo
tenemos que acudir a la funcin bsqueda y poner el valor del atributo class para ese
elemento table.

Curso CSS - Índice de contenidos y lecciones

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso CSS - Índice de contenidos y lecciones

Uploaded by

Copyright:

Available Formats

Curso de css - ndice de contenidos

Leccin 01: Introduccin

Leccin 02: La sintaxis de las hojas de estilo

Leccin 03: Implementacin del estilo en cascada

Leccin 04: Primeros pasos con css

Leccin 05: Dando presentacin al texto

Leccin 06: Diseando listas

Leccin 07: Definicin del color del texto

Leccin 08: Aplicando hojas de estilo a las tablas

Leccin 09: Identificadores y clases

Leccin 10: La organizacin del cdigo css

CSS - Leccin 1: Introduccin

CSS - Leccin 2: La sintaxis de las hojas de estilo

Figura 1: El preformateado nos ayuda a identificar

CSS - Leccin 3: Implementacin del estilo en cascada

<p>Podemos escribir hojas de estilo

Figura 2. El atributo href es imprescindible con

css - Leccin 4: Primeros pasos con css

Figura 3: Cambio a color azul de los prrafos

CSS - Leccin 5: Dando presentacin al texto

propiedades para darle presentaci?n al texto

Con esta propiedad le damos color al texto

Para aplicar un tipo de letra

Nos permite modificar el tama?o de la fuente

Habilitamos con esta propiedad el texto en negrita

Nos permite alinear el texto y justificarlo

Para controlar la separaci?n de los renglones

/* color rojo del texto */

color rojo del texto */

Figura 4. Dise?o de una pgina cambiando la

CSS - Leccin 6: Diseando listas

Propiedades css para listas

Para especificar el tipo de marcador para cada elemento

Para implementar una imagen como marcador

Para situar el marcador dentro del texto o en el margen

Disponer los elementos horizontalmente

Figura 5. Direfentes valores para la propiedad

Figura 6. Se pueden poner imgenes

Figura 7. Efecto en una lista para los dos valores de la

CSS - Leccin 7: Definicin del color del texto

Figura 8. Los colores que representa cada pareja

Relacin de valores para el color

nombre hexadecimal paramtrica

CSS - Leccin 8: Aplicando hojas de estilo a las tablas

Propiedades para disear tablas

Fuerza a que los bordes contiguos de las celdas se solapen

Para establecer la distancia entre los bordes de las celdas

Para habilitar un borde, con un estilo determinado

Para aplicar un color de fondo a la tabla

Pone un margen entre el borde de las celdas y su contenido

Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco

solid - la lnea del borde se muestra con un solo trazo y lisa.

double - la lnea del borde aparece con doble trazo.

ridge - la lnea del borde se muestra con alto relieve.

Figura 10. Podemos elegir entre distintos tipos de bordes

Figura 11. Un diseo de tabla realizado con cdigo css.

CSS - Leccin 9: Identificadores y clases

Figura 12. Con los identificadores podemos aplicar

Figura 13. Con las clases podemos aplicar diseo

CSS - Leccin 10: La organizacin del cdigo css

Figura 14. Agrupando las reglas segn su selector mantendremos

You might also like