11 Enlace a archivo CSS

Lo primero que haremos es eliminar los estilos que pusimos a las etiquetas en el apartado anterior, borramos “style”.

Creamos dentro de nuestra carpeta del proyecto una carpeta nueva a la que llamaremos CSS y dentro de esta creamos el archivo CSS nombrándolo como “estilos.css”.

Despues añadimos dentro del “head” el enlace al archivo CSS, para ello pondremos lo siguiente:

<link rel="stylesheet" href="css/estilos.css"/>

En esta etiqueta le indicamos que es una hoja de estilos y la ruta al fichero CSS.

Pasamos después a nuestro fichero CSS y empezamos a darle forma con el siguiente código:

*{    

    color: #F3F3E0;

    background: #060605;

    font-size: 12px;

}

body{

    margin: 0px auto;

}

Con el * indicamos que vamos a cambiar propiedades a todo el documento, seria como poner propiedades por defecto, en este caso damos el color del texto, el color de fondo y el tamaño de la fuente.

Observa que esta vez los colores los damos en otro formato, anteriormente indicábamos el color asi “red” ahora lo ponemos de esta forma “#F3F3E0”, en la web puedes encontrar muchos sitios que te facilitan la selección de los colores.

Despues le hemos puesto a body el margen superior e inferior a 0px y el ancho en automatico.

Pasamos a dar formato a nuestra cabecera, para esto indicamos en nuestro archivo CSS lo siguiente:

header{

    background:#404033;    

    width:95%;

    padding:10px;

    margin: 5px 5px;

    display:inline-block;

}

header h1{

    font-size: 44px;

    color:#F3F390;

    text-align: center;

    float: left;

    background:#404033;

}

header figure{

    float:left;

}

En el header cambiamos el color de fondo, le damos un ancho del 95%, un margen interior (padding) de 10px, un margen exterior de 5px y que se visualice en bloque o línea.

Despues indicamos el formato del titulo de la cabecera, indicando que será el “h1” que aparece dentro del “header”, cambiándole el tamaño de fuente, el color de texto, la alineación, que flote a la izquierda y el color de fondo.

Por ultimo hacemos que la imagen también flote a la izquierda con “float:left” esto hace que tanto la imagen como el titulo se mantengan en línea dentro de la cabecera.