Como aclaramos anteriormente, la nueva especificación de HTML (HTML5) no describe solo los nuevos elementos HTML o el lenguaje mismo. La web demanda diseño y funcionalidad, no solo organización estructural o definición de secciones. En este nuevo paradigma, HTML se presenta junto con CSS y Javascript como un único instrumento integrado.
La función de cada tecnología ya ha sido explicada en capítulos previos, así como los nuevos elementos HTML responsables de la estructura del documento. Ahora es momento de analizar CSS, su relevancia dentro de esta unión estratégica y su influencia sobre la presentación de documentos HTML.
Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML. Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación. Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseñadores y apartado del proceso de evolución de HTML.
La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La especificación de HTML5 fue desarrollada considerando CSS a cargo del diseño. Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologías completamente separadas.
En este momento las nuevas características incorporadas en CSS3 están siendo implementadas e incluidas junto al resto de la especificación en navegadores compatibles con HTML5. En este capítulo, vamos a estudiar conceptos básicos de CSS y las nuevas técnicas de CSS3 ya disponibles para presentación y estructuración. También aprenderemos cómo utilizar los nuevos selectores y pseudo clases que hacen más fácil la selección e identificación de elementos HTML.
Conceptos básicos: CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tamaño, color, fondo, bordes, etc…
IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 están siendo implementadas en las últimas versiones de los navegadores más populares, pero algunas de ellas se encuentran aún en estado experimental. Por esta razón, estos nuevos estilos deberán ser precedidos por prefijos tales como –moz- o -webkit- para ser efectivamente interpretados. Analizaremos este importante asunto más adelante.
HTML (HyperText Markup Language)
HTML es el lenguaje de marcado utilizado para estructurar y organizar el contenido de una página web. Define la estructura básica de la página y sus elementos, como textos, imágenes, enlaces, formularios, tablas, etc.
Características clave de HTML:
- Etiquetas: El contenido de HTML está compuesto por etiquetas (
<tag>), que indican al navegador cómo debe ser tratado el contenido. Ejemplos comunes de etiquetas son:<html>: Define el comienzo y el final de un documento HTML.<head>: Contiene metadatos, como el título de la página, enlaces a archivos CSS, y scripts.<body>: Contiene el contenido visible de la página.<h1>a<h6>: Encabezados de diferentes niveles.<p>: Párrafo de texto.<a>: Enlaces.<img>: Imágenes.<div>y<span>: Contenedores de elementos.
- Atributos: Las etiquetas HTML pueden tener atributos que proporcionan información adicional. Por ejemplo,
<a href="https://example.com">Link</a>utiliza el atributohrefpara especificar la URL del enlace. - Estructura jerárquica: HTML organiza el contenido en una estructura de árbol, donde los elementos pueden contener otros elementos (por ejemplo, una lista
<ul>contiene elementos de lista<li>).
CSS (Cascading Style Sheets)
CSS es el lenguaje utilizado para describir la presentación de un documento HTML, es decir, cómo se verá la página web. Controla el diseño visual y el formato del contenido.
Características clave de CSS:
- Selectores: Los selectores indican a qué elementos HTML se aplicará el estilo. Por ejemplo,
p { color: red; }cambia el color del texto de todos los párrafos (<p>) a rojo. - Propiedades y valores: CSS se compone de pares de propiedades y valores que definen estilos específicos. Por ejemplo:
color: Define el color del texto.font-size: Establece el tamaño de la fuente.margin: Controla el espacio alrededor de un elemento.padding: Define el espacio interno de un elemento.background-color: Cambia el color de fondo.
- Cascada y herencia: CSS se llama «cascading» porque los estilos pueden ser heredados o sobreescritos en función de su especificidad y orden en que se aplican.
- Responsive design: CSS permite crear sitios web que se adaptan a diferentes tamaños de pantalla, utilizando técnicas como media queries para aplicar diferentes estilos según el dispositivo.
Relación entre HTML y CSS
- HTML proporciona la estructura de la página, mientras que CSS se encarga de su apariencia visual.
- HTML es como el esqueleto de la página web, mientras que CSS es como la piel y la ropa que la hace lucir atractiva.
- En un documento web, el HTML se utiliza para definir el contenido y la estructura, y el CSS para diseñar y darle estilo a ese contenido.
Ejemplo básico:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Básico</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #0056b3;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>¡Hola, Mundo!</h1>
<p>Este es un ejemplo básico de una página web utilizando HTML y CSS.</p>
</body>
</html>