Estilos en una hoja externa
Abriremos un nuevo documento al que podremos titular, Estilos II por ejemplo. Y guardar como estilo2
Activamos la ventana de Estilos y pulsamos el icono de crear nueva regla CSS:
Nos aparecerá la ventana donde definir un nuevo estilo:
marcaremos esta vez, Avanzadas ( ID, selectores contextuales… )
Y si antes lo definíamos en Sólo este documento, ahora lo haremos en una hoja de estilos.
Vamos a definir lo primero los enlaces, aceptamos y nos aparecerá una nueva ventana donde guardar la hoja que estamos creando y que debemos recordar su extensión nombrequepongamos.css
Y que hemos de guardar, normalmente yo suelo guardarlo dentro de la carpeta del Sitio, junto a los documentos .index y los de las distintas opciones. Y como el resto de documentos, hemos de subir al servidor para que los estilos sean aplicados.
*Nota: Si cambiamos cualquier cosa en esta hoja de estilos, hemos de guardar los cambios y volver a subirla al servidor, pisando la anterior. O el cambio no lo veríamos en la Web.
Una vez guardado, aparecerá la ventana donde hemos de definir el estilo que deseamos para los enlaces:
Hemos elegido que los enlaces tengan las fuentes Verdanda, Arial, Helvética, sans-serif
*Nota: Esto no quiere decir que vayamos a usarlas todas, si no que usaremos este grupo y el navegador, cuando el usuario final, abra la pagina una vez en Internet, usara aquella que tenga instalada, es decir, primero buscara la fuente Verdana, si no la tiene, la Arial… etc, etc..
El tamaño del texto del enlace, sera de 9 px, lo hemos elegido que se muestre en negrita, el color y que no este subrayado. Aceptamos ( no aplicar )
La hoja externa de estilos, esta creada y podremos verla en la columna de la derecha:
Y en la ventana CSS, podremos ver el estilo que acabamos de crear:
Si queremos que al pasar el raón por el enlace, se subraye, por ejemplo, pulsamos de nuevo el icono de nueva regla css y seleccionamos:
a:hover y en la ventana de definición:
Así podremos definir todos los estados de un enlace, si recordáis tal como hacíamos al principio desde el Inspector en Propiedades de la pagina, con la diferencia de que de aquella forma los estilos quedaban en el mismo documento, en la la etiqueta <head>
Ahora tan solo queda que creéis un enlace en la pagina y ver que ocurre?
Si tenemos un estilo definido, pero no acaba de gustarnos, podemos cambiar ya sea la fuente, el color.. el subrayado, etc… basta seleccionar el estilo, ir al icono que parece un lápiz, pulsamos sobre el:
y nos aparecerá la ventana donde poder cambiarlo:
he cambiado la decoración, pero igualmente podemos cambiar el tamaño del texto, el color o todo a la vez y que parezca otro 
Ahora imaginemos que ya tenemos una hoja creada y la queremos aplicar a un nuevo documento totalmente nuevo: Vamos a la ventana CSS y pulsamos el icono:
Marcar la opción Vincular:
Y en Examinar buscaremos la hoja de estilos que queremos vincular con el documento, puede ser la misma que ya tenemos en este Sitio, o podría ser otra de otra pagina que hayamos creado antes, solo recordar la extensión .css
Hasta ahora hemos creado estilos que se aplican a etiquetas de forma automática.
A los enlaces si habremos de hacerlos de este modo, pues un enlace siempre querremos modificarlo y ponerlo de acuerdo a los colores y diseño final de nuestra Web. Por lo que nos sera de gran utilidad, los definimos una vez y nos podemos olvidar
En el próximo tutorial veremos como definir estilos propios y aplicarlos de la forma que deseemos