Fundamentos de CSS para Diseño Web Profesional

JUL

2025

Portada » Informática » Fundamentos de CSS para Diseño Web Profesional

Fundamentos de CSS para Diseño Web Profesional

by estudiapuntes

CSS, Desarrollo Web, Diseño web, estilos web, hojas de estilo, HTML

¡Hola, amigo lector!

En este documento, exploraremos los fundamentos de CSS (Cascading Style Sheets), un lenguaje esencial para el diseño y la presentación de contenido web. Nos centraremos en el uso de archivos externos para una gestión eficiente de los estilos.

Introducción a CSS

El gran impulso de los lenguajes de hojas de estilo se produjo con el auge de internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos web. La dificultad de no existir un estándar para la definición de estilos que se ajustaran a las características de los navegadores, imposibilitaba la creación de documentos con la misma apariencia al visualizarse en diferentes entornos.

Integración de CSS con HTML

Una página web es un documento de texto, escrito, por ejemplo, en lenguaje HTML. Por otro lado, existe el lenguaje o código CSS, que, unido al código HTML, permite darle forma, color, posición; en resumen, darle estilo y otras características a una página web.

¿Qué es CSS? Cascading Style Sheets (Hojas de Estilo en Cascada)

CSS es un lenguaje que describe el estilo de un documento HTML. Es decir, describe cómo se deben mostrar los elementos HTML en la pantalla, en papel o en otros medios. Estas hojas de estilo pueden crearse de forma externa en archivos con extensión .css.

En resumen, CSS permite aplicar estilos (colores, formas, márgenes, etc.) a uno o varios documentos (generalmente documentos HTML o páginas web) de forma masiva. La idea central de CSS es utilizar el concepto de separación de presentación y contenido, intentando que los documentos HTML incluyan solo información y datos relativos al significado de la información a transmitir (el contenido), y que todos los aspectos relacionados con el estilo (diseño, colores, formas, etc.) se encuentren en un documento CSS independiente.

Ventajas de la Separación de Contenido y Estilo con CSS:

Las modificaciones visuales se realizan en un solo lugar, sin necesidad de editar todos los documentos HTML por separado.
Se reduce la duplicación de estilos en diferentes ubicaciones, lo que facilita la organización y la realización de cambios. Además, la información a transmitir es considerablemente menor, lo que resulta en páginas que se descargan más rápido.
Es más fácil crear versiones diferentes de presentación para otros tipos de dispositivos: tabletas, teléfonos inteligentes o dispositivos móviles, etc.

Métodos de Inserción de Hojas de Estilo CSS

Una vez que el navegador lee una hoja de estilo, formateará el documento HTML según la información contenida en ella. Hay tres formas principales de insertar una hoja de estilo CSS en un documento HTML:

Hoja de estilo Interna
Hoja de estilo Externa
Estilo en línea

Hoja de Estilo Interna

Una de las formas de incluir el código CSS es directamente en la cabecera del documento HTML, dentro de la etiqueta <style>. Es útil cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que complementen los estilos incluidos por defecto en todas las páginas del sitio web.

El principal inconveniente es que, si se desea hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen ese estilo, lo cual puede ser ineficiente para sitios grandes.

Hoja de Estilo Externa

Con el uso de una hoja de estilo externa, se puede cambiar el aspecto de un sitio web completo modificando solo un archivo. En esta modalidad, todos los estilos CSS deben ser incluidos en un archivo de tipo CSS (con extensión .css), y las páginas HTML lo enlazan mediante la etiqueta <link> en la sección <head>.

Este archivo .css no es más que un archivo de texto simple. Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.

Sentencia para integrar un archivo .css con el archivo HTML:

<link rel="stylesheet" type="text/css" href="estilos.css">

Al cargar la página HTML en el navegador, este descarga los archivos .css externos que están enlazados al documento HTML mediante la etiqueta <link> y procede a aplicar los estilos a los diferentes contenidos de la página.

Atributos de la etiqueta <link> para CSS:

La etiqueta <link> incluye cuatro atributos importantes cuando enlaza un archivo CSS:

rel: Indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
type: Indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
href: Indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
media: Indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explicarán en detalle los medios CSS y su funcionamiento.

Hoja de Estilo en Línea (Inline Style)

