Tutorial de CSS Comenzando con HTML + CSS

1. HTML 2. Aadir color 3. Aadir tipo de letra 4. Barra de navegacin 5. Dar estilo a los enlaces 6. L nea !ori"ontal #. $%% e&terna M's in(or)acin

*ste +reve t,torial est' pensado para a-,ellas personas -,e -,ieren co)en"ar a ,tili"ar $%% . n,nca !an escrito ,na !o/a de estilos $%%. 0o e&plica ),c!o so+re $%%. %e centra en c)o crear ,n arc!ivo HTML1 ,n arc!ivo $%% . c)o !acer -,e los dos (,ncionen /,ntos. 2na ve" (inali"ado este t,torial1 podr3is leer c,al-,iera de los otros t,toriales para darle )'s estilo a los arc!ivos HTML . $%%. Ta)+i3n podr3is ,tili"ar ,n editor de HTML o $%%1 para desarrollar sitios 4e+ )'s avan"ados. Al (inal del t,torial !a+r's !ec!o ,n arc!ivo HTML co)o 3ste5 6*nlace a la p'gina HTML (inal7 *l res,ltado ser' ,na p'gina HTML1 con colores . (or)ato1 todo desarrollado con $%%. Ten en c,enta -,e no -,iero decir -,e sea +onita. Las secciones co)o 3sta son opcionales. $ontienen e&plicaciones adicionales del cdigo HTML . $%% del e/e)plo. *l s )+olo de 8peligro91 sit,ado al principio1 indica -,e se trata de ,n )aterial )'s avan"ado -,e el resto.

Paso 1: Escribir el cdigo HTML

:ara este t,torial1 te s,giero -,e ,tilices las !erra)ientas )'s sencillas. :or e/e)plo1 0otepad ;4indo<s=1 Te&t*dit ;Mac= o HTML >it1 ser'n s,(iciente. 2na ve" co)prendido lo +'sico1 pro+a+le)ente se -,ieran ,tili"ar !erra)ientas )'s co)plicadas1 o incl,so progra)as co)erciales co)o %t.le Master1 Drea)<eaver o ?oLive. :ero para el desarrollo de ,na pri)era !o/a de estilos1 es )e/or no distraerse con caracter sticas avan"adas de otras !erra)ientas. 0o ,tilices procesadores de te&to co)o Microso(t 4ord , @pen@((ice. $on ellos1 nor)al)ente se generan arc!ivos -,e los navegadores no p,eden interpretar. :ara HTML . $%%1 lo Anico -,e necesita)os son arc!ivos en te&to plano. *l paso 1 consiste en a+rir t, editor de te&to ;0otepad1 Te&t*dit1 HTML >it o el -,e desees=1 co)en"ar con ,na ventana vac a . escri+ir lo sig,iente5

