CSS. Cascading Style Sheets
Traducido a nuestro español sería algo así como las hojas de estilo en cascada (lo de cascada es por que hereda los parámetros de las etiquetas padres, luego lo veremos).
Es un LENGUAJE usado para definir y crear el formato de presentación de un documento escrito con marcas tipo HTML.
El World Wide Web Consortium (W3C) es el encargado de formular la especificación que servirá en un futuro de estándar a los navegadores. Tengo que decirte, que aún la normativa no está estandarizada del todo, eso significa que cada navegador (firefox, Chrome, SAfari, Opera...) puede usar etiquetas específicas propias. Cuidado con este detalle ya que no sabemos a priori que navegador usarán lso futuros visitantes a nuestro SITE.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento, de su presentación.
Existen tres formas habituales de poder incorporar código CSS en una web.
Te recuerdo que cada etiqueta de HTML que usas tiene definido un estilo predeterminado se le conoce con el nombre de style. Lo que hacemos nosotros será cambiar ese estilo predeterminado.
Comote decia antes esto lo conseguimos de tres formas que veremos ahora.
Inline. Colocado en Linea.
La primera forma de añadirlo a un documento HTML es con los propios elementos aplicados en linea con el código HTML, es el método más sencillo, añadiendo un atributo style en el elemento concreto dentro de la página. No se podrá reutilizar entre los distintos elementos que comparten las mismas propiedades. Se escriben las propiedades del CSS en las marcas de HTML como muestra la imagen adjunta:
Este método solo se utiliza cuando el navegador o visor del documento tiene vetado las hojas de CSS. Por ejemplo, las páginas Web, que viene en los mails a modo de publicidad.
HOJA DE ESTILO INTERNA.
Es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style> y con el atributo <style type="text/css">. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho.
Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas).
Tiene una ventaja primordial con respecto al estilo Inline y es que los valores introducidos, afectarán a la totalidad de la página web. De esta forma, ahorramos espación, el código queda más simple y limpio, unificamos el criterio y sobre todo, ganamos tiempo. El inconveniente es que no podemos aplicarlo a distintas páginas y la actualización del formato de una web resultaría tedioso.
Observa como la hemos definido mediante la etiqueta <style> y la propiedad "type" tipo text/css. Están definidas las etiquetas <h1> y <p> con unas cuantas propiedades, familia de texto, tamaño de letra, color y decoración de texto. Esto afecta a las dos etiquetas que hemos puesto en las web de <h1> y <p>. Sencillo No :-)
HOJAS DE ESTILO SEPARADAS
Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Vinculamos la hoja CSS a la página web de una forma similar a como insertamos una imagen u otro objeto.
La etiqueta que usaremos para vincularla será:
<link rel="stylesheet" href="style/style.css" type="text/css" /> la situaremos entre las etiquetas <head></head>
Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página. Además podemos crear hojas de estilo según el tamaños del dispositivo que nos visita (móvile, tablets, portátiles, PCs escritorio).
Por supuesto esta será la forma correcta desde el punto de vista del diseño, se puede actualizar de forma rápida y generalizada, afecta a todas las etiquetas que se llamen igual.
Lo conveniente será, escribir la web, dibuja la estructura que quieras y por último, genera el documento CSS independiente.
En la actividad guiada veremos como crear nuestra primera hoja de estilo y conectarla a una web.
Antes de nada hay que ver como se escribe en lenguaje de CSS. Observa la imagen siguiente
Lo primero será elegir el selector en nuestro caso h6 (lista de selectores posibles) seguido de {
Luego introduciremos la propiedad que vamos a modificar (recuerda que cada selector tiene una propiedades asociada) en nuestro caso color seguido de : e introduciremos el valor de la propiedad. Para terminar con la propiedad colocamos ;
Podremos añadir tantas propiedades como necesitemos.
Cada propiedad que es variada recibe el nombre de declaración.
EL HOMBRE
que no comete errores, casi nunca hace nada
Manos a la obra, a cometer errores...
En las anteriores prácticas guiadas dejamos preparado nuestro Layaut ahora toca introducir algo de CSS para ver como nos va quedando.
Debes abrir el programa Sublime Text y seleccionar la opción de CSS.
Copia el siguiente codigo en él:
*{
margin:0;padding:0;
}
body {
font: .8em Georgia, "Times New Roman", Serif;
background: #fff;
color: #777;
}
p {
line-height: 1.7em;
margin: 0 0 15px;
}
h1 {
float: left;
font-size: 2em;
font-weight: normal;
font-style: italic;
padding: 0 0 25px 10px;
margin: 0 0 10px;
}
h2 {
font-weight: normal;
font-size: 2.6em;
padding: 0 0 10px;
margin: 0 0 15px;
}
h3 {
font-size: 1.7em;
font-weight: normal;
margin: 0 0 20px;
}
h3 a {
color: #222;
}
#content {
width: 960px;
margin: 40px auto;
}
.post {
clear: both;
padding: 30px 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 0 0 40px;
}
.post .details {
float: left; width: 250px;
}
.post .details .info {
font-size: .9em;
color: #999;
}
.post .details .info a {
color: #777;
border-bottom: 1px dotted #999;
padding: 3px 1px;
}
.post .body {
float: right;
width: 618px;
padding: 0 0 0 30px;
border-left: 1px solid #ddd;
}
.col {
width: 290px;
margin: 0 40px 30px 0;
float: left;
font-size: .9em;
}
.col.last {
margin-right: 0;
}
#footer {
clear: both;
border-top: 1px solid #ddd;
padding: 20px 0;
font-size: .9em;
color: #999;
}
Una vez copiado deberás de guardarlo dentro del directorio "css" que creastes.
Ahora abre la página index.html
Deberás de copiar la siguiente linea de código entre las etiquetas <head> tal como muestra la imagen.
<link rel="stylesheet" href="css/style.css" type="text/css" />
Si todo ha ido bien, tendría que verse tu página como asi.
Al igual que las anteriores prácticas deberás de comprimir el SITE entero y subirlo en la tarea "Práctica Guiada. Tercer Parte"
Utilizando alguna de las web que ya has creado, deberás de modificar su formato, mediante el uso de los tres tipos de CSS.
Hoja externa como en la práctica guiada que hemos visto.
Con una declaración <style> incial para incorporar la hoja de forma interna
Y por último declarando el formato en la propia linea.
Recuerda deberás de subir el CSS y la Web al Neocities. Lo normal será crear una carpeta CSS en neocities y en tu disco local e introducir en él, el archivo CSS.
Sube la dirección del archivo creado en la tarea 4.