En este tipo, los estilos se aplican directamente en las propias etiquetas HTML, a través del atributo style. Aunque es útil para estilos muy específicos y puntuales, su uso no es recomendado para la mayoría de los casos, ya que rompe con el principio de separación de contenido y presentación.

Estructura de las Reglas CSS

Las reglas CSS se basan en un conjunto de declaraciones que constan del siguiente formato:

Selector: Es el elemento HTML que se va a seleccionar del documento para aplicarle un estilo concreto.
Propiedad: Es una de las diferentes características que brinda el lenguaje CSS (ej. color, font-size).
Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento (ej. blue, 12px).

Una buena práctica es organizar el código mediante espacios, con una propiedad por cada línea.

Ejemplo de Regla CSS:

h1 {
    color: blue;
    font-size: 12px;
}

En este ejemplo, los encabezados <h1> serán de color azul (blue) y de tamaño 12px. El selector (h1) apunta al elemento HTML que se desea estilizar. El bloque de declaración (entre llaves {}) contiene una o más declaraciones separadas por punto y coma (;). Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos (:). Una declaración CSS siempre termina con un punto y coma, aunque el último punto y coma dentro de un bloque de declaración no es obligatorio y puede omitirse.

Tipos de Selectores CSS

Los selectores CSS se utilizan para «encontrar» (o seleccionar) los elementos HTML a los que desea aplicar estilo.

Selector de Elemento (Tipo)

El selector de elemento selecciona elementos en función de su nombre de etiqueta HTML.

p {
    color: red;
    text-align: center;
}

En este caso, selecciona todos los elementos <p> (párrafos) y los alinea al centro con texto de color rojo.

Selector de ID

El selector de ID utiliza el atributo id de un elemento HTML para seleccionar un elemento específico. El id de un elemento debe ser único dentro de una página, por lo que el selector de ID se utiliza para seleccionar un único elemento. Para seleccionar un elemento con un ID específico, se debe escribir un carácter de almohadilla (#), seguido del ID del elemento.

#para1 {
    text-align: center;
    color: red;
}

Selector de Clase

El selector de clase selecciona elementos con un atributo class específico. Para seleccionar elementos con una clase específica, se debe escribir un carácter de punto (.) seguido del nombre de la clase.

.center {
    text-align: center;
    color: red;
}

También se puede especificar que solo los elementos de un tipo particular con una clase específica sean afectados:

p.center {
    text-align: center;
    color: red;
}

En el ejemplo anterior, solo los elementos <p> con class="center" se alinearán al centro y tendrán texto rojo.

Este párrafo es de prueba para el selector de clase.

Selector de Agrupación

Si se tienen varios elementos (por ejemplo: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) con las mismas definiciones de estilo, se pueden agrupar estos selectores para minimizar el código y mejorar la legibilidad.

h1, h2, p {
    text-align: center;
    color: red;
}

Comentarios CSS

Los comentarios se utilizan para explicar el código y pueden ser muy útiles cuando se edita el código fuente en una fecha posterior. Los comentarios son ignorados por los navegadores.

Un comentario de CSS comienza con /* y termina con */. Los comentarios también pueden abarcar múltiples líneas.

Ejemplos de Comentarios CSS:

p {
    color: red; /* Este es un comentario de una sola línea */
    text-align: center;
}

/*
Este es un comentario
de múltiples líneas
en CSS.
*/

Fundamentos de CSS para Diseño Web Profesional

Introducción a CSS

Integración de CSS con HTML

¿Qué es CSS? Cascading Style Sheets (Hojas de Estilo en Cascada)

Ventajas de la Separación de Contenido y Estilo con CSS:

Métodos de Inserción de Hojas de Estilo CSS

Hoja de Estilo Interna

Hoja de Estilo Externa

Sentencia para integrar un archivo .css con el archivo HTML:

Atributos de la etiqueta <link> para CSS:

Hoja de Estilo en Línea (Inline Style)

Estructura de las Reglas CSS

Ejemplo de Regla CSS:

Tipos de Selectores CSS

Selector de Elemento (Tipo)

Selector de ID

Selector de Clase

Selector de Agrupación

Comentarios CSS

Ejemplos de Comentarios CSS:

Relacionados

Publicidad

Temas