BCD@$TD:* !t)l :2BLE$ FGHH43$HHDTD HTML 4.I1HH*0FJ B!t)lJ B!eadJ BtitleJMi pri)era p'gina con estiloBHtitleJ BH!eadJ B+od.J BCGG MenA de navegacin del sitio GGJ B,l classKFnav+arFJ BliJBa !re(KFindice.!t)lFJ:'gina principalBHaJ BliJBa !re(KF)editaciones.!t)lFJMeditacionesBHaJ BliJBa !re(KFci,dad.!t)lFJMi ci,dadBHaJ BliJBa !re(KFenlaces.!t)lFJ*nlacesBHaJ BH,lJ BCGG $ontenido principal GGJ B!1JMi pri)era p'gina con estiloBH!1J BpJLBienvenido a )i pri)era p'gina con estiloC BpJ0o tiene i)'genes1 pero tiene estilo. Ta)+i3n tiene enlaces1 a,n-,e no te lleven a ningAn sitioM BpJDe+er a !a+er )'s cosas a-, 1 pero todav a no s3 -,3 poner. BCGG Nir)a . (ec!a de la p'gina1 Lslo por cortes aC GGJ BaddressJ$reada el 5 de a+ril de 2II4B+rJ por ) )is)o.BHaddressJ BH+od.J BH!t)lJ

*n realidad1 no es necesario escri+ir el cdigo5 p,edes copiarlo . pegarlo directa)ente en ,n editor. La pri)era l nea -,e aparece en el arc!ivo HTML1 le dice al navegador el tipo de HTML ;D@$TD:* signi(ica D@$,)ent TD:* G en espaol5 TE:@ de D@$,)ento=. *n este caso1 se trata de la versin 4.I1 de HTML. Las pala+ras -,e se enc,entran entre B . J se lla)an etiquetas ;tags= .1 co)o p,edes ver1 el doc,)ento est' entre las eti-,etas B!t)lJ . BH!t)lJ. *ntre B!eadJ . BH!eadJ !a. espacio para di(erentes tipos de in(or)acin -,e no aparecer'n en la pantalla. Hasta a!ora1 el doc,)ento slo contiene el t t,lo pero posterior)ente ta)+i3n se aadir' la !o/a de estilos de $%%. *l B+od.J es dnde se sitAa el te&to del doc,)ento. *n ,n principio1 c,al-,ier cosa -,e se colo-,e a! ser' )ostrado1 e&cepto el te&to -,e est3 dentro de las sig,ientes eti-,etas BCGG . GGJ1 las c,ales ),estran el contenido sit,ado en ese l,gar co)o ,n co)entario de re(erencia para nosotros )is)os. *l navegador la ignorar'. De las eti-,etas del e/e)plo1 B,lJ crea ,na 8lista desordenada91 es decir1 ,na lista en la c,al los ele)entos no est'n n,)erados. La eti-,eta BliJ indica el co)ien"o de ,n 8ele)ento

lista9. BpJ es ,n 8p'rra(o9. D BaJ es ,n 8enlace91 -,e es lo -,e crea ,n !iperv nc,lo.

*ditor )ostrando el cdigo HTML. %i -,ieres sa+er lo -,e signi(ican los no)+res -,e est'n entre BMJ1 ,n +,en sitio para e)pe"ar es $o)en"ando con HTML. Oeali"ar3 alg,nos co)entarios so+re la estr,ct,ra de la p'gina HTML -,e esta)os ,tili"ando de e/e)plo. 8,l9 representa ,na lista con ,n !iperv nc,lo por cada ele)ento. *sto )ostrar' n,estro 8)enA de navegacin del sitio9 con enlaces a otras p'ginas ;(icticias= del sitio 4e+. %,p,esta)ente1 todas las p'ginas de n,estro sitio 4e+ tienen ,n )enA si)ilar. Los ele)entos 8!19 . 8p9 co)ponen el Anico contenido de esta p'gina1 )ientras -,e la (ir)a al (inal ;8address9= ser' la )is)a para todas las p'ginas del sitio. @+serva -,e no !e cerrado los ele)entos FliF . FpF. *n HTML ;pero no en PHTML=1 se p,eden o)itir las eti-,etas BHliJ . BHpJ1 -,e (,e lo -,e !ice a-, 1 precisa)ente para !acer el te&to )'s sencillo de leer. :ero si se pre(iere p,eden ser aadidas. Qa)os a s,poner -,e va a ser ,na p'gina de ,n sitio 4e+ -,e tendr'n varias p'ginas si)ilares. $o)o es (rec,ente en p'ginas 4e+1 3sta tiene ,n )enA con enlaces a otras p'ginas en el sitio (icticio1 ,n contenido Anico . ,na (ir)a. A!ora1 selecciona 8?,ardar co)oM9 del )enA Arc!ivo1 ve !asta ,n directorioHcarpeta donde -,ieras g,ardar el doc,)ento ;el escritorio p,ede ser ,na opcin= . g,arda el arc!ivo co)o 8)ipagina.!t)l9. 0o cierres todav a el editor1 lo necesitar's otra ve". Desp,3s1 a+re el arc!ivo en ,n navegador de la sig,iente (or)a5 enc,entra el arc!ivo con t,

