Ahora que ya sabes como escribir un poco de CSS, te enseñare como integrarlo en tu pagina HTML. Para empezar, debemos saber como y donde poner los códigos de CSS. Hay dos formas de hacerlo, la primera es ponerlos dentro de tu pagina HTML y la otras es crear un archivo con la extensión .css enlazado en tu pagina HTML.
Usando CSS dentro del HTML
Para empezar, personalizaremos las etiquetas <h2> y el fondo de la pagina:
1 2 3 4 | <style> body {background-color:#000000;} h2 {color:#FF9900;margin:2px;} </style> |
Como puedes ver es simple, le acabamos de asignar un color anaranjado, y también le bajamos un poco el margen a la etiqueta <h2>. También asignamos que la pagina sea negra de fondo. Ese código lo pones dentro de la etiqueta <head></head> para mas orden, pero puedes ponerlo también en la sección de cuerpo <body> en tu pagina. Entonces cuando escribimos la etiqueta <h2> en cualquier parte de la pagina, nuestra pagina ensañara nuestro titulo a nuestro gusto.
Prueba… Notas el cambio?
Interesante: Este formato es usado o se usaba en las pagina sociales como MySpace o Hi5, y puede ser usado donde es permitido el ingreso de cogido de HTML.
Usando CSS enlazado
Abre tu editor de texto, cualquiera que tengas, y crea un archivo que se llame “estilo.css”. Pon ahí la misma especificaciones para la pagina como hicimos arriba (linea 2 y 3). Salva el archivo en el mismo directorio donde se encuentra tu pagina HTML.
Importante: Aquí no tienes o puedes poner las etiquetas <style></style> o otra etiqueta de HTML.
Eso es todo, con lo del archivo “estilo.css”. Regresa a tu pagina HTML. Ahora lo tenemos que llamar o enlazar a nuestra pagina HTML, por medio de la etiqueta <link>. Esta etiqueta es puesta adentro de la etiqueta <head>. Los resultados serán los mismos.
1 2 3 | <head> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> |
Usando CSS dentro de cada etiqueta
La ultima forma de como incorporar un estilo en HTML se hace usando la propiedad de style que casi todos las etiquetas poseen. Ejemplo:
1 | <h2 style="color:#FF9900;background:#CCCCCC;"></h2> |
Conclusión
Bueno, ahora ya sabes como implementar codigo CSS en tus paginas web. Como te das cuenta esto te puede ahorrar mucho tiempo y código cuando haces una pagina web. Recuerda que cuando asignas algún estilo de tu gusto a cualquier etiqueta todas esas etiquetas saldrán con el nuevo estilo asignado.
En el siguiente tema sobre CSS, miraremos Classes y IDs…