Vamos a crear y definir unos estilos adecuado al trabajo que deseemos realizar.

Vimos el los tutoriales anteriores, como aplicar un estilo a unas determinadas etiquetas y que por defecto se aplicasen a estas mismas etiquetas. Lo hicimos con los enlaces, y texto, pero podríamos hacerlo con todas ellas, pero claro, veíamos que en cada parrafo, habría el mismo estilo, que todos los enlaces tendrían la misma decoración, formato de texto, etc..

Por lo tanto si bien esto tiene la ventaja de que se van aplicando automáticamente al ir insertando el texto, o enlaces, lo mejor es crear un estilo y definirlo, tal como deseemos y aplicarlo nosotros mismos.

Abriremos un documento htm, nuevo ( totalmente en blanco ) y guardamos con un nombre:

*Nota: Normalmente esta es la forma en que empezaremos el diseño de una pagina Web, por lo que este documento, lo guardariamos con el nombre de ‘plantilladisenio’ por ejemplo. O cualquier otro al que mas tarde convertiremos en la auténtica plantilla de la Web.

Activamos el panel de estilos en Ventana/Estilos CSS

Clic el icono crear nueva regla:

Marcamos Avanzados y seleccionaremos las etiquetas body, td

* Nota: podemos poner varias por cada regla de estilos, separadas por comas. Definiremos en esta regla, la font, el tamaño, el color.. y se irán aplicando de forma automática en todos los documentos que realicemos con este estilo.

Recordar, que esta hoja de estilos, la hemos vinculado, con el documento del cual mas tarde (en teoría, al construir una Web) haremos la plantilla.

Empezamos así:

Aquí nos va a pedir que lo guardemos:

Se puede tener en un mismo sitio mas de una hoja de estilos, solo bastara que recordemos y sepamos con cuales documentos esta vinculada una y con cuales otra, u otras

Definimos la fuente, el color de esta, el tamaño.. etc:

Ahora los margenes del documento. Es importante disponer de todo el espacio posible para empezar a diseñar. Por lo tanto pondremos 0 a todo:

Aceptamos y todos estos valores, se aplicaran de forma automática cada vez que, una vez convertida en una auténtica plantilla, abramos un nuevo documento. Creamos otra regla de estilo, solo para la etiqueta body:

Categoría Fondo:

ponemos el color de fondo y aceptamos.

Para definir los estilos de los enlaces, procedemos de igual modo, tal como ya lo habíamos hecho en el tutorial anterior.

*Nota: Y os cuento un truco que hago yo y que me ahorra tiempo.

Yo suelo definir todos estos estilos cuando creo un documento nuevo, desde el Inspector de Propiedades,Como recordaréis, estos estilos se insertan en el mismo código del documento. Así pues, los copio, borro las etiquetas:

<stylo> y </stylo>.

Creo una nueva hoja de estilos en cascada, en la cual no defino ningún estilo, una vez creada y abierta pego los que cree en el documento htm, desde el Inspector de Propiedades. Guardo la hoja y me resulta mas rápido y cómodo

Pero esto es un truco, lo suyo seria hacerlo así tal como os indiqué antes. Hecho esto, comenzaremos a crear estilos que iremos insertando así como nos convenga.

Nueva regla de estilo:

observar que el nombre del estilo va precedido de un punto (.) y luego un nombre que le puse para reconocerlo mas tarde. Defino el color del fondo:

y aceptamos.

En el documento htm, crearemos una nueva tabla, en la cual, configuramos como siempre el ancho, la alineación:

Situamos el cursor del ratón en la tabla y hacemos clic en la etiqueta que aparece justo encima del Inspector

así quedara esta seleccionada y vamos a aplicarle el estilo que hemos creado antes:

veremos que el color de fondo de la tabla cambiara al que hayamos elegido.

De esta forma iremos aplicando los estilos a partir de ahora. Para quitar un estilo, veis que la primera opción sera siempre ‘Ninguno’ pues de la misma forma que lo hemos aplicado antes, seleccionamos ahora Ninguno y desaparecerá, o pulsando cualquier otro, cambiaremos de estilo para el fondo de la tabla.

De la misma forma podremos definir el fondo de un td. Primero, desde el Inspector, definimos la alineación de la celda, y Nueva regla de estilo/Categoría fondo:

Y definimos un fondo para la celda:

Para aplicar a una celda el estilo, primero clic en la etiqueta, igual que con la tabla:

Insertar una imagen como fondo:

Nueva regla de estilo: como nombre del estilo yo puse .fondotabla2 y desde examinar, busco una imagen en la carpeta imágenes del Sitio en el cual estoy trabajando:

Creamos ahora el estilo .fondoimgtd y pondremos estos valores:

Ver Aquí ejemplo

Podremos hacer diferentes combinaciones con estos valores, así pues probar e investigar hasta encontrar lo que mas os guste vale? Otra forma de aplicar los estilos es :

Mmm…. lo mismo encontráis que ahora seria mas fácil crear el portal no? Insertando los colores de los fondos de las tablas y celdas, con estilos, no?

Pues si chiquis, pero todo lo que aprendimos entonces.. aunque nos costase… nos lo habríamos perdido Y ahora irán saliendo todo aquello y nos sera mucho mas fácil

Y eso que me salte el hacerlo todo directamente desde el código fuente eh? Guardamos la hoja de estilos y la subimos al servidor junto con el resto de los documentos e imágenes.

Recordar que el nombre de los estilos, puede ser cualquiera, pero debe ir un punto (.) al comienzo de ellos, no tener caracteres especiales ni espacios en blanco.

Por ultimo, en la columna de paneles, vemos que van quedando reflejados los estilos que vamos creando y en el orden que lo vamos haciendo:

Para modificarlos, seleccionamos uno, y pulsamos el icono del lápiz, aparece entonces la ventana donde podremos cambiar los valores. Se aplicaran automáticamente, es decir, que podemos variar los colores de fondos de las tablas, celdas, formatos de texto, color del texto, etc… guardar el documento de estilos, subirlo al servidor y toda la pagina tendrá los nuevos estilos