Introduccion a hojas de estilo CSS Leccion 2
Vamos a pasar a hacer nuestro archivo de estilos css.
Abrimos el bloc de notas y llamamos al archivo como queramos nosotros usaremos en el ejemplo estilo.css(que original).
En primer lugar escribiremos lo siguiente:
/*cuerpo de pagina*/
Todo lo que pongamos entre /* y */ no es mas que para informacion nuestra de el codigo que estamos definiendo, no va a
salir nada representado en nuestra plantilla.
Lo primero vamos a definir el cuerpo de la pagina y para ello escribiremos el siguiente codigo:
/*cuerpo de pagina*/
body {
background: #E7E7E7 ;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
Hemos puesto body { que es el nombre del cuerpo y abierto la llave para darle las indicaciones.
Background es el fondo y #e7e7e7 es el color que queremos que salga en el fondo. Esto cada uno puede ir probando hasta dar con el color a su gusto.
Si quisieramos de fondo una imagen pondriamos la linea de la siguiente forma:
background: #E7E7E7 url("ruta donde tengamos guardada la imagen.Por ejemplo images/nombre de archivo.gif") top left;
Vemos que ademas hemos añadido top left; Esto es donde queremos alinear la imagen, dandole el valor right la alineariamos a la derecha o center si
la queremos centrada.
Font-size: es el tamaño de la fuente. Este valor lo hemos puesto en pixeles (px), pero se puede poner tambien en porcentaje y de alguna forma mas.
Nosotros para no liarnos mucho ahora que empezamos a dar nuestros primeros pasos en css lo haremos con pixeles y podeis comentar cualquier duda que tengais en
el foro.
Font-family: es el tipo de letra que queremos que aparezca.Es recomendable poner varias separadas por comas para que en caso de que alguien use un navegador que
no reconoce alguna fuente, Tenga varias opciones. De lo contrario si solo ponemos una y ese navegador no dispone de esa fuente, nos mostrara una pagina sin texto.
Color: Indica el color que queremos para el texto. Como en background pondremos el valor que mas se amolde a nuestra web.
Y por ultimo padding y margin son los margenes. Padding es el vertical y margin el horizontal.