Explicación CSS
El código CSS
( cascade style sheets ) permite aplicar un diseño en general al documento HTML sin tener que modificar página tras página.
Su aplicación es en cascada porqué se aplica a todo mientras no se indique lo contrario.
El HTML únicamente sirve para indicar la estructura de una página: cabecera, menú principal, contenido, pie de página..
Las hojas de estilo definen como serán cada uno de los apartados del documento.
Por ejemplo: Para el encabezado "h1" le definimos la tipografía, el cuerpo de la letra, si tendrá fondo, etc. De forma que todo lo que tenga la etiqueta "h1" tendrá la misma apariencia.
En CSS las propiedades se indican de manera específica:
Cuando tocamos el código HTML ponemos las cosas en <head> o <body>, pues para poner el código CSS lo ponemos en <style> detrás de <title> y cuando acabamos un estilo se cierra igual que se abre: {}
El código CSS se puede aplicar en el mismo documento de nuestro HTML o crearlo a parte y vincularlo. Al vincularlo lo que conseguimos es ahorrar tiempo a la hora de modificar las cosas, con modificar en el archivo una tipografía se aplicaría a todo lo que lleve esa etiqueta en lugar de tener que ir cambiando una a una en caso de usar ese estilo en varias páginas. Si el CSS es externo al modificarlo se aplicarán los cambios a todos los archivos HTML que estén vinculados.
En nuestros estilos elegimos fuentes seguras, son aquellas que funcionan en todos los ordenadores de forma que nos asegura que se verán correctamente en cualquier sitio.
El CSS no es solo aplicable a elementos como etiquetas sino también a cajas, Divs, tablas, etc.
Cada etiqueta tiene su formato y su ID. Podemos hacer un estilo para los dos a la vez.
-Estilo ID: se llama igual que la ID que le damos con # delante para identificarla.
-Si las etiquetas se contradicen la ID tiene más valor que el resto de selectores.
ejemplo: tenemos la etiqueta "body" con tipografía arial y una ID para el segundo párrafo con tipografía Helvética, pues tiene más importancia la ID de forma que ese párrafo sería en Helvética.
¿Cómo crear los estilos?
Desde el mismo documento HTML:
Los estilos pueden ser internos, es decir, estar escritos en el código HTML.
Estando en DreamWeaver abajo a la izquierda nos aparece la siguiente barra:
Elegimos nueva regla CSS y le damos a editar regla. Nos aparecerá un panel donde debemos elegir el tipo de estilo que le vamos a aplicar:
Como podemos ver nos aparecen cuatro tipos de selectores para CSS:
1- Clase: su etiqueta siempre va precedida por un punto " .verd " (por ejemplo) y se puede aplicar múltiples veces: " .verd {color: ### ;} " pero solo a los elementos que le indicamos. Este selector está por encima de los otros. Ejemplo:
.h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #930;
text-decoration: underline;
}
Anotación: DreamWeaver está traducido a Español, pero los códigos no porqué html está en inglés, y hace referencia al apartado con ese nombre, si lo traducimos no funciona.
2- ID, identidad: sólo son aplicables a un único elemento de la página ( menú, encabezado, etc.). Va precedido por una almohadilla.
Ejemplo:
#p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
font-weight: bold;
}
3- Etiqueta: se aplica a las etiquetas únicamente, no a los elementos.
4- Compuesto: podemos crear una combinación de selector entre los tres anteriores.
En el panel de estilo nos muestra los que tenemos creados. "Estilo CSS / Todo "
Desde un documento CSS.
Los pasos son los mismos, solo que en lugar de estar en el documento HTML tenemos que crear un documento nuevo CSS desde DreamWeaver.
Este archivo tendrá el formato .css, por ejemplo: style.css.
Para vincular el archivo .css vamos al apartado HTML y en el head ponemos:
<link href="ruta" rel="stylesheet" type="text/css" media="all" />
