Cómo incluir CSS en un documento - Curso CSS básico a profesional capítulo 1
En este primer tutorial vamos a ver las dos maneras en las que podemos incluir CSS en tus páginas web.
Para empezar, debes tener claro porqué utilizar CSS. Imagina un sitio web diseñado solo con HTML. HTML, cuenta con estilos propios para adornar y colocar los diferentes elementos.
Entonces, ¿por qué se usa CSS? simple, si ese supuesto sitio web tuviese en cada página 100 elementos HTML diferentes, todos con varios atributos de estilos y 10.000, 20.000, 30.000 o más páginas y tuvieses que cambiar el diseño de todo tu sitio web, tendrías que cambiar elemento por elemento, página por página los estilos en HTML. Una tarea tediosa y casi imposible. Para solucionar esto surge CSS.
Por último, tengo que indicar, que aunque este sea un curso básico por el momento, necesitas tener conocimientos de HTML para entender las etiquetas de los ejemplos.
Cómo incluir CSS en un documento
CSS se puede incluir en cada página de la siguiente manera:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Capítulo 1 de CSS</title> <style type="text/css"> h1 { color: green; font-family: Arial; } p { color: blue; font-family: Arial; } </style> </head> <body> <h1>Esta es una etiqueta HTML H1.</h1> <p>Este es un párrafo.</p> </body> </html>
Resultado
La segunda forma y mucho más eficiente es crear una hoja de estilos CSS para poner todos los estilos en ella. De esta forma, cuando tengas que editar los estilos de tu sitio web lo harás en esta única hoja y no página por página.
Primero tienes que crear la página con HTML, sin estilos.
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilos.css"> <title>Capítulo 1 de CSS</title> </head> <body> <h1>Esta es una etiqueta HTML H1.</h1> <p>Este es un párrafo.</p> </body> </html>
Ahora creamos la hoja de estilos CSS:
<style type="text/css"> h1 { color: green; font-family: Arial; } p { color: blue; font-family: Arial; } </style>
En el HTML he incluido la línea que enlaza a la hoja de estilos: <link rel="stylesheet" type="text/css" href="estilos.css">. Fíjate en el atributo href, este atributo indica la ruta del archivo, por lo que si tienes la hoja de estilos en una carpeta diferente a la de la página HTML, deberás poner la ruta, por ejemplo: <link rel="stylesheet" type="text/css" href="CSS/estilos.css">.
0 comentarios:
Publicar un comentario
Si te a gustado o necesitas ayuda, tus comentarios son agradecidos :D