ad)inistrador de arc!ivos ;4indo<s *&plorer1 Ninder o Nire(o&= . !a" clic1 o do+le clic1 so+re el arc!ivo 8)ipagina.!t)l9. *l arc!ivo HTML de+er a a+rirse en t, navegador predeter)inado. ;%i no se a+re el doc,)ento1 a+re el navegador . arrastra el arc!ivo so+re 3l=. $o)o p,edes ver1 la p'gina tiene ,n aspecto +astante a+,rrido...

Paso 2: A adir algunos colores

:ro+a+le)ente est3s viendo te&to negro so+re ,n (ondo +lando1 pero esto depende de c)o est3 t, navegador con(ig,rado. :ara -,e la p'gina tenga algo )'s de encanto pode)os aadir alg,nos colores. ;De/a el navegador a+ierto1 lo ,tili"are)os )'s tarde=. $o)en"are)os con ,na !o/a de estilo interna en el arc!ivo HTML. M's adelante1 pondre)os el HTML . el $%% en arc!ivos di(erentes. La separacin de estos arc!ivos es reco)enda+le .a -,e (acilita la ,tili"acin de la )is)a !o/a de estilo para di(erentes arc!ivos HTML5 slo tienes -,e escri+ir la !o/a de estilo ,na ve". :ero en este paso1 va)os a de/arlo todo en el )is)o arc!ivo. 0ecesita)os aadir ,n ele)ento Bst.leJ en el arc!ivo HTML. La !o/a de estilo estar' en el interior de ese ele)ento. Qolva)os entonces a la ventana del editor . aada)os las sig,ientes cinco l neas en la parte de la ca+ecera del arc!ivo5
BCD@$TD:* !t)l :2BLE$ FGHH43$HHDTD HTML 4.I1HH*0FJ B!t)lJ B!eadJ BtitleJMi pri)era p'gina con estiloBHtitleJ !st"le t"#e$%te&t'css%( bod" ) color: #ur#le* bac+ground,color: -d.da/d 0 !'st"le( BH!eadJ B+od.J 6etc.7

Las l neas -,e tienes -,e aadir est'n )arcadas en ro/o. La pri)era l nea dice -,e eso es ,na !o/a de estilo . -,e est' escrita en $%% ;Fte&tHcssF=. La seg,nda l nea indica -,e !e)os aadido estilo al ele)ento F+od.F. La tercera l nea esta+lece el color del te&to co)o )orado . la sig,iente l nea lo -,e !ace es darle al (ondo ,na especie de a)arillo verdoso. Las !o/as de estilo en $%% est'n co)p,estas de reglas. $ada regla tiene tres partes5 1. el selector ;en el e/e)plo ser a5 8+od.9=1 el c,al le dice al navegador la parte del doc,)ento -,e se ver' a(ectada por la reglaR 2. la propiedad ;en el e/e)plo1 ScolorS . S+acTgro,ndGcolorS son a)+as propiedades=1 las c,ales especi(ican -,3 aspecto del diseo va a ca)+iarseR 3. . el valor ;Sp,rpleS . SUdVda3dS=1 el c,al da el valor para la propiedad. *l e/e)plo ),estra -,e es posi+le co)+inar las reglas. He)os esta+lecido dos propiedades1 por lo -,e pode)os tener dos reglas separadas5
+od. W color5 p,rple X +od. W +acTgro,ndGcolor5 UdVda3d X

