Usos de las CSS I

01 de enero de 2001
Valoración del artículo:
Describimos las distintas aplicaciones de las Hojas de Estilo en cascada. En este capítulo veremos las más sencillas.
CSS sirve para definir el aspecto de las páginas web, eso ya debe haber quedado claro. No obstante, hay diferentes niveles a los que podemos aplicar los estilos y es algo que vamos a describir ahora.

Hemos denominado a este apartado los diferentes usos de las CSS y relata justamente eso, los distintos niveles a los que podemos usar las Hojas de Estilo, que van desde definir los estilos de manera específica, para un pequeño fragmento de una página, hasta los estilos para todo un sitio web completo. Todo esto pasando por diversos otros niveles que resultarán de mucha utilidad también en nuestro día a día como diseñadores.

Vamos por orden, describiendo los puntos desde el más específico al más general, de manera que que también iremos aumentando la dificultad e importancia de los distintos usos. Hemos partido este capítulo en dos partes por su extensión y por haber varias formas distintas de aplicar estilos, aquí veremos las más sencillas y en el capítulo siguiente otras más complicadas pero más potentes.

Nota: CSS tiene una sintaxis propia. En este artículo ofreceremos diversos códigos de CSS, aunque no hemos explicado la sintaxis todavía.

A través de los próximos ejemplos veremos una pequeña introducción a la manera de escribir código CSS, pero lo explicaremos con detalle más adelante cuando tratemos la sintaxis CSS.

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde.

<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil.
</p>

Que tiene como resultado:

Esto es un párrafo con varias palabras en color verde. resulta muy fácil.

Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).

<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Que tiene como resultado:

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.

Estilo definido en una parte de la página

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Que tiene como resultado:

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilos

Hasta aquí hemos visto los usos de las CSS más específicos. Esta información continua en el próximo capítulo, en el que seguiremos viendo otras formas más avanzadas de usar las CSS.

Nota: Para aprender de una manera visual y práctica los diferentes usos de las CSS recomendamos ver la primera parte del videotutorial sobre las CSS.

Comentarios
Fueron enviados 10 comentarios al artículo
4 comentarios no revisados
6 comentarios revisados:
Por: Manuel Santana
16/2/2006
Quiero dar mis màs sinceros saludos y felicitaciones al staff de desarrollo web por el gran contributo que estan aportando ala comunidad hipanoparlate del mundo atravez de este portal. Que es una fuente del saber totalmente en Español y sobre todo muy hehca y explicada suerte. Otra cosa les felicito de nuevo por no pedirle ala gente que se inscriban algo stressante cuando te sirve una informacion rapida.
Salud y Suerte!

blank
Gracias
27/6/2009
Que tal !, soy nueva en este web y me parece excelente !!! más aún porque necesito y quiero aprender sobre las CSS ya que estoy en un proyecto de la universidad para hacer un boletín.

Gracias por la información y el manual a los colaboradores ya lo descargue. Se lee fácil pero no he tendio experiencia con las hojas de estilos.

Saludos
sencillo, entendible y práctico
Por: monroe
09/11/2009
hi, muy buena publicación

nosotros estamos llevando la materia de PROGRAMACION WEB y neceistamos aprender lo de las hojas de estilo, k la vdd no tenía muxa idea de cómo hacerlas

me confunde muxo eso del DIV y darle estilos, pero aki lo haces parecer muy simple y sencillo

buen trabajo (y)
observacion
Por: Gonza
22/2/2010
tienes un error de ortografia en el texto
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>


donde dice etilos, deberia de decir estilos
Agradecimiento
09/5/2010
Hola, muchas gracias por toda la información que difunden en esta web, en lo personal me ha servido muchisimo, sobre todo ahora que recién comienzo con esto de los estilos web, es mas, estoy cursando un ramo que tiene que ver con esto y mi profesor nos recomendo este sitio. Gracias
Buen comienzo
14/7/2010
Escribo para dar las gracias a este buen comienzo de un manual que se ve que está muy en condiciones.
Muchas gracias también por hacer que todo el mundo lo pueda ver, sin tener que descargar nada.
Muchas gracias, de verdad.

Manuales relacionados
Categorias relacionadas
El autor
Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com


Lectura recomendada
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...