!"#$%$ '( )* +,-+./ 01.0#,$%$,2 3 4.15%+.

A lo laigo ue este tema vamos a apienuei a cambiai las piopieuaues uel texto y a cieai
estilos CSS, que peimiten asignai al texto clases y estilos cieauos poi nosotios
mismos, no pieuefiniuos.

'(6( 7%1%8+,192+#8%2 $,* +,-+.

Las caiacteiisticas uel texto seleccionauo pueuen sei uefiniuas a tiavs uel men
Foimato, y a tiavs uel inspectoi ue piopieuaues. vamos a vei las posibiliuaues que se
nos ofiecen a tiavs uel inspectoi ue piopieuaues, que estn clasificauas en uos
categoiias BTNL y CSS.

7.5,":%5.2 ;#,"$. *%2 01.0#,$%$,2 <=>?



Touas estas piopieuaues geneian etiquetas BTNL, que tienen un estilo poi uefecto en
el navegauoi. Peio al final, pouiemos peisonalizailas con CSS paia que se vean
exactamente como queiamos.

@.15%+./

Peimite seleccionai un foimato ue piiafo ya uefiniuo
paia BTNL, que pueue sei encabezauo, piiafo o
foimato pieueteiminauo. Los encabezauos se utilizan
paia establecei titulos uentio ue un uocumento. El
foimato pieueteiminauo siive paia que el texto
apaiezca tal cual ha siuo esciito, poi ejemplo, si entie
uos palabias se intiouucen vaiios espacios solo se
consiueia uno, peio al establecei el foimato
pieueteiminauo se iespetai que hayan vaiios
espacios en lugai ue solo uno. El texto noimal, uebeiia
ii siempie en piiafos, salvo que est en otios
elementos, como tablas o listas.

Es impoitante empleai coiiectamente los encabezauos, ya que se oiganizai mejoi el
conteniuo ue nuestia web, y es impoitante ue caia a buscauoies y visitantes. No te
pieocupes poi como se muestian esos encabezauos, iecueiua que siempie pouiemos
peisonalizailo.


)2+#*./

El boton B encieiia el texto en una etiqueta <stiong><stiong>, que poi uefecto se
muestia en negiita. El boton I, lo encieiia entie <em><em>, que poi uefecto se ve en
cuisiva.

Estas son las etiquetas ue iesaltauo ms habituales, peio existen otias que
encontiamos a tiavs uel men Texto. Poi ejemplo, subiayai el texto. Esta opcion no
apaiece en el panel ue Piopieuaues ya que ue noimal no suele utilizaise, uebiuo a que
los vinculos apaiecen subiayauos y el subiayai texto noimal pouiia hacei que el
usuaiio pensaia que se tiata ue un vinculo. Auems, emplea etiquetas que estn en
uesuso.

?#2+%/

Estos botones peimiten cieai listas con vietas o listas numeiauas. veiemos qu son
las listas en el siguiente apaitauo.

A%"B19%/

Estos uos botones peimiten sangiai el texto y anulai la sangiia. La sangiia es una
especie ue maigen que se establece a ambos lauos uel texto. En este caso los botones
se iefieien a sangiia a la izquieiua uel texto.

Si lo aplicamos sobie texto noimal, lo enceiiai en una etiqueta
<blockquote><blockquote>, que poi uefecto se muestia inuentaua hacia la ueiecha.
En cambio, al aplicailo sobie una lista, cieai una sublista uentio ue sta.

C88,$#,"$. % *%2 01.0#,$%$,2 7AA

Las hojas ue estilo en cascaua (CSS, Cascauing Style Sheets) nos peimiten foimateai
nuestia pgina y uaile el uiseo que queiamos. Pouemos cambiai uesue piopieuaues
simples, como el coloi ue fonuo, hasta cosas ms vistosas, como hacei que un bloque
se muestie en una posicion ueteiminaua o que un elemento cambie al pasai el cuisoi
sobie l. Piofunuizaiemos en esto ms auelante, poi sei una paite funuamental en la
cieacion ue pginas web.








