En otro post publicamos una breve introducción de html, aquí está el enlace por si no lo has visto, te servirá para poder comprender mejor ésta sección. Los estilos son una serie de componentes que conforman un lenguaje para darle formato y presentación a tus sitios web, tiene muchas ventajas entre ellas, que puedes separar el formato y presentación de un sitio web de tu código funcional, puedes heredar ese formato para todas las páginas que necesites, podrás dar mantenimiento más rápido y no requerirás “tocar” tu código operacional. Los estilos son ejecutados por el cliente, es decir, tu navegador es quien los interpreta. Los estilos funcionan a través de una serie de instrucciones que se aplican a un bloque de código, dichas instrucciones son tamaño de letra, color de fondo, alineación de texto, márgenes, tipografía, colores de los hipervínculos, imágenes y un extenso catálogo de instrucciones que puedes usar para darle presentación a tu sitio. Los estilos son determinados por el lenguaje CSS que significa (Cascading Style Sheets) hojas de estilo en cascada y pueden ser declarados en el mismo archivo html o en uno externo invocándolo desde el código principal, otra ventaja interesante de ésta estructura.
Hagamos un ejemplo:
Bien, primeramente abre tu bloc de notas suponiendo que usas Windows → Inicio + R, escribe: notepad y enter. Escribe la estructura de tu página web:
<html>
<head>
</head>
<body>
</body>
</html>
Hasta aquí, el código que tienes es html, vamos a agregar las etiquetas que nos indica que usaremos estilos, dicha etiqueta se abre y se cierra en la sección head y se llama <style></style>:
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Todo sigue siendo html, lo que se declare dentro de las etiquetas de estilo será CSS. Vamos a crear un identificador de estilo, se llamará estilo_de_texto, colocamos llaves de apertura y cierre para indicar el inicio y fin de las instrucciones:
<html>
<head>
<style>
#estilo_de_texto { }
</style>
</head>
<body>
</body>
</html>
Ya declaramos nuestro primer estilo, solo que no tiene nada. Vamos a indicarle que el color de fondo sea color azul, escribiremos la siguiente etiqueta dentro de la declaración:
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; }
</style>
</head>
<body>
</body>
</html>
Nótese que para terminar la declaración se escribió un punto y coma para indicar fin de la instrucción. La instrucción que se dio es bastante transparente, claro, si estás familiarizado un poco con el inglés. Background se traduce como fondo y color se sobreentiende en castellano, la palabra blue significa azul y es la propiedad que se aplicará la cual está separada con dos puntos del atributo. Vamos a aplicar otro atributo a ésta declaración, después del punto y coma vamos a indicarle el tamaño de la letra a 20 y el tipo de letra Arial, para esto usaremos el atributo Font y la declaración quedará así: Font: 20pt Arial
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; font: 20pt Arial; }
</style>
</head>
<body>
</body>
</html>
Ahora a este mismo estilo, vamos a decirle que queremos la letra color Amarillo con la instrucción: color: yellow; para ésta instrucción se escribe la propiedad color pero no se indica a qué será aplicada, en estos casos se sobreentiende que es a la fuente a quien se aplicará el atributo del estilo.
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; font: 20pt Arial; color: yellow; }
</style>
</head>
<body>
</body>
</html>
Excelente, ahora apliquemos un atributo para indicar que solamente necesitamos el 70% del ancho del espacio, si se restaura la ventana del navegador se ajustará al ancho de éste al 70% dicho atributo se llama ancho y se aplica así: width:70%;
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; font: 20pt Arial; color: yellow; width:70%; }
</style>
</head>
<body>
</body>
</html>
Listo, ya tenemos nuestro estilo solo que no hay a qué aplicarlo. Vamos a abrir y a cerrar la etiqueta div dentro del body, esto nos permitirá crear un espacio de trabajo para nuestro texto.
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; font: 20pt Arial; color: yellow; width:70%;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Ya tenemos nuestro espacio de trabajo pero todavía no le aplicamos el estilo que escribimos, para tal caso, apliquemos el atributo a la etiqueta y apuntemos hacia el identificador del estilo de la siguiente manera:
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; font: 20pt Arial; color: yellow; width:70%;}
</style>
</head>
<body>
<div id=»estilo_de_texto»>
</div>
</body>
</html>
Nótese que la relación se hace con el nombre del identificador de estilo colocado donde queremos que sea aplicado. Ya tenemos ligado el código html al estilo que queremos aplicar al texto, lo único que nos falta es escribirle algo dentro de las etiquetas para poder ver nuestra presentación de texto:
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; font: 20pt Arial; color: yellow; width:70%;}
</style>
</head>
<body>
<div id=»estilo_de_texto»>
Este texto tiene aplicado una hoja de estilo
</div>
</body>
</html>
Ahora para comprobar que el estilo se aplica solamente a la sección que le indicamos, vamos a abrir otra etiqueta div y dentro de ésta escribamos algo:
<html>
<head>
<style>
#estilo_de_texto { background-color:blue; font: 20pt Arial; color: yellow; width:70%;}
</style>
</head>
<body>
<div id=»estilo_de_texto»>
Este texto tiene aplicado una hoja de estilo
</div>
<div>
Este texto no tiene estilos
</div>
</body>
</html>
Guardemos nuestro archivo, vamos al menú Archivo → Guardar en el cuadro de diálogo que nos aparece le escribimos el nombre estilos.html y en guardar como tipo vamos a seleccionar Todos los archivos *.* Abramos nuestro archivo guardado pero con el navegador de nuestra preferencia. Veremos algo como esto:
Ahora intenta restaurar en diferentes tamaños tu navegador, verás como el estilo se ajusta al tamaño de éste.
Nota: Si quieres probar el ejemplo usando copiar y pegar, al momento de guardar tu archivo sustituye las comillas de ésta parte del código: <div id=»estilo_de_texto»> por las comillas simples, para obtener las comillas simples, presiona la tecla shift de tu teclado y sin soltarla, presiona también la tecla con el número dos de la parte numérica.