DISEÑO WEB CON CSS

En el tutorial anterior, vimos algo de teoría del CSS, en este tutorial, nos centraremos en enseñaros las propiedades a través del panel de CSS.

Si habéis leído el tutorial anterior, habéis visto su evolución y la importancia dentro del diseño web hoy en día. El CSS se ha convertido en algo imprescindible dentro del diseño web para cumplir con la normativa W3C y para una mejor interpretación del código HTML.

PANEL DE PROPIEDADES DE LA PÁGINA

Si hacemos click con el botón derecho del ratón sobre la página en blanco, vamos a propiedades de la página, nos aparece está ventana, desde la cual empezamos a dar forma al sitio web, no solamente creando las apariencias de los códigos CSS y HTML, si no que también, eligiendo el estilo de los encabezados (h1, h2, h3,…), si navegamos por la ventana, nos daremos cuenta de que es muy intuitivo y fácil. No voy a profundizar en este apartado, ya que es mucho más importante llegar a entender los apartados siguientes, ya que son imprescindibles para un buen diseño web.

PANEL ESTILOS CSS

Si observamos el panel de Estilos CSS, tenemos dos partes, Tabla de reglas, donde aparecerán todas las reglas CSS que vayamos creando en nuestro diseño web y debajo las Propiedades de las mismas.

Lo primero que tenemos que hacer es crear un nuevo documento CSS y guardarlo, lo enlazamos y ya podemos trabajar con un documento CSS a parte del diseño web que estamos realizando.

Si creamos una regla CSS, nos aparecerá la siguiente ventana:

Encontramos Clase, podemos crear reglas CSS genéricas y aplicarlas en el momento que queramos, aplicando la clase al objeto o texto al que queremos aplicar el estilo. También nos encontramos ID las etiquetas HTML pueden contener un identificador único para diferenciarlas del resto, para ese identificador, se pueden crear estilos propios. Nos encontramos con Etiquetas, aquí si desplegamos el combobox de abajo, vemos que nos aparecen las etiquetas HTML a las que podemos aplicar un estilo, esto nos servirá para crear estilos para que cada vez que se utilice dicha etiqueta HTML, contenga ese estilo. Y finalmente vemos Compuesto, en este apartado podremos utilizar reglas para etiquetas HTML de un identificador en concreto creando un diseño web mucho más personalizado.

DEFINICIÓN DE REGLA CSS

Aquí es donde más nos vamos a detener, para explicar las diferentes opciones, al menos las más usadas dentro de nuestro diseño web.

En la categoría “Tipo”, podemos cambiar el tipo de la fuente, el tamaño, el color de la misma, su estilo (negrita, cursiva,…), dando un estilo más personal en nuestro diseño web no utilizando fuentes comunes o estilos comunes en nuestros textos. Si la regla fuera para un enlace, podríamos decir si queremos que el enlace esté subrayado como podemos encontrar en muchos sitios o por lo contrario queremos que no esté subrayado.

En la categoría “Fondo”, encontramos las propiedades para modificar el fondo de la página, el “div”, una celda de una tabla, etc. Si nos fijamos encontramos el “background-color”, propiedad desde el que podemos modificar el color de fondo, también podemos añadir una imagen de fondo, pudiendo escribir o situar otros elementos encima. A esta imagen, podemos decir que se pueda o no repetir hasta rellenar el hueco y en que ejes de coordenadas (X ó Y), también podemos indicarle la posición que queremos que tenga la imagen.

Bueno, hasta aquí para este tutorial, seguiremos explicando las siguientes propiedades en un segundo tutorial, espero que os parezca importante lo que se está explicando sobre diseño web.