Maneras de colocar estilos (css)

LeoJ90 · 17-oct-2005, 04:50

Existen varias maneras de colocar estilos personalizados en una web:

1.- Con el atributo style mÃ¡s los estilos:

Código:

<font style="font-size: 10pt; color: #222222; font-family: Arial;">Texto</font>

2.- Usando clases (clases de estilos predefinidos por el webmaster) y los estilos en el mismo archivo de la pagina:
Entre las etiquetas <HEAD> y </HEAD> se coloca la etiqueta style:

Código:

<style type="text/css">
.texto1 {
font-size: 12pt;
font-family: Arial;
color: #000080;
font-style: italic;
}
.menu {
font-size: 10pt;
color: #111111;
}
</style>

3.- Usando clases, pero en un archivo .css externo al de la pagina:
Creamos el archivo con extensiÃ³n .css y no usamos la etiqueta style, escribimos directamente las clases:

Código:

.texto1 {
font-size: 12pt;
font-family: Arial;
color: #000080;
font-style: italic;
}

Y en el codigo de la pagina, entre <HEAD> y <HEAD> se pone:

Código:

<LINK REL="stylesheet" TYPE="text/css" HREF="estilos.css">

Y por Ãºltimo, para poner las clases usamos el atributo class y el valor es el nombre de la clase, sin el punto. Se pueden poner en cualquier etiqueta (div, p, font, td, table, b, i........):

Si la clase es .texto1, el codigo deberia ser:

Código:

<font class="texto1">Texto.......</font>

O podemos usar la etiqueta span:

Código:

<span class="texto1">Texto.......</span>

Tambien, puedes agregar comentarios para saber q hace cada estilo o de donde es ese estilo (menu, contenido...):

/*Fuente Arial y en cursiva, para el texto del menu*/
.texto1 {
font-size: 12pt;
font-family: Arial;
color: #000080;
font-style: italic;
}

Cual es la mejor forma?, la numero 3, por 2 motivos:

1.- }Si pones los estilos en un archivo por aparte.. (.css) y los estilos van para todas las paginas, si quieres cambiar un estilo, solo lo cambias de ese archivo (css), en cambio si pones <style> en cada pagina, tendrias q cambiar cada uno.

2.- Si se actualiza la pÃ¡gina y los estilos estan en un archivo .css se visualizan los estilos mÃ¡s rapido, en muy poco tiempo. Si estarian en la misma pagina, se tendrian q recargar los estilos y la visualizaciÃ³n de estos seria un poco mas lenta.

Cevastyan · 17-oct-2005, 05:31

Muchas gracias por este "mini" tutorial!

Muy bueno y util :)

Gracias nuevamente

Saludos!

El_Barto · 22-oct-2005, 02:41

Insisto que para estas cosas ya hay tutoriales igual de simples, por ejemplo en www.desarrolloweb.com
Son igual de fáciles y un poco más precisos.

La gran ventaja que tiene usar los CSS en archivos externos es que una vez que el navegador carga el archivo queda almacenado en el cache, y entonces lo usa durante todo el tiempo que estes en el sitio. Lo mismo pasa al poner scripts de javascript en archivos externos (.js).

De todas formas les recomiendo a todos aprender más sobre CSS porque nos facilitan mucho la vida y se pueden hacer cosas increibles.
Les recomiendo visitar www.csszengarden.com (en ingles)
Excelente sitio web.
Es el mismo contenido, un mismo archivo XHTML pero que le van cambiando la hoja de estilos CSS y cambia completamente el diseño.
Es realmente increible.

Saludos