Introducción a CSS: Estilos y Diseño Web

Escrito el 17 de Enero de 2025 en español con un tamaño de 5,2 KB

CSS: Hojas de Estilo en Cascada

CSS (Cascading Style Sheets, por sus siglas en inglés) es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. El programador tiene que escribir ese código una vez y reutilizarlo. Trabajar una vez y trabajar bien, y luego reutilizar. Ejecuta un script en el servidor, entonces ese script le dice al navegador que se comporte de la misma manera. CSS es una tecnología orientada al control de la apariencia de un documento de hipertexto. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>.

HTML y CSS: Estructura y Presentación

HTML define la estructura del contenido, mientras que CSS describe cómo los elementos dispuestos en la página son presentados al usuario. Con CSS podemos especificar el tamaño, estilo, color, recuadros, así como el lugar y cómo disponer texto e imágenes en la página. El lenguaje de las hojas de estilo está definido en las especificaciones CSS1 y CSS2 de la W3C (World Wide Web Consortium). La W3C avaló y certificó el uso de CSS, regulando la calidad de la tecnología. El W3C es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

CSS: Estándar de la Industria Web

CSS es un estándar aceptado por toda la industria relacionada con la web. Se pueden asociar las reglas de estilo a las marcas de tres maneras: directamente a la marca, dentro del encabezado <head> de la página o agruparlas en un archivo independiente con extensión .css.

Los Tres Tipos de Estilos CSS

CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página web:

Hoja de Estilo Externa: Una hoja de estilo externa es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
Hoja de Estilo Interna: Una hoja de estilo interna es una hoja de estilo que está incrustada dentro de un documento HTML (va a la derecha dentro del elemento <style>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra, aunque esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas. En general, la única vez que se usa una hoja de estilo interna es cuando se quiere proporcionar alguna característica a una página web en un simple fichero, por ejemplo, si se está enviando algo a la página web.
Estilo en Línea (Inline): Un estilo en línea es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página web, a nivel de código, se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona. Este es el método recomendado para maquetar correos electrónicos en HTML.

Hosting y Proveedores de Servicios de Internet (ISP)

El hosting implica contratar un servicio de una empresa prestadora llamada ISP (Proveedor de Servicios de Internet). El ISP es un prestador de servicios de conectividad. Los servicios de host están vinculados con los servicios de host. Algunos servicios de hosting son totalmente abiertos y gratuitos, con publicidades.

Metatags, URL y URI

Metatags: código que se escribe en las etiquetas.

URL (Uniform Resource Locator) y URI (Uniform Resource Identifier)

Ejemplo de URL:

http://www.yahoo.com.ar/fotos/vacaciones/index.html

http://: Protocolo
www: Red Internet
yahoo: Dominio
com: Tipo
ar: País

Dominios y Extensiones de País

com: Comercial (Argentina)
edu: Educación (Paraguay)
sov/gov: Gubernamental (Reino Unido)
net: Red (Suiza)
org: Organización (México)
mil: Militar (Costa de Marfil)
co: Colombia
es: España

URI: Carpetas asignadas por equipo.

Entradas relacionadas:

Etiquetas: