DESARROLLADOR

Como usar CSS - Parte I


En este artículo discutiremos cómo utilizar CSS en nuestras páginas y algunos ejemplos para dar formato sencillo a nuestro web.

CSS proviene del término "Cascading Style Sheet" y es un método muy eficiente para dar formato a nuestro diseño. Como sabemos, si queremos formatear alguna parte de nuestra página es necesario entrar un código parecido al siguiente:

<font size="1">Texto Pequeño</font>



Lo que resulta en lo siguiente:

Texto Pequeño



No obstante, si queremos repetir el mismo formato a través de toda una página, tenemos la dificultad que tenemos que incluir el mismo formato en todo el código. Al utilizar CSS, tenemos la ventaja que podemos definir cada formato o cada sección de la página en un sólo lugar, sin la necesidad de repetir el código una y otra vez, efectivamente reduciendo el tamaño de la página.

Veamos un ejemplo. Supongamos que en nuestra página queremos que los tags H1 y H2 tengan un formato específico. Para lograr esto, definimos un <style> tag dentro del tag HEAD de nuestra página:

<head>
<style>
h1 {
font-size: 24px;
color: #C00000;
}

h2 {
font-size: 18px;
color: #808080;
}
</style>
</head>



En el pasado código, establecimos que cada H1 y H2 tag serín formateados de la manera especificada. Luego, dentro de nuestras páginas, simplemente utilizamos los tags H1 y H2 para llamar el formato:

<h1>Titulo 1</h1>
<h2>Subtítulo 2</h2>



Es importante ver que cada vez que invoquemos cada tag definido, el navegador automáticamente dará ese formato a el contenido dentro del tag. De esta manera se pueden definir otros tipos de formatos y no está limitado a los tags regulares. De esta manera, existen un infinito de clases que podemos definir en nuestras páginas:

<head>
<style>
.mitexto {
font-size: 11px;
color: #E9E9E9;
}
</style>
</head>



De esta manera, definimos la clase "mitexto". Fíjese que para definir clases personalizadas, es necesario utilizar un punto a la izquierda del nombre de la clase, de lo contrario el navegador pensará que se trata de un tag regular pero el tag <mitexto> no existe, por lo que no se realizará ningún formato.

Para llamar la clase dentro de nuestro diseño, utilizamos el siguiente formato:

<font class="mitexto">Este es mi texto en formato 11px tal como definido en el STYLE tag.</font>



Artículos Relacionados

Ericsson adquiere unidad de CDMA y LTE de Nortel por $1.3 billones 11/14/2009 9:04:55 PM

This article has been seen 822 times.
More News and Articles
 
 
Internet | Comunicaciones y Telefonía
Google lanza competencia contra Skype
La empresa Google lanzó esta semana el servicio Google Talk, una aplicación incluida dentro del servicio GMail que permite a sus usuarios realizar llamadas telefónicas a líneas terrestres, tal como si utilizara un teléfono convencional.
Por Ronald Flores | 8/30/2010 @7:37:33 AM

Tecnología | Celulares y Equipos Móviles
RIM lanza Blackberry Torch
Con poco ruido y nada de filas largas fue lanzado el nuevo Blackberry Torch, la más reciente actualización de los populares dispositivos mobiles por la empresa Research in Motion (RIM).
Por Ronald Flores, Puerto Rico Internet News | 8/29/2010 @6:19:11 PM

Internet | Aplicaciones y Software
IE9 estará disponible desde septiembre 15 2010
Cerca de 2.5 instalaciones de Internet Explorer 9 PREVIEW BETA han sido descargadas de su sitio web, según señala Microsoft en un intento de crear momentum para el lanzamiento de la más reciente iteración de su navegador de Internet.
Por Ronald Flores, Puerto Rico Internet News | 8/29/2010 @6:20:20 PM

Internet | Sitios Nuevos
Baby's Planet anuncia rediseño de su página
Baby's Planet, una cadena de tiendas que ofrece todo tipo de productos para bebés, anunció este mes el lanzamiento de su renovada página en el internet, www.babysplanet.com.
Por Ronald Flores, Puerto Rico Internet News | 8/29/2010 @6:22:08 PM

Tecnología | Productos Nuevos
Un vistazo a Microsoft Surface
A continuación un vistazo a la tecnoligía "Surface" de Microsoft, un equipo diseñado estilo mesa el cual está siendo desarrollado por la empresa para ofrecer una manera nueva y diferente de interactuar con la tecnología y el internet.
Por Ronald Flores, Puerto Rico Internet News | 8/30/2010 @3:37:52 AM