.a -,e las dos reglas van a a(ectar al ele)ento +od.1 slo tene)os -,e escri+ir F+od.F ,na ve"1 . poner /,ntas las propiedades . valores. :ara o+tener )'s in(or)acin so+re selectores1 revisa el cap t,lo 2 de Lie & Bos. *l (ondo del ele)ento +od. ser' el (ondo para todo el doc,)ento. A los otros ele)entos ;p1 li1 addressM= no se les !a dado ningAn (ondo en concreto1 por lo -,e de (or)a predeter)inada no tendr'n ning,no ;o ser'n transparentes=. La propiedad ScolorS esta+lece el color del te&to -,e se enc,entra en el ele)ento +od.1 pero los otros ele)entos -,e se enc,entran dentro de +od. !eredar'n ese color1 a no ser -,e se especi(i-,e lo contrario. ;M's adelante aadire)os )'s colores=. A!ora g,arda el arc!ivo ;,tili"a 8?,ardar9 del )enA Arc!ivo= . v,elve a la ventana del navegador. %i !aces clic en FAct,ali"arF1 la p'gina Fa+,rridaF -,e se )ostra+a al principio1 pasar' a ser ,na p'gina con colores ;pero aAn sig,e siendo ),. a+,rrida=. Aparte de la lista de enlaces -,e se enc,entra al principio1 el te&to de+er a tener a!ora el color )orado so+re ,n (ondo de color a)arillo verdoso. :resentacin de la p'gina en el navegador tras aadirle colores. Los colores p,eden especi(icarse en la $%% de (or)as di(erentes. *l sig,iente e/e)plo ),estra dos de ellas5 por el no)+re ;8p,rple9= . por el cdigo !e&adeci)al ;8UdVda3d9=. Ha. apro&i)ada)ente 14I no)+res de colores . )'s de 16 )illones de colores disponi+les en cdigo !e&adeci)al. Agregar ,n to-,e de estilo1 o(rece )'s in(or)acin so+re esos cdigos.

Paso /: A adir ti#o de letra

@tra cosa -,e es ),. ('cil de !acer es aadir di(erentes tipos de letra para los diversos ele)entos de la p'gina. Qea)os el te&to con el tipo de letra 8?eorgia91 e&cepto la ca+ecera !11 -,e ir' con 8Helvetica9. *n la 4e+1 n,nca p,edes estar seg,ro de los tipos de letra -,e los ,s,arios tienen en s,s ordenadores1 por lo -,e aadire)os alg,nas alternativas5 si ?eorgia no est' disponi+le1 Ti)es 0e< Oo)an o Ti)es ta)+i3n p,eden valer1 . si ning,na de esas est' presente1 el navegador p,ede ,tili"ar c,al-,ier otro tipo de letra con seri(s. %i Helvetica no est'1 ?eneva1 Arial . %,n%ansGOeg,lar son +astante si)ilares1 . si ning,na de estas (,nciona1 el navegador p,ede escoge c,al-,ier otro tipo de letra -,e no sea seri(. Aade en el editor de te&to las sig,ientes l neas5
BCD@$TD:* !t)l :2BLE$ FGHH43$HHDTD HTML 4.I1HH*0FJ B!t)lJ B!eadJ BtitleJMi pri)era p'gina con estiloBHtitleJ Bst.le t.peKFte&tHcssFJ +od. W 1ont,1amil": 2eorgia3 %Times 4e5 6oman%3 Times3 seri1* color5 p,rpleR +acTgro,ndGcolor5 UdVda3d X 71 ) 1ont,1amil": Hel8etica3 2ene8a3 Arial3 SunSans,6egular3 sans,seri1 0 BHst.leJ BH!eadJ

B+od.J 6etc.7

