Usos de las CSS I

  • Por
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 estilos

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

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

27/6/2009
Gracias
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

monroe

09/11/2009
sencillo, entendible y práctico
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)

Gonza

22/2/2010
observacion
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

dgoflowers

09/5/2010
Agradecimiento
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

junoklk

17/5/2010
pregunta
hola a todos y muchas felicidades , tengo una pregunta tengo un blog y quesiera modificar la plantilla de css la pregunta es que debo de hacer para modificarla con estos pasos

takuto

14/7/2010
Buen comienzo
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.

Enrique

28/7/2010
bien
muy buen post la vdd me haa ayudado bastante en mis tecnicas de maquetacion
la verdad me alegra que gente se ezfuerse en hacer paginas como estas la vdd les doy un 10 y sigan asi

Joseman

28/12/2010
Muy simple
No entiendo muy bien lo de CSS. A veces creo que se inventan lenguajes sólo con la intención de comercializar y vender más y más y más... El último ejemplo de esta iniciación se puede conseguir con html sin necesidad de más "idiomas":

<h3><b><font color=#000099>Estas etiquetas van en <i>azul y negrita</i></h3> <p> Seguimos dentro del DIV, luego permanecen los estilos.</font></b>

Yo sólo soy aficionado de tiempo libre; que no les pase ná a los estudiantes!.Saludos

july

14/9/2011
Por dónde debo comenzar?
Primero que todo felicitar a los creadores de esta página, está bastante completa y sobre todo tiene contenido de calidad.

He estado mirándome el manual de html y css, pero no sé si debo empezar directamente con el de javascript ya que sustituye los otros dos, o por el contrario debo empezar desde el principio.

Muchas gracias.

DuendeHidroponico

02/2/2016
Usos de las CSS
Javascript no sustituye a las CSS ni viceversa , yo estoy con CSS para más adelante pasar a Js .
Si queremos hacer una aplicación web por nosotros mismos lo que tenemos que saber y en el orden que presento es :
-HTML
- CSS
- JavaScript
- PHP

Si nos especializásemos en HTML y CSS sólo tendríamos que asociarnos con otros programadores que supiesen otros lenguajes sino es imposible.

Por tanto no vale la pena sustituir CSS por JavaScript no solo no vale la pena sino que además una vez que dominemos CSS nos resultará más fácil hacernos con JavaScript.