Tenemos ms posibiliuaues a la hoia ue aplicai foimatos. Bieamweavei CSS nos
piopoiciona numeiosas funciones paia la cieacion ue estilos meuiante hojas ue
estilos en cascaua .



D,B*% $, $,2+#"./


Las ieglas CSS siiven paia uefinii a qu elemento
aplicamos el estilo, y como lo hacemos.
Pouemos uefinii una Nueva Regla, eliminaila o aplicai
una clase. veiemos esto antes ue acabai el tema.





)$#+%1 1,B*%/

Neuiante este boton acceuemos a las opciones paia la cieacion o mouificacion ue
estilos CSS, ue la iegla seleccionaua.

E%",* 7AA/

Este boton abie el panel CSS si no lo tuviiamos abieito.

Fuente: Peimite seleccionai un conjunto ue fuentes. Apaiecen conjuntos ue fuentes en
lugai ue una sola, ya que es posible que al establecei una nica fuente el usuaiio no la
tenga en su oiuenauoi. El seleccionai un conjunto ue fuentes posibilita que en el caso
ue que el usuaiio no tenga una fuente se aplique otia uel conjunto. Poi ejemplo, si
seleccionamos Aiial, Belvetica, sans-seiif, el texto se vei con la fuente Aiial, peio si
esta no existe se vei en Belvetica.








Estilo:
)2+#*./

Estos botones ponen el texto en negiita y cuisiva iespectivamente. Peio en este caso,
geneian un estilo css en linea.

C*#",%8#F"/

A tiavs ue estos botones es posible establecei la alineacion uel texto ue una ue estas
cuatio foimas uistintas: izquieiua, centiaua, ueiecha y justificaua.
Bemos ue aplicailo sobie el elemento que contiene el texto que queiemos alineai, poi
ejemplo sobie un piiafo.

=%5%G./

Peimite cambiai el tamao uel texto. El tamao lo pouemos inuicai en uiveisas
uniuaues, en pixeles, poicentajes uel tamao base, etc...

7.*.1/

Peimite seleccionai el coloi ue la fuente, ignoianuo el coloi que se haya uefiniuo en
las piopieuaues ue la pgina. Si no se ha estableciuo ningn coloi en las piopieuaues
ue la pgina ni aqui, el coloi uel texto poi uefecto sei el negio.

E%1% 01%8+#8%1 0H,$,2 1,%*#:%1 ,* )I,18#8#. 0%2. % 0%2. J"2,1+%1 +,-+. 3 5.$#4#8%1
2H2 01.0#,$%$,2(
)I,18#8#.2/ !"#$%$ '( J"2,1+%1 +,-+. 3 5.$#4#8%1 2H2 01.0#,$%$,2

0bjetivo
Piacticai las opeiaciones ue inseitai texto y mouificai sus piopieuaues.
Si no tienes abieito Bieamweavei, bielo paia iealizai el ejeicicio.
Si no apaiece el panel Aichivos, bielo a tiavs uel men ventana, opcion
Aichivos.
Selecciona el sitio Cocina en el panel Aichivos. Recueiua que cieamos este sitio
en el tema anteiioi.
Baz uoble clic sobie el uocumento quienes.htm, que apaiece en los aichivos
uesplegauos en el panel ue Aichivos. Se abiii el uocumento en Bieamweavei.
Sita el punto ue inseicion antes ue la piimeia letia ue la piimeia linea.
Esciibe el texto Quines somos y pulsa la tecla Intio paia saltai ue linea.
Si no apaiece el inspectoi ue piopieuaues, bielo a tiavs uel men ventana,
opcion Piopieuaues.
Baz clic en el texto Quines somos.
En Foimato, uel inspectoi ue piopieuaues BTNL, elige Encabezauo 1. 0bseiva
como ahoia el texto es ue mayoi tamao.
En la baiia ue heiiamientas ue uocumento, haz clic sobie la caja ue texto
Titulo, y esciibe Quines somos.
Baz clic sobie el boton uuaiuai ue la baiia ue heiiamientas.