%i g,ardas otra ve" el arc!ivo . !aces clic en FAct,ali"arF en el navegador1 de+er an aparecer tipos de letra di(erentes para el enca+e"ado . para el otro te&to. A!ora el te&to tiene ,n tipo de letra di(erente al del enca+e"ado.

Paso 9: A adir una barra de na8egacin

La lista -,e aparece al principio de la p'gina HTML ser' )'s adelante ,n )enA de navegacin. Alg,nos sitios 4e+ tienen ,n )enA al principio o en ,n lado de la p'gina1 . 3ste de+er a tenerlo ta)+i3n. :ondre)os ,no a la i"-,ierda1 .a -,e es )'s interesante ponerlo a! -,e arri+aM *l )enA .a est' en la p'gina HTML. *s la lista B,lJ -,e se enc,entra al principio. Los enlaces -,e tiene no (,ncionan .a -,e n,estro Fsitio 4e+F1 !asta el )o)ento1 slo tiene ,na p'gina1 pero eso no es i)portante a!ora. :or s,p,esto1 en ,n sitio 4e+ real no de+er a !a+er ningAn enlace roto. Tene)os -,e )over la lista a la i"-,ierda . colocar el resto del te&to ,n poco )'s !acia la derec!a1 para de/ar espacio para el )enA. Las propiedades de $%% -,e va)os a ,tili"ar son SpaddingGle(tS ;para )over el te&to del ele)ento +od.= . SpositionS ;para )over el )enA=. Ha. otras (or)as de !acerlo. %i +,scas 8col,)n9 . 8la.o,t9 en la p'gina Aprender $%%1 encontrar's alg,nas plantillas listas para ser ,tili"adas. :ero1 por el )o)ento1 3sta est' +ien. *n la ventana del editor1 aade las sig,ientes l neas al arc!ivo HTML5
BCD@$TD:* !t)l :2BLE$ FGHH43$HHDTD HTML 4.I1HH*0FJ B!t)lJ B!eadJ BtitleJMi pri)era p'gina con estiloBHtitleJ Bst.le t.peKFte&tHcssFJ +od. W #adding,le1t: 11em* (ontG(a)il.5 ?eorgia1 FTi)es 0e< Oo)anF1 Ti)es1 seri(R color5 p,rpleR +acTgro,ndGcolor5 UdVda3d X ul:na8bar ) #osition: absolute* to#: 2em* le1t: 1em* 5idt7: ;em 0 !1 W (ontG(a)il.5 Helvetica1 ?eneva1 Arial1 %,n%ansGOeg,lar1 sansGseri( X BHst.leJ BH!eadJ B+od.J 6etc.7

%i g,ardas otra ve" el arc!ivo . lo act,ali"as en el navegador1 de+er as tener la lista de enlaces a la i"-,ierda del te&to principal. A!ora el res,ltado parece ),c!o )'s interesante

YverdadZ *l te&to principal se !a )ovido !acia la derec!a . la lista de enlaces est' a!ora a la i"-,ierda en l,gar de estar arri+a. Sposition5 a+sol,teS indica -,e el ele)ento ,l est' sit,ado independiente)ente de c,al-,ier te&to -,e est3 antes o desp,3s en el doc,)ento. Sle(tS . StopS indican c,'l es la posicin. *n este caso1 est' a 2e) de la parte de arri+a de la ventana . a 1e) del lado i"-,ierdo. S2e)S signi(ica 2 veces el ta)ao del tipo de letra act,al. :or e/e)plo1 si el )enA se ),estra con ,n tipo de letra de 12 p,ntos1 entonces S2e)S es 24 p,ntos. Se)S es ,na ,nidad ),. Atil en $%% .a -,e se p,ede adaptar a,to)'tica)ente al tipo de letra -,e el ,s,ario est3 ,tili"ando. La )a.or a de los navegadores tienen ,n )enA para a,)entar o dis)in,ir el ta)ao de letra5 p,edes pro+arlo . ver la (or)a en la -,e el )enA a,)enta de ta)ao a la ve" -,e lo !ace el tipo de letra1 lo -,e no oc,rrir a si !,+i3ra)os ,tili"ado ,n ta)ao en p &eles.

Paso <: =ar estilo a los enlaces

