Cascading Style Sheet
Cascading Style Sheet:Diseñe y dé estilo a sus páginas web.
Translated by Omar Gonzalez
Como prometí, este artículo es sobre Cascading Style Sheets (CSS), una herramienta clave para los diseñadores web de hoy.
Recientemente me preguntaron sobre CSS en el killersites web design forum y enlazando lo que escribí, decidí usar este medio para empezar este artículo.
CSS is el acrónimo para: ‘Cascading Style Sheets.’ CSS es una extensión para el HTML básico que permite que usted dé estilo a sus páginas web. Un ejemplo de un cambio de estilo sería hacer las palabras bold (negrilla). En el HTML standard se podría usar <b> como:
<b>Hágame negrilla</b>
Esto trabaja bien, y no hay nada malo, pero si usted quisiera cambiar todo el texto al que usted inicialmente hizo negrita a subrayado por ejemplo, entonces usted tendría que ir a cada lugar en la página y cambiar la etiquetas una por una.
Otra desventaja puede ser encontrada en este ejemplo: digamos que usted quiere hacer el texto anterior negrilla, además hacer el font Verdanna y cambiar su color a rojo, usted necesitaría bastante código alrededor del texto:
<font color="#FF0000" face="Verdana,
Arial, Helvetica, sans-serif"><strong>Este es Texto</strong></font>
esto aumenta el código y contribuye a hacer su HTML desordenado. Con CSS usted puede crear su propio estilo en otro lugar y poner allí todas sus propiedades, dándole un nombre único y luego un ‘tag’ a su HTML para aplicar estas propiedades de estilo:
<p class="myNuevoEstilo">Mi texto CSS con estilos
</p>
Y entre el <head></head> tags en el comienzo de su página web usted puede insertar este código que define el estilo que nosotros deseamos aplicar:
<style type="text/css">
<!--
.myNuevoEstilo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
-->
</style>
En el ejemplo anterior nosotros incluimos el código de la hoja de estilo dentro de la página. Esto está bien para pequeños proyectos o en las situación en donde los estilos que usted está definiendo serán usados en una sola página.
Hay veces que usted estará aplicando sus estilos a varias páginas, y no sería buena idea tener que copiar y pegar su código CSS en cada una de las páginas. Además del hecho de que usted estaría atestando su página con el mismo código CSS, usted también tendría que editar cada uno de estas páginas si usted quisiera hacer un cambio de estilo. Como con el JavaScript, en CSS usted puede definir/crear su propio estilo CSS en un archivo distinto, y luego vincularlo con la página a la que usted quiere aplicar el código:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
El código mostrado arriba encadena su hoja de estilo llamada ‘myFirstStyleSheet.css’ al documento de HTML. Usted coloca el código entre los tags <head> </head> de su página web.
Para crear un estilo en una archivo externo, todo que debe hacer es crear un documento de texto simple (En windows click con el botón derecho y seleccionar -> text document) y luego cambiarlo a un tipo de archivo de .txt a .css. Usted puede cambiar el tipo de archivo sólo cambiando la extensión del archivo. La extensión en windows le dice al ordenador qué clase de archivo es, y permite que el ordenador determine cómo tratar con el archivo; cuando por ejemplo usted trata de abrirlo.
Usted probablemente adivinó esto; los archivos CSS son sólo archivos de texto especialmente formateados , esto es lo mismo con las páginas de HTML. No hay nada especial o diferente en el archivo por si mismo, en su lugar es el contenido del archivo el que hace un documento de HTML y una página de CSS sean lo que ellos son.
Cuando esté trabajando con documentos CSS externos hay un par de puntos a recordar:
1. No coloque los siguientes tags en el archivo como si lo debería hacer si el código fuera interno a la pagina HTML.
<style type="text/css">
</style>
Desde que el link en su página web que conecta la página CSS a su HTML le dice al sistema que usted esta enlazando una pagina CSS, usted no necesita declarar este código en su pagina CSS. Eso es lo que los tags de arriba harian. En lugar de eso usted podría justamente adicionar su código CSS directamente a su página.
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
En el ejemplo de arriba he creado una serie de clases CSS clases que pueden ser aplicados a cualquier tag HTML como:
<p class="myNewStyle">My CSS styled
text</p>
o
<h2 class=”my3rdNewStyle”>My CSS
styled text</h2>
Usted notara que en el ejemplo de arriba apliqué un estilo CSS a un tag <h2>. Este tag ajusta el tamaño del texto que ya se encuentra presente en el navegador (Ej:10 pixels). Cuando usted aplica una clase CSS a este, el código CSS invalida el tamaño por default que usted normalmente consigue con el tag <h2>;es decir que CSS invalida el comportamiento previo especificado por default en el HTML!
En los anteriores ejemplos, yo tengo un código CSS con el cual defino clases CSS entonces ‘aplico’ estas clases a varios elementos en la página. Otra forma de aplicar CSS es redefinir globalmente un tag HTML, esto se podría lograr con:
h1 { font-family: Garamond, "Times New Roman",
serif; font-size: 200%; }
Lo que este código CSS hace es fijar el estilo y el font de todos los tags <h1> de una sola vez. Con ello usted no tiene que aplicar clases CSS como se hizo antes a ningún <h1>, ya que ellos son automáticamente afectados por la reglas de estilo del CSS.
Este es otro ejemplo donde yo le doy a toda la página mayores margenes:
body { margin-left: 15%; margin-right: 15%; }
Como usted puede ver, yo puedo redefinir cualquier tag y cambiar la manera como este luce! Esto puede ser muy poderoso:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
Como se esta definiendo en el anterior código, cualquier tag <div></div> tendrá ahora el color de fondo como‘rgb(204,204,255)’ y tendrá un padding (relleno) de 0.5em y un border de 1 pixel de color negro sólido.
Hay algunas cosas para explicar sobre lo dicho:
Color en CSS puede ser expresado en varias formas:
1. En Hex -> por ejemplo: #000000 – este
es negro y este: #FF0000 es rojo.
2. En rgb -> rgb(204,204,255) es un color azul purpura brillante.
3. Con el nombre de los colores como: ‘red’ or ‘blue’
Yo típicamente uso hex colores desde que estoy más familiarizado con ellos o en otros casos simplemente uso el nombre de los colores. El último ejemplo podría ser escrito como:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
Como se puede ver en lugar de ‘rgb(204,204,255)’ , yo especifiqué ‘green’.
Al usar RGB (RGB es el acrónimo para: ‘Red Green Blue’)
y Hex color, usted puede realmente conseguir el color exacto que desea, y siempre y cuando
conozca sus códigos. Afortunadamente muchos programas como (Dreamweaver) permiten localizar
fácilmente los colores a través de un color picker, lo que le evita a usted conocer los
valores para cada código.
En este último ejemplo le mostraré a usted un código CSS ‘muy util’ que le permite crear "link roll-over"( efectos) sin imágenes:
:link { color: rgb(0, 0, 153) } /* para links no visitados */
:visited { color: rgb(153, 0, 153) } /* para link visitados */
:hover { color: rgb(0, 96, 255) } /* cuando el mause está sobre link */
:active { color: rgb(255, 0, 102) } /* cuando el link is pulsado */
EL código mostrado hará que sus links cambien el color cuando alguien coloca el pointer del mouse sobre el, estos son efectos instantáneos sin usar imágenes! Una nota importante con este código es que la declaración del estilo debe estar en el orden correcto: "link-visited-hover-active", de otra forma puede fallar en algunos browsers.
CSS es muy poderoso y permite hacer cosas que no son posibles con el HTML estándard. Ahora es soportado muy bien en todos los browser modernos y debería ser una herramienta a aprender para todos los web diseñadores. Los ejemplos anteriores solo son una pequeña parte de lo que usted puede hacer con CSS, pero esta debería ser suficiente para que usted empiece a dar estilo a sus páginas. Como muchas tecnologías CSS tiene gran cantidad de opciones que muchas veces la gente no necesita usar frecuentemente o nunca del todo. No es conveniente caer en la trampa de que si existe una nueva característica entonces esta se debe siempre usar.
A propósito: El killersites forum Tiene una herramienta de búsqueda poderosa que vale la pena mencionar. Por ejemplo si usted escribe ‘CSS’ en la caja de búsqueda, usted conseguirá una lista de todos los posts concernientes a CSS. esta característica hace del foro una gran fuente de información creada por personas que continúan preguntando y respondiendo sobre los diferentes aspectos del diseño Web.
Un Comentario final:
Ahora que usted tiene lo básico cubierto, por que no tratar con mi CSS tutorial.
Un gran sitio para visitar es:Zen Garden. Este website es 'una demostración de lo que puede ser logrado visualmente usando CSS.'
Otro gran sitio CSS es Eric Meyer.
Si a usted le gustó el artículo y quiere saber más déjemelo saber!
Stefan Mischook.
Top