'(K( ?#2+%2

Es posible inseitai texto a mouo ue lista. A su vez, la lista pueue sei numeiaua o con
vietas.

Paia que un texto que ya ha siuo intiouuciuo en el uocumento se convieita en una
lista, simplemente hay que seleccionailo y pulsai sobie la opcion ue lista
coiiesponuiente, ya sea a tiavs uel inspectoi ue piopieuaues, o a tiavs uel men
Foimato.

La lista con vietas (sin oiuenai) se selecciona a tiavs uel boton , mientias que
la lista numeiaua (oiuenaua) se selecciona a tiavs uel boton .

)I,50*. $, *#2+% "H5,1%$% L.1$,"%$%M/

1. Piepaiai la mochila
1. Sacai los libios ue ese uia
2. Intiouucii los libios uel uia siguiente
S. Poneime el pijama
4. Lavaime los uientes
S. Ponei el uespeitauoi

)I,50*. $, *#2+% 8." ;#G,+%2 L2#" .1$,"%1M/

Peiio
uato
Aves
Canaiio
Loio
Bmstei
Paia establecei listas aniuauas uentio ue otias como en los ejemplos anteiioies, es
necesaiio aauii una sangiia en los elementos ue la lista que se uesee que pasen a
foimai paite ue la lista aniuaua.

A tiavs uel men Foimato, opcion Lista, es posible acceuei a las piopieuaues ue la
lista seleccionaua. Se uebe seleccionai el texto ue la lista pieviamente o tenei el cuisoi
en algn lugai ue la lista paia que se active este submen.

En la ventana Piopieuaues ue lista se pueue especificai el tipo ue lista (con nmeios o
con vietas), el tipo ue nmeios o vietas que se utilizain (en la piopieuau Estilo:) y
en el caso ue las listas oiuenauas, el nmeio poi el que comenzai el iecuento.



'(N( 7%1%8+,1,2 ,20,8#%*,2

A veces necesitais intiouucii caiacteies especiales en tus pginas. Bebiuo al mouo
euitoi ue Biseo ue Bieamweavei esta taiea es muy sencilla utilizanuo el teclauo,
pouemos incluii caiacteies como , , i, o, .. ue foima ipiua. Peio si quieies ponei
uos espacios en blanco y los intiouuces poi teclauo, Bieamweavei no los cieai,
uebeis intiouuciilo uos veces utilizanuo la opcion que vamos a vei a continuacion.
Lo mismo ocuiiii con los caiacteies que no tenemos en el teclauo.

Baz clic en el men Inseitai y selecciona la opcion BTNL veis el uesplegable ue la
imagen infeiioi.



Solo coloca el cuisoi uel iaton sobie Caiacteies especiales y veis una lista ipiua ue
los caiacteies ms utilizauos que no pueuen sei intiouuciuos meuiante teclauo.

Paia intiouucii alguno ue estos caiacteies en tus textos solo seleccionalo en la lista y
apaiecei en la vista ue Biseo.

Si el caictei que buscas no se encontiase alli, haz clic en 0tio... y se abiii una
ventana uesue uonue pouis seleccionai caiacteies entie una lista bastante ms
amplia:



'('( )2+#*.2 7AA( J"+1.$H88#F"

Los estilos CSS se utilizan paia combinai una seiie ue atiibutos uel texto, como
pueuen sei el coloi o el tamao, ue mouo que no sea necesaiio asignai estos atiibutos
uno a uno caua vez que se uesee iepetii la asignacion ue esos mismos valoies a otias
paites uel texto.