*l )enA de navegacin todav a parece ,na lista en l,gar de ,n )enA. Qa)os a ca)+iar s, aspecto. [,itare)os los p,ntos -,e indican los di(erentes ele)entos de la lista . )overe)os los ele)entos a la i"-,ierda1 donde esta+an antes los p,ntos. Ta)+i3n le dare)os a cada ele)ento ,n (ondo +lanco . ,n c,adrado negro. ;Y:or -,3Z :or nada en partic,lar1 slo por-,e pode)os !acerlo=. 0o !e)os especi(icado el color de los enlaces1 va)os a aadirlo ta)+i3n5 ,tili"are)os el a",l para a-,ellos enlaces -,e el ,s,ario no !a visitado todav a1 . )orado para los enlaces -,e .a !a visitado5
BCD@$TD:* !t)l :2BLE$ FGHH43$HHDTD HTML 4.I1HH*0FJ B!t)lJ B!eadJ BtitleJMi pri)era p'gina con estiloBHtitleJ Bst.le t.peKFte&tHcssFJ +od. W paddingGle(t5 11e)R (ontG(a)il.5 ?eorgia1 FTi)es 0e< Oo)anF1 Ti)es1 seri(R color5 p,rpleR +acTgro,ndGcolor5 UdVda3d X ,l.nav+ar W list,st"le,t"#e: none* #adding: >* margin: >* position5 a+sol,teR top5 2e)R le(t5 1e)R <idt!5 \e) X !1 W (ontG(a)il.5 Helvetica1 ?eneva1 Arial1 %,n%ansGOeg,lar1 sansGseri( X ul:na8bar li ) bac+ground: 57ite* margin: >:<em >* #adding: >:/em*

border,rig7t: 1em solid blac+ 0 ul:na8bar a ) te&t,decoration: none 0 a:lin+ ) color: blue 0 a:8isited ) color: #ur#le 0 BHst.leJ BH!eadJ B+od.J 6etc.7

0or)al)ente1 los navegadores ),estran los !iperv nc,los s,+ra.ados . con color. Los colores son parecidos a los -,e especi(ica)os a-, 5 a",l para enlaces a p'ginas -,e no !as visitado todav a ;o visitaste !ace ),c!o tie)po=1 )orado para p'ginas -,e .a !as visitado. *n HTML1 los !iperv nc,los se crean con ele)entos BaJ1 por lo -,e para especi(icar el color1 necesita)os aadir ,na regla de estilo para FaF. :ara di(erenciar los enlaces visitados de los no visitados1 $%% proporciona dos Fpse,doGclassesF ;5linT . 5visited=. %e lla)an 8pse,doG classes9 para disting,irlas de los atributos de clase1 -,e aparecen directa)ente en HTML1 por e/e)plo1 classKFnav+arF.

Paso ?: A adir una l@nea 7orizontal

*l Alti)o ele)ento a aadir en la !o/a de estilo es ,na regla !ori"ontal para separar el te&to de la (ir)a -,e se enc,entra al (inal. 2tili"are)os S+orderGtopS para aadir ,na l nea p,nteada enci)a del ele)ento BaddressJ5
BCD@$TD:* !t)l :2BLE$ FGHH43$HHDTD HTML 4.I1HH*0FJ B!t)lJ B!eadJ BtitleJMi pri)era p'gina con estiloBHtitleJ Bst.le t.peKFte&tHcssFJ +od. W paddingGle(t5 11e)R (ontG(a)il.5 ?eorgia1 FTi)es 0e< Oo)anF1 Ti)es1 seri(R color5 p,rpleR +acTgro,ndGcolor5 UdVda3d X ,l.nav+ar W listGst.leGt.pe5 noneR padding5 IR )argin5 IR position5 a+sol,teR top5 2e)R le(t5 1e)R <idt!5 \e) X !1 W (ontG(a)il.5 Helvetica1 ?eneva1 Arial1 %,n%ansGOeg,lar1 sansGseri( X ,l.nav+ar li W +acTgro,nd5 <!iteR )argin5 I.5e) IR padding5 I.3e)R +orderGrig!t5 1e) solid +lacT X

,l.nav+ar a W te&tGdecoration5 none X a5linT W color5 +l,e X a5visited W color5 p,rple X address ) margin,to#: 1em* #adding,to#: 1em* border,to#: t7in dotted 0 BHst.leJ BH!eadJ B+od.J 6etc.7

