Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Comenzando Con HTML + CSS
Comenzando Con HTML + CSS
ComenzandoconHTML+CSS
Idiomea Esto es una traduccin. Puede contener errores o estar desfasada respecto a la versin inglesa. Traductor: Encarnacin Quesada Ruiz (Oficina
Espaola del W3C)
TUTORIAL DE
CSS
COMENZANDO
CON HTML +
CSS
Este breve tutorial est pensado para aquellas personas que quieren comenzar a utilizar CSS y nunca han
http://www.w3.org/Style/Examples/011/firstcss.es.html
1/14
13/4/2015
ComenzandoconHTML+CSS
Meditaciones
Miprimerapginacon
estilo
Miciudad
Bienvenidoamiprimerapginaconestilo!
Enlaces
Notieneimgenes,perotieneestilo.Tambin
tieneenlaces,aunquenotellevenaningnsitio.
Pginaprincipal
Deberahabermscosasaqu,perotodavanos
quponer.
Creadael5deabrilde2004
pormmismo.
El resultado ser una pgina HTML, con colores y formato, todo desarrollado con CSS.
http://www.w3.org/Style/Examples/011/firstcss.es.html
2/14
13/4/2015
ComenzandoconHTML+CSS
El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar
con una ventana vaca y escribir lo siguiente:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01//EN">
<html>
<head>
<title>Miprimerapginaconestilo</title>
</head>
<body>
<!Mendenavegacindelsitio>
<ulclass="navbar">
<li><ahref="indice.html">Pginaprincipal</a>
<li><ahref="meditaciones.html">Meditaciones</a>
<li><ahref="ciudad.html">Miciudad</a>
<li><ahref="enlaces.html">Enlaces</a>
</ul>
<!Contenidoprincipal>
<h1>Miprimerapginaconestilo</h1>
<p>Bienvenidoamiprimerapginaconestilo!
<p>Notieneimgenes,perotieneestilo.
Tambintieneenlaces,aunquenotellevena
ningnsitio
<p>Deberahabermscosasaqu,perotodavanos
quponer.
<!Firmayfechadelapgina,sloporcortesa!>
<address>Creadael5deabrilde2004<br>
pormmismo.</address>
</body>
</html>
http://www.w3.org/Style/Examples/011/firstcss.es.html
3/14
13/4/2015
ComenzandoconHTML+CSS
Vamos a suponer que va a ser una pgina de un sitio Web que tendrn varias pginas similares. Como es
frecuente en pginas Web, sta tiene un men con enlaces a otras pginas en el sitio ficticio, un contenido
nico y una firma.
Ahora, selecciona Guardar como del men Archivo, ve hasta un directorio/carpeta donde quieras
guardar el documento (el escritorio puede ser una opcin) y guarda el archivo como mipagina.html. No
cierres todava el editor, lo necesitars otra vez.
Despus, abre el archivo en un navegador de la siguiente forma: encuentra el archivo con tu
administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, o doble clic, sobre el archivo
mipagina.html. El archivo HTML debera abrirse en tu navegador predeterminado. (Si no se abre el
documento, abre el navegador y arrastra el archivo sobre l).
Como puedes ver, la pgina tiene un aspecto bastante aburrido...
http://www.w3.org/Style/Examples/011/firstcss.es.html
4/14
13/4/2015
ComenzandoconHTML+CSS
Las lneas que tienes que aadir estn marcadas en rojo. La primera lnea dice que eso es una hoja de estilo y
que est escrita en CSS ("text/css"). La segunda lnea indica que hemos aadido estilo al elemento "body". La
tercera lnea establece el color del texto como morado y la siguiente lnea lo que hace es darle al fondo una
especie de amarillo verdoso.
Las hojas de estilo en CSS estn compuestas de reglas. Cada regla tiene tres partes:
1. el selector (en el ejemplo sera: body), el cual le dice al navegador la parte del documento que se ver afectada por
la regla;
2. la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qu aspecto
del diseo va a cambiarse;
3. y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.
El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por lo que podemos tener
dos reglas separadas:
body{color:purple}
body{backgroundcolor:#d8da3d}
ya que las dos reglas van a afectar al elemento body, slo tenemos que escribir "body" una vez, y poner juntas las
propiedades y valores. Para obtener ms informacin sobre selectores, revisa el captulo 2 de Lie & Bos.
El fondo del elemento body ser el fondo para todo el documento. A los otros elementos (p, li, address)
http://www.w3.org/Style/Examples/011/firstcss.es.html
5/14
13/4/2015
ComenzandoconHTML+CSS
no se les ha dado ningn fondo en concreto, por lo que de forma predeterminada no tendrn ninguno (o
sern transparentes). La propiedad 'color' establece el color del texto que se encuentra en el elemento
body, pero los otros elementos que se encuentran dentro de body heredarn ese color, a no ser que se
especifique lo contrario. (Ms adelante aadiremos ms colores).
Ahora guarda el archivo (utiliza Guardar del men Archivo) y vuelve a la ventana del navegador. Si
haces clic en "Actualizar", la pgina "aburrida" que se mostraba al principio, pasar a ser una pgina con
colores (pero an sigue siendo muy aburrida). Aparte de la lista de enlaces que se encuentra al principio, el
texto debera tener ahora el color morado sobre un fondo de color amarillo verdoso.
6/14
13/4/2015
ComenzandoconHTML+CSS
Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberan aparecer tipos de letra
diferentes para el encabezado y para el otro texto.
7/14
13/4/2015
ComenzandoconHTML+CSS
La lista que aparece al principio de la pgina HTML ser ms adelante un men de navegacin. Algunos sitios
Web tienen un men al principio o en un lado de la pgina, y ste debera tenerlo tambin. Pondremos uno a
la izquierda, ya que es ms interesante ponerlo ah que arriba
El men ya est en la pgina HTML. Es la lista <ul> que se encuentra al principio. Los enlaces que tiene
no funcionan ya que nuestro "sitio Web", hasta el momento, slo tiene una pgina, pero eso no es
importante ahora. Por supuesto, en un sitio Web real no debera haber ningn enlace roto.
Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco ms hacia la derecha, para
dejar espacio para el men. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover el
texto del elemento body) y 'position' (para mover el men).
Hay otras formas de hacerlo. Si buscas column y layout en la pgina Aprender CSS, encontrars
algunas plantillas listas para ser utilizadas. Pero, por el momento, sta est bien.
En la ventana del editor, aade las siguientes lneas al archivo HTML:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01//EN">
<html>
<head>
<title>Miprimerapginaconestilo</title>
<styletype="text/css">
body{
paddingleft:11em;
fontfamily:Georgia,"TimesNewRoman",
Times,serif;
color:purple;
backgroundcolor:#d8da3d}
ul.navbar{
position:absolute;
top:2em;
left:1em;
width:9em}
h1{
fontfamily:Helvetica,Geneva,Arial,
SunSansRegular,sansserif}
</style>
</head>
<body>
[etc.]
Si guardas otra vez el archivo y lo actualizas en el navegador, deberas tener la lista de enlaces a la izquierda
del texto principal. Ahora el resultado parece mucho ms interesante verdad?
http://www.w3.org/Style/Examples/011/firstcss.es.html
8/14
13/4/2015
ComenzandoconHTML+CSS
El texto principal se ha movido hacia la derecha y la lista de enlaces est ahora a la izquierda en lugar de estar arriba.
'position: absolute' indica que el elemento ul est situado independientemente de cualquier texto que est antes o
despus en el documento. 'left' y 'top' indican cul es la posicin. En este caso, est a 2em de la parte de arriba de la
ventana y a 1em del lado izquierdo.
'2em' significa 2 veces el tamao del tipo de letra actual. Por ejemplo, si el men se muestra con un tipo de letra de
12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy til en CSS ya que se puede adaptar automticamente
al tipo de letra que el usuario est utilizando. La mayora de los navegadores tienen un men para aumentar o disminuir
el tamao de letra: puedes probarlo y ver la forma en la que el men aumenta de tamao a la vez que lo hace el tipo de
letra, lo que no ocurrira si hubiramos utilizado un tamao en pxeles.
9/14
13/4/2015
ComenzandoconHTML+CSS
fontfamily:Georgia,"TimesNewRoman",
Times,serif;
color:purple;
backgroundcolor:#d8da3d}
ul.navbar{
liststyletype:none;
padding:0;
margin:0;
position:absolute;
top:2em;
left:1em;
width:9em}
h1{
fontfamily:Helvetica,Geneva,Arial,
SunSansRegular,sansserif}
ul.navbarli{
background:white;
margin:0.5em0;
padding:0.3em;
borderright:1emsolidblack}
ul.navbara{
textdecoration:none}
a:link{
color:blue}
a:visited{
color:purple}
</style>
</head>
<body>
[etc.]
Normalmente, los navegadores muestran los hipervnculos subrayados y con color. Los colores son parecidos a los que
especificamos aqu: azul para enlaces a pginas que no has visitado todava (o visitaste hace mucho tiempo), morado para
pginas que ya has visitado.
En HTML, los hipervnculos se crean con elementos <a>, por lo que para especificar el color, necesitamos aadir
una regla de estilo para "a". Para diferenciar los enlaces visitados de los no visitados, CSS proporciona dos "pseudoclasses" (:link y :visited). Se llaman pseudo-classes para distinguirlas de los atributos de clase, que aparecen
directamente en HTML, por ejemplo, class="navbar".
10/14
13/4/2015
ComenzandoconHTML+CSS
body{
paddingleft:11em;
fontfamily:Georgia,"TimesNewRoman",
Times,serif;
color:purple;
backgroundcolor:#d8da3d}
ul.navbar{
liststyletype:none;
padding:0;
margin:0;
position:absolute;
top:2em;
left:1em;
width:9em}
h1{
fontfamily:Helvetica,Geneva,Arial,
SunSansRegular,sansserif}
ul.navbarli{
background:white;
margin:0.5em0;
padding:0.3em;
borderright:1emsolidblack}
ul.navbara{
textdecoration:none}
a:link{
color:blue}
a:visited{
color:purple}
address{
margintop:1em;
paddingtop:1em;
bordertop:thindotted}
</style>
</head>
<body>
[etc.]
Ahora, ya hemos terminado de darle estilo a la pgina. Lo siguiente es ver cmo se pone la hoja de estilo en
un archivo diferente para que de esta forma otras pginas puedan utilizar el mismo estilo.
http://www.w3.org/Style/Examples/011/firstcss.es.html
11/14
13/4/2015
ComenzandoconHTML+CSS
Puedes escoger "Nuevo" del men Archivo del editor para crear una ventana vaca.
Despus, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo
HTML. No copies las etiquetas <style> y </style>. stas pertenecen a HTML, no a CSS. En la nueva ventana
del editor, deberas tener la hoja de estilo completa:
body{
paddingleft:11em;
fontfamily:Georgia,"TimesNewRoman",
Times,serif;
color:purple;
backgroundcolor:#d8da3d}
ul.navbar{
liststyletype:none;
padding:0;
margin:0;
position:absolute;
top:2em;
left:1em;
width:9em}
h1{
fontfamily:Helvetica,Geneva,Arial,
SunSansRegular,sansserif}
ul.navbarli{
background:white;
margin:0.5em0;
padding:0.3em;
borderright:1emsolidblack}
ul.navbara{
textdecoration:none}
a:link{
color:blue}
a:visited{
color:purple}
address{
margintop:1em;
paddingtop:1em;
bordertop:thindotted}
Elige Guardar como del men Archivo, comprueba que est en el mismo directorio/carpeta que el
archivo mipagina.html, y guarda la hoja de estilo como miestilo.css.
Vuelve a la ventana que muestra el cdigo HTML. Borra todo lo que hay desde la etiqueta <style> hasta
</style>, ambas inclusive, y reemplzalo por un elemento <link> de la siguiente forma:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01//EN">
<html>
<head>
<title>Miprimerapginaconestilo</title>
<linkrel="stylesheet"href="miestilo.css">
</head>
<body>
[etc.]
http://www.w3.org/Style/Examples/011/firstcss.es.html
12/14
13/4/2015
ComenzandoconHTML+CSS
De esta forma, se le indicar al navegador que la hoja de estilo se encuentra en el archivo llamado
"miestilo.css". Al no especificarse ningn directorio, el navegador mirar en el mismo directorio en el que se
encuentra el archivo HTML.
Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberas apreciar ningn
cambio en el aspecto de la pgina. sta sigue guardando el mismo estilo, pero ahora viene establecido por el
archivo externo.
Resultado final
El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en vuestro sitio Web. (Quiz queris
primero cambiarlos un poco), pero la forma de realizar esto depende de vuestro proveedor de Internet.
MS INFORMACIN
Para ver una introduccin de CSS, consulta el captulo 2 de Lie & Bos, o la Introduccin a CSS de Dave Raggett.
Se puede obtener ms informacin, incluido ms tutoriales, en la pgina Aprender CSS.
IDIOMEA
Deutsch English Espaol Franais Bahasa Indonesia Italiano Nederlands Polski Portugus (Brasileiro) Slovenina
Acerca de las traducciones
http://www.w3.org/Style/Examples/011/firstcss.es.html
13/14
13/4/2015
ComenzandoconHTML+CSS
http://www.w3.org/Style/Examples/011/firstcss.es.html
14/14