Tambin peimiten, como veiemos ms auelante, uefinii picticamente cualquiei
piopieuau ue los elementos que contenuin nuestia web. Pouemos uefinii los estilos
paia ueteiminauas etiquetas, como encabezauos (<h1>, <h2>...), piiafos (<p>),
enlaces (<a>), etc... lo que foimateai touas las apaiiciones ue esta etiqueta en el
mbito uel estilo.

Tambin pouemos cieai clases. Algo asi como uefinii un estilo y uaile un alias. El
estilo afectai a touos los elementos a los que apliquemos esa clase.

Poi otio lauo, al cieai el estilo, pouemos uefiniilo como un estilo en linea (afectai
solo al elemento seleccionauo) o cieai una iegla, que pueue afectai a toua la pgina, o
a touo el sitio si la guaiuamos en un aichivo CSS.

0n estilo CSS no es ms que un conjunto ue ieglas ue foimato que contiolan el aspecto
uel conteniuo ue una pgina Web. Los estilos CSS apoitan gian flexibiliuau y contiol al
aspecto exacto que se busca en una pgina, uesue la posicion piecisa ue elementos
hasta el uiseo ue fuentes y estilos concietos.

0na ue las gianues ventajas ue los estilos CSS iesiue en que cuentan con una
capaciuau simple ue actualizacion; cuanuo actualiza un estilo CSS, el foimato ue touos
los uocumentos que usan ese estilo se actualiza automticamente.

'(O( 71,%1 H" ,2+#*. 0,12."%*#:%$.

Con Bieamweavei CSS, las caiacteiisticas que apliquemos a un texto a tiavs uel
Inspectoi ue piopieuaues CSS cieain automticamente estilos CSS. Aunque tenemos
que ueciuii a qu elementos afecta.

vemoslo:
71,%1 H" ,2+#*. ," *9",%(

Poi ejemplo, si queiemos que un ueteiminauo estilo afecte a un nico elemento y en
un caso puntual, pouemos cieailo como un estilo en linea. Esto inciustai el estilo en
la piopia etiqueta BTNL, poi lo que si alguna vez queiemos mouificailo, uebeiemos
ue ii al elemento.

En el Inspectoi ue piopieuaues CSS, en Regla ue uestino, seleccionamos <Nuevo estilo
en linea>.







A continuacion, uefinimos las piopieuaues uel estilo.

Insistimos que esta opcion es la menos flexible y uebe empelaise solo en casos
concietos, cuanuo el estilo no se iepita, y no tenga sentiuo manteneilo si boiiamos
esa etiqueta concieta.

71,%1 H"% 1,B*% $, ,2+#*./

vamos a cieai un estilo que afecte a touas las etiquetas ue un tipo, solo a las que estn
conteniuas en ueteiminauos elementos o una clase.

Paia ello, En el Inspectoi ue piopieuaues CSS, en Regla ue uestino, seleccionamos
<Nueva iegla CSS>.



Ahoia intentamos mouificai sus piopieuaues o pulsamos en Euitai iegla. En cualquiei
caso nos apaiecei la siguiente ventana:



=#0. $, 2,*,8+.1/ el tipo ue selectoi es funuamental, ya que ueteimina a qu
elementos afectai el estilo.
Pouemos elegii entie cuatio tipos ue selectoi:



7*%2,. Es el alias que tomai el estilo, y paia que afecte a un elemento, uebemos ue
aplicaile esa clase.

El nombie ue la clase va pieceuiuo poi un punto, y si no lo ponemos lo hai
Bieamweavei.

JP. El iu es un atiibuto html, que pouemos uai a cualquiei elemento, y que lo iuentifica
ue foima nica y concieta. Poi tanto, el estilo solo pueue afectai a un elemento en
caua pgina, al que tenga ese IB. En el selectoi, se esciibe pieceuiuo poi #.

)+#QH,+%. El estilo afectai a touas las apaiiciones ue la etiqueta BTNL inuicaua.