A!ora1 .a !e)os ter)inado de darle estilo a la p'gina. Lo sig,iente es ver c)o se pone la !o/a de estilo en ,n arc!ivo di(erente para -,e de esta (or)a otras p'ginas p,edan ,tili"ar el )is)o estilo.

Paso A: Poner la 7oBa de estilo en un arc7i8o se#arado

A!ora tene)os ,n arc!ivo HTML con ,na !o/a de estilo en s, interior. :ero si n,estro sitio crece deseare)os aadir )'s p'ginas -,e co)partan el )is)o estilo. Ha. ,n )3todo )'s adec,ado -,e copiar la !o/a de estilo dentro de cada p'gina . -,e es5 colocar la !o/a de estilo en ,n arc!ivo separado1 !aciendo -,e todas las p'ginas est3n enla"adas a esa !o/a. :ara separar la !o/a de estilo del arc!ivo HTML1 necesita)os crear otro arc!ivo de te&to1 -,e est3 vac o. :,edes escoger F0,evoF del )enA Arc!ivo del editor para crear ,na ventana vac a. Desp,3s1 corta . pega en la n,eva ventana todo lo -,e !a. dentro del ele)ento Bst.leJ del arc!ivo HTML. 0o copies las eti-,etas Bst.leJ . BHst.leJ. ]stas pertenecen a HTML1 no a $%%. *n la n,eva ventana del editor1 de+er as tener la !o/a de estilo co)pleta5
+od. W paddingGle(t5 11e)R (ontG(a)il.5 ?eorgia1 FTi)es 0e< Oo)anF1 Ti)es1 seri(R color5 p,rpleR +acTgro,ndGcolor5 UdVda3d X ,l.nav+ar W listGst.leGt.pe5 noneR padding5 IR )argin5 IR position5 a+sol,teR top5 2e)R le(t5 1e)R <idt!5 \e) X !1 W (ontG(a)il.5 Helvetica1 ?eneva1 Arial1 %,n%ansGOeg,lar1 sansGseri( X ,l.nav+ar li W +acTgro,nd5 <!iteR )argin5 I.5e) IR padding5 I.3e)R

+orderGrig!t5 1e) solid +lacT X ,l.nav+ar a W te&tGdecoration5 none X a5linT W color5 +l,e X a5visited W color5 p,rple X address W )arginGtop5 1e)R paddingGtop5 1e)R +orderGtop5 t!in dotted X

*lige 8?,ardar co)oM9 del )enA Arc!ivo1 co)pr,e+a -,e est' en el )is)o directorioHcarpeta -,e el arc!ivo )ipagina.!t)l1 . g,arda la !o/a de estilo co)o 8)iestilo.css9. Q,elve a la ventana -,e ),estra el cdigo HTML. Borra todo lo -,e !a. desde la eti-,eta Bst.leJ !asta BHst.leJ1 a)+as incl,sive1 . ree)pl'"alo por ,n ele)ento BlinTJ de la sig,iente (or)a5
BCD@$TD:* !t)l :2BLE$ FGHH43$HHDTD HTML 4.I1HH*0FJ B!t)lJ B!eadJ BtitleJMi pri)era p'gina con estiloBHtitleJ !lin+ rel$%st"les7eet% 7re1$%miestilo:css%( BH!eadJ B+od.J 6etc.7

De esta (or)a1 se le indicar' al navegador -,e la !o/a de estilo se enc,entra en el arc!ivo lla)ado F)iestilo.cssF. Al no especi(icarse ningAn directorio1 el navegador )irar' en el )is)o directorio en el -,e se enc,entra el arc!ivo HTML. %i !as g,ardado el arc!ivo HTML . lo !as act,ali"ado en el navegador1 no de+er as apreciar ningAn ca)+io en el aspecto de la p'gina. ]sta sig,e g,ardando el )is)o estilo1 pero a!ora viene esta+lecido por el arc!ivo e&terno.

Oes,ltado (inal El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en vuestro sitio Web. (Quiz queris primero cambiarlos un poco !, pero la "orma #e realizar esto #epen#e #e vuestro provee#or #e $nternet.