El <link rel="stylesheet" type="text/css" href="CSS.css"> hace referencia a un archivo css. En el caso del <style type = "text/css"> hasta el </style> es un segmento de código para especificar que toda etiqueta llamada body tendrá color purple y de fondo de color el #d8da3d. En la primer parte de mi comentario, mencioné la referencia a un archivo css... ok, tendrá el formato que ponen a continuación aunque tanto la referencia como el bloque son INDEPENDIENTES entre sí. De existir una etiqueta (body, head, div, etc) en el archivo exportado (referencia) y el archivo donde se utiliza, habrá la jerarquía de que utilizará el que está definido directamente en la interfaz y no en el archivo exportado. Espero haberme explicado
Ahora que tenemos creada la Hoja de Estilos , hay que decirle a la página web index.html que tiene que leer las características que hay en estilos.css para que sepa qué propiedades queremos que tenga cada elemento de la página..
Como los estilos no son un elemento que aparecerá en la página sino algo que indica cómo se han de mostrar los elementos (color, tamaño, etc), parece fácil adivinar que los estilos (o la llamada a la hoja de estilo) hay que indicarlos dentro de la cabecera o Head de la página no? Pues vamos allá. La línea de código Html que tenemos que incluir en la cabecera, es decir, entre <head> y </head> es esta:
<link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
(No pongas lo lo que dice ruta ehi tienes que cambiarlo por la dirreccion donde se encuentra almanesado la hoja de estilos por ejemplo c:escritorio/hoja de estilos , o algo asi)
Lo único que tendrás que cambiar seria la ruta ok.
Es media="screen", nunca 'green' y es importante, porque son los estilos aplicados para pantallas, como dice su nombre (esencialmente de ordenadores), aunque hay otras opciones en función de lo que quieras como media="all" (para todo), media="print" (versiones para imprimir), media="handheld" (pantallas pequeñas de otros aparatos), etc