Estilos CSS

Tema 3. Aplicar estilos CSS

En etiquetas: para aplicar estilos CSS en etiquetas debe realizar los siguientes pasos. En
este ejemplo se va a hacer sobre la etiqueta BODY.
D clic en la opcin CSS, luego en Regla de destino seleccione <Nueva regla CSS>,
despus pulse Editar regla.

Aparece la siguiente ventana, en Tipo de selector escoja Etiqueta (redefine un elemento
HTML), luego en Nombre del selector seleccione la etiqueta, en este caso body, despus
d clic en Aceptar.



Emerge una nueva ventana, en la alternativa Categora, seleccione Tipo (opciones para el
tipo de fuente como letra, tamao, color, entre otros).
En Font-family elija el tipo Georgia, Times New Roman, Times, serif, en Font-size, opte
por el tamao 14 y en Color seleccione el rojo; posteriormente d clic en el botn Aplicar y
despus en Aceptar.



Visualice como queda aplicado el estilo, el texto de la pgina cambia automticamente de
color, tipo de fuente y tamao.

Una vez creada la regla CSS, ya es posible modificar los valores desde el panel de
propiedades, observe cmo.
En la Regla de destino seleccione la opcin body, en Fuente, elija el tipo de letra MS Serif,
New York, serif.




Automticamente el tipo de letra cambia.



Modifique ahora el Tamao a 36, aplique Negrita, Cursiva y Color azul, detalle como quedo
la configuracin del texto.


Si quiere aplicar un estilo slo al primer texto, es decir cambios a la etiqueta del encabezado,
realice lo siguiente.
En Propiedades d clic en <>HTML.







Ubique el puntero del mouse sobre la palabra a la cual quiere darle la etiqueta.


Luego en Formato d clic sobre cualquiera de las opciones de encabezado, en este ejemplo
se eligi la opcin Encabezado 1.


Mire como queda el texto ahora que se transform en una etiqueta de encabezado, ha
cambiado su apariencia.



Seguidamente d clic sobre CSS.



En Regla de destino elija <Nueva regla CSS> y luego d clic por ejemplo en Negrita (B).



En la nueva ventana en Tipo de selector, escoja la Etiqueta (redefine un elemento HTML)
y en Nombre del selector opte por h1, despus d clic en Aceptar.




Cercirese que en Regla de destino est seleccionada la etiqueta h1, luego modifique
cualquiera de las propiedades del texto, por ejemplo, aplique negrita, cursiva, cambie la
fuente a Arial, tamao 24 y color rojo. Observe que los cambios se ven reflejados nicamente
en el primer texto que fue al que se le asign la etiqueta del encabezado h1.

Ahora el estilo anterior puede aplicarlo a otros textos, por ejemplo a sitios web, pero primero
debe asignarle al texto la etiqueta del encabezado h1, para ello, dirjase a Propiedades y d
clic en <>HTML.








Elija el texto Sitio Web y en Formato haga clic sobre Encabezado 1.


Advierta que automticamente todos los cambios que tiene el estilo son aplicados de igual
forma al texto Sitio Web.






Teniendo los estilos creados, resulta posible cambiarles las propiedades, las cuales se
aplicaran a todos los textos a los cuales se les ha asignado el estilo.
D clic en CSS, en Regla de destino escoja h1, posteriormente modifique la fuente por
Courier New, Courier, monospace, negrita, cursiva, alineado a la derecha, tamao 16 y
color verde encendido, mire que todos los cambios son aplicados nicamente a los textos a
los cuales se les design la etiqueta h1.












Referencias
Servicio Nacional de Aprendizaje, SENA. (2009). Diseo web con Adobe
Dreamweaver CS3. Colombia: Autor.


Control del documento
Nombre Cargo Dependencia Fecha
Autor

Jos Geovanny
Angulo Imbachi
Instructor
Centro de
Teleinformtica y
Produccin
Industrial. Regional
Cauca
Diciembre
de 2013
Guillermo Alexander
Burgos Ibarra
Instructor
Centro de
Teleinformtica y
Produccin
Industrial. Regional
Cauca
Diciembre
de 2013
Adaptacin
Rachman Bustillo
Martnez
Guionista -
Lnea de
Produccin
Centro
Agroindustrial.
Regional Quindo
Diciembre
de 2013
Andrs Felipe
Velandia Espitia
Integracin
de
Contenidos y
Actividades
Centro
Agroindustrial.
Regional Quindo
Diciembre
de 2013