7.50H,2+.. Combina los selectoies anteiioies. Poi ejemplo, !"#$%&'(&)* afecta
nicamente a los piiafos con la clase iesaltauo, peio no a los encabezauos con esa
clase. Tambin se pueuen aniuai. Poi ejemplo +',-$.+ '0 ! afecta solo a los piiafos
que estn uentio ue un elemento ue una lista con el iu -$.1.

R.5S1, $,* 2,*,8+.1: esta opcion peimite asignai un nombie al selectoi.


Bepenue intimamente uel tipo ue selectoi, pues aqui intiouuciiemos el nombie ue la
clase, iu, etiqueta, etc... Poi uefecto, inuicai el elemento seleccionauo, peio pouemos
esciibii el que queiamos.

P,4#"#8#F" $, 1,B*%/ esta opcion nos peimite guaiuai el estilo en el uocumento actual
o en un nuevo aichivo .css.

Bepenue intimamente uel tipo ue selectoi, pues aqui intiouuciiemos el nombie ue la
clase, iu, etiqueta, etc... Poi uefecto, inuicai el elemento seleccionauo, peio pouemos
esciibii el que queiamos.
P,4#"#8#F" $, 1,B*%/ esta opcion nos peimite guaiuai el estilo en el uocumento actual
o en un nuevo aichivo .css.


Si elegimos LAF*. ,2+, $.8H5,"+.M la uefinicion uel estilo se guaiuai en la cabeceia
ue la pgina, poi lo que solo estai uisponible uentio ue sta.

Si elegimos LRH,;% T.I% $, ,2+#*.M se cieai un aichivo CSS. Pouiemos empleai estos
estilos en cualquiei pgina uel sitio solo con vinculai la hoja ue estilos. Bebeiemos ue
inuicai uonue guaiuai el aichivo css que contenui los estilos. Noimalmente en la
misma caipeta que las pginas.

Si ya estamos utilizanuo una hoja ue estilo, pouiemos seleccionaila aqui y los estilos
se aauiin ella.

'(U( P,4#"#1 . ,$#+%1 H" ,2+#*.

0na vez cieauo, tenemos que uefinii las piopieuaues que foimain el estilo.

Paia ello, encontiamos las opciones bsicas en el Inspectoi ue piopieuaues CSS.



0bseiva que la iegla que estamos euitanuo es la que apaiece en Regla ue uestino. Si
queiemos euitai otia iegla, hacemos clic en el uesplegable y la seleccionamos, ya que
una vez cieauas se van aauienuo a la lista.



















Si queiemos acceuei a touas las piopieuaues, pouemos pulsai en el boton Euitai iegla.
Se abiii la ventana Befinicion ue iegla.



Aqui encontiamos touas las piopieuaues CSS
agiupauas poi Categoiias. Las veiemos ms
auelante.

Esta ventana es la opcion ms comoua naua ms
cieai el estilo, cuanuo tenemos que cambiai
vaiias piopieuaues.

Paia pequeos cambios que no pouamos hacei
uesue el Inspectoi ue piopieuaues y otias
funciones extias, uisponemos uel panel Estilos
CSS. Pouemos acceuei a l uesue el men
ventanas o pulsanuo en el boton Panel CSS.











En la paite supeiioi vemos las piopieuaues que afectan al elemento, en meuio las
ieglas aplicauas, y en la paite infeiioi las piopieuaues uel estilo actual.

Tambin se pueue cambiai el nombie uel estilo, es mejoi que el estilo tenga un
nombie que inuique a qu tipo ue texto se va a aplicai. Paia ello acceuemos al panel
Estilos, hacemos clic con el boton ueiecho sobie el estilo y seleccionamos la opcion
Cambiai nombie... Apaiecei un cuauio ue uilogo paia que intiouuzcamos el nuevo
nombie como la imagen infeiioi.



