Curso CSS Insertando nuestra hoja de estilos

En el primer capítulo de este curso os explicamos que había 3 formas de insertar un código CSS en un HTML, como un archivo aparte, como una etiqueta o como un atributo, ahora os las vamos a explicar:

Como un archivo aparte:

Primero creamos un archivo al que podemos llamar Hojadeestilos.css en el que escribimos:

selector {
propiedad: valor;
propiedad2: valor2;
}

Y luego en el archivo html, dentro de head escribimos:

< link rel="stylesheet" type="text/css" href="hojadeestilos.css" >

Como una etiqueta:

< style="text/css" >
selector {
propiedad: valor;
propiedad2: valor2;
} 
< /style >

Como un argumento:

En este caso, sin embargo iría dentro de la etiqueta que se quiere modificar:

< Etiqueta
style="propiedad:valor;
propiedad2:valor2;" >
< /Etiqueta >

Como veis tenéis para elegir, yo os recomiendo la primera, ya que una misma hoja se puede insertar en varias páginas HTML.

Bueno por último vamos a poner 3 ejemplos de páginas HTML con CSS.

Como un archivo aparte:

Archivo ejemplo.css:

body {
background-color:black;
color:white;
}

Archivo ejemplo.html

< html >
< head >
< title > Fondo Negro, Texto Blanco < /title>
< link rel="stylesheet" type="text/css" href="ejemplo.css" >
< /head >
< body >
< p > Ahora el texto es blanco y el fondo negro < /p >
< /body >
< /html >

Como una etiqueta:

Archivo ejemplo2.html:

< html >
< head >
< title > Fondo Negro, Texto Blanco < /title>
< style >
body {
background-color:black;
color:white;
}
< /style >
< /head >
< body >
< p > Ahora el texto es blanco y el fondo negro < /p >
< /body >
< /html >

Como un atributo:

Archivo ejemplo3.html:

< html >
< head >
< title > Fondo Negro, Texto Blanco < /title>
< /head >
< body style=background-color:black; >
< p style=color:white; > Ahora el texto es blanco y el fondo negro < /p >
< /body >
< /html >

Podéis probar los ejemplos, pero acordaros de quitar los espacios entre < y la etiqueta, si quereis que os funcione, os recomiendo que los copieis a mano (sin Copy-Paste), así se os quedará.