Teoría
Teoría

Otras formas de incluir CSS

Asignar estilos a cada etiqueta con el atributo style es bastante incómodo. Además, llena el HTML de fragmentos repetidos de CSS.

Por suerte, existen otras formas de incluir estilos. La primera es conectar un archivo externo con la etiqueta <link>, y la segunda es usar la etiqueta especial <style>.

Ahora van a conocer la segunda sección del editor: la pestaña style.css. El código del editor CSS se inserta en el documento HTML como si lo hubieran escrito dentro de la etiqueta <style>. Así se ve esa pestaña:

index.htmlstyle.css

Para empezar, vamos a limpiar el código en el editor HTML y después iremos dando estilo paso a paso a nuestro pequeño resumen con otras posibilidades de CSS.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Otras formas de incluir CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Resumen del curso</h1> <p style="color: green;">Etiquetas dobles.</p> <p style="color: green;">Etiquetas individuales.</p> <p style="color: green;">Atributos de las etiquetas.</p> <p style="color: green;">Estilos en línea (integrados).</p> <p style="color: red;">Estilos externos.</p> <p style="color: red;">Estilos por clases.</p> </body> </html>

CSS

/* body { font-family: "Tahoma", serif; } p { color: green; } */

ObjetivosRealizado

Eliminen todos los atributos style de los párrafos,
y después borren los símbolos /* de la primera línea del editor CSS.