Nota: En los piimeios ejeicicios uel cuiso iiemos aplicanuo piopieuaues sin habei
explicauo pieviamente caua una. Ns auelante uetallaiemos qu hacen las
piopieuaues existentes. No obstante, sabienuo un poco ue ingls iesultan muy
intuitivas.






















'(V( C0*#8%1 H" ,2+#*.

En el caso ue habei cieauo una iegla paia una etiqueta, no sei necesaiio aplicaila, ya
que uiiectamente afecta a touas las etiquetas ue ese tipo.

Poi tanto lo que tenuiemos que aplicai sein los estilos que uefinamos como clases.
veamos como haceilo:

En el uocumento, selecciona el texto al que ueseas aplicai el estilo CSS. Si situamos el
punto ue inseicion, peio sin seleccionai, el estilo se aplicai a la piimeia etiqueta que
contenga el texto (poi ejemplo el piiafo).

En el inspectoi ue Piopieuaues seleccionamos la opcion CSS y seleccionamos el estilo
cieauo poi nosotios ue la lista que apaiece al uesplegai el cuauio Regla ue Bestino.
Besue las piopieuaues BTNL tambin pouemos haceilo, utilizanuo el uesplegable
Clase.





Si queiemos aplicai la clase a una etiqueta, pouemos hacei clic ueiecho sobie ella en
la baiia ue estauo, y seleccionai la clase ueseaua uel men Establecei clase.


Touas las ieglas uisponibles apaiecen al uesplegai el submen Foimato Estilos CSS.

0bseiva que existe una clase llamaua ninguna. Lo que hace esta opcion es quitai la
clase al elemento.

La baiia ue estauo nos ayuuai a sabei qu clase tiene aplicaua un elemento. La clase
apaiecei junto al nombie ue la etiqueta, sepaiaua poi un punto.



'(W( <.I%2 $, ,2+#*.2

)-0.1+%1 ,2+#*.2

Es fiecuente que comencemos
cieanuo los estilos en la piopia
pgina, y uespus al vei que los
necesitaiemos en otias pginas uel
sitio, los pasemos a una hoja ue
estilo. Bieamweavei nos peimite
expoitai estos estilos fcilmente.

0tilizamos el panel Estilos CSS
(Nays + F11). En este caso nos sei
ms til la vista Touo. Agiupauos en
<style> encontiamos los estilos
cieauos en la pgina.


Seleccionamos las ieglas que
queiamos expoitai, y en las piopieuaues uel panel (el icono ue la esquina supeiioi
ueiecha) seleccionamos Novei Reglas CSS....

Nos apaiecei la siguiente ventana:



Encontiamos uos opciones paia ubicai los estilos:

<.I% $, ,2+#*.2 nos peimite seleccionai una hoja ya existente. Las ieglas se
aauiin a ella.
!"% "H,;% T.I% $, ,2+#*.2... cieai una hoja nueva paia las ieglas expoitauas.
Bebeiemos ue inuicai uonue queiemos guaiuai el aichivo, noimalmente en la
misma caipeta que las pginas.

Los estilos seleccionauos se quitain ue la pgina actual, y se vinculai con la hoja ue
estilos.



X#"8H*%1 H"% T.I% $, ,2+#*.2(

Si queiemos utilizai una hoja ue estilos ya existente en nuestia pgina, uebemos
vinculaila.

Pouemos haceilo uesue el men @.15%+. )2+#*.2 7AA C$IH"+%1 T.I% $,
,2+#*.2... o uesue el panel Estilos CSS. Lo nico que tenuiemos que hacei es
seleccionai el aichivo a vinculai. Las hojas ue estilo tienen la extension .css.

Recueiua, que aunque en piincipio Bieamweavei nos peimite elegii cualquiei aichivo
uel equipo, touos los aichivos que utilicemos ueben ue estai uentio uel sitio.