3  El lenguaje Hojas de Estilo en Cascada (CSS)

3.1 Introducción

Hojas de Estilo en Cascada o CSS (siglas en inglés de Cascading Style Sheets) es un lenguaje de diseño gráfico para describir la presentación de un documento escrito en un lenguaje de marcado (ej. HTML). Permite especificar aspectos de diseño como colores, tipos y tamaños de letra, márgenes, alineamientos y muchos otros.

CSS permite manejar la presentación separadamente del contenido, lo que brinda una mayor una flexibilidad en el diseño. Por ejemplo, varios archivos HTML pueden compartir una misma presentación al hacer referencia a un mismo archivo CSS. También posibilita un despliegue diferenciado de acuerdo a los tipos y tamaños de pantallas, en conjunto con HTML5.

Al igual que HTML, CSS es un estándar de W3C. Fue propuesto por Håkon Wium Lie, quien trabajaba en CERN con Tim Berners-Lee, en 1994.

3.2 Ejemplos de uso de CSS

3.3 Conceptos básicos

3.3.1 Reglas CSS

Las hojas de estilo se basan en reglas CSS, como la que se muestra en la .

Los componentes de una regla CSS son:

  1. El selector: es el elemento, o elementos HTML, para los que aplica la regla.
  2. La propiedad: es la característica del elemento HTML (ej. color, tamaño, tipo de letra) a la que se desea aplicar el estilo.
  3. El valor de la propiedad: es el valor que se le asigna a la propiedad (ej. rojo, azul, etc. para el color).
  4. La declaración: es la combinación de propiedad y valor de la propiedad.

Entre las llaves ({}) pueden especificarse varias declaraciones, las cuales deben separarse con punto y coma (;). Aún cuando haya solo una declaración, se recomienda usar el punto y coma, por legibilidad.

Los siguientes son ejemplos de reglas CSS:

p {
    color:red;
}

body {
    background-color:black;
    color:white;
    font-family:Arial;
    margin:0 4px 0 0;
    border:12px solid;
}

h1,h2 {
    color:blue;
    background-color:yellow;
}

Pueden encontrarse listas y ejemplos de uso de las propiedades CSS en:

3.3.1.1 Especificación de reglas y propiedades CSS

Un navegador web busca reglas y propiedades CSS en el siguiente orden de prioridad:

  1. En su configuración por defecto.
  2. En archivos CSS (.css).
  3. En el elemento style.
  4. En elementos HTML individuales (ej. body, h1, table, …).
3.3.1.1.1 En elementos HTML individuales

Se hace a través del atributo global style, como en el siguiente ejemplo:

<h1 style="color:blue;">Encabezado estilizado</h1>

Esta forma no separa el contenido del estilo por lo que, en general, no es recomendada.

3.3.1.1.2 En el elemento style

El elemento style se ubica, por lo general, dentro del elemento head.

<head>
    <title>Ejemplo de reglas CSS especificadas en el elemento <style></title>
    <style>
        h1 {
            color:blue;
        }
    </style>
</head>
3.3.1.1.3 En archivos CSS (.css)

En la sección head del archivo HTML que va a usar los estilos, debe incluirse un elemento de tipo link, como se ejemplifica seguidamente:

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

Ejemplo de contenido de css/estilos.css:

p {
    color:red;
    font-size:200%;
}

h1 {
    background-color:yellow;
}  

body {
    background-color:black;
    color:white;
    margin:0 4px 0 0;
    border:12px solid;
}

3.3.2 Categorías de selectores

3.3.2.1 Selectores de tipo

Aplican para todos los elementos HTML de cierto tipo (ej. h1, h2, p, table).

Código CSS

p {
    color:blue;
}

Código HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non consequat augue, vel condimentum velit
</p>

3.3.2.2 Selectores de clase

Aplican para elementos HTML con un valor específico en el atributo class. En la sintaxis de CSS, los selectores de clase se definen con un punto (.) seguido del nombre de la clase.

Código CSS
Se definen la clase “azul” y la clase “rojo”.

.azul {
    color:blue;
}

.rojo {
    color:red;
}

Código HTML
Se aplican las clases “azul” y “rojo” en varios elementos HTML.

<p class="rojo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at lacus nibh. Mauris volutpat malesuada ultrices.
</p>

<p class="azul">
    Ut aliquet nulla a ornare laoreet. Cras sed eros faucibus, dignissim odio quis, dictum ante. Proin hendrerit lacinia lectus et condimentum.
</p>

<p class="rojo">
    Phasellus commodo velit quam, et gravida felis molestie et. Quisque luctus cursus euismod. Aenean semper pellentesque dolor.
</p>

3.3.2.3 Selectores de ID

Aplican para el elemento que posea un valor específico en el atributo id. Estos selectores se denotan por un signo de numeral (#) seguido por el id del elemento.

Código CSS
Se definen las clases “arial” y “times”.

#arial {
    font-family: Arial;
}

#times {
    font-family: Times;
}

Código HTML
Se aplican las clases “arial” y “times” en varios elementos HTML.

<p id="arial">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at lacus nibh. Mauris volutpat malesuada ultrices.
</p>

<p id="times">
    Ut aliquet nulla a ornare laoreet. Cras sed eros faucibus, dignissim odio quis, dictum ante. Proin hendrerit lacinia lectus et condimentum.
</p>

3.4 Ejercicios

  1. Con HTML y CSS, cree un sitio web sobre su hoja de vida (puede escoger otro tema). Puede utilizar información real o ficticia. El sitio debe tener al menos tres páginas:

    • Principal (index.html): información personal como nombre, dirección, correo electrónico, resumen de experiencia laboral, resumen de historial académico, fotografía. Debe contener enlaces a las otras páginas del sitio.
    • Experiencia laboral: puestos ocupados, proyectos en los que ha participado, etc. . Historial académico: títulos obtenidos, universidades, etc.

  2. Escriba el contenido y la estructura de cada página en HTML.

  3. Escriba un archivo CSS con estilos para el sitio web y aplíquelos en cada página del sitio.

  4. Publique su sitio en GitHub Pages.

3.5